Axis labels in ASP.NET CORE 3D Chart Component

9 Jan 202414 minutes to read

Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis.

Smart axis labels

When the axis labels overlap with each other, LabelIntersectAction property in the axis can be used to place them smartly.

Case 1: When setting LabelIntersectAction as Hide.

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"
        labelIntersectAction="@Syncfusion.EJ2.Charts.LabelIntersectAction.Hide">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "South Korea",     y= 39.4 },
        new ChartData { x= "India",           y= 61.3 },
        new ChartData { x= "Pakistan",        y= 20.4 },
        new ChartData { x= "Germany",         y= 65.1 },
        new ChartData { x= "Australia",       y= 15.8 },
        new ChartData { x= "Italy",           y= 29.2 },
        new ChartData { x= "United Kingdom",  y= 44.6 },
        new ChartData { x= "Saudi Arabia",    y= 9.7  },
        new ChartData { x= "Russia",          y= 40.8 },
        new ChartData { x= "Mexico",          y= 31   },
        new ChartData { x= "Brazil",          y= 75.9 },
        new ChartData { x= "China",           y= 51.4 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
}

Case 2: When setting LabelIntersectAction as Rotate45.

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"
        labelIntersectAction="@Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate45">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "South Korea",     y= 39.4 },
        new ChartData { x= "India",           y= 61.3 },
        new ChartData { x= "Pakistan",        y= 20.4 },
        new ChartData { x= "Germany",         y= 65.1 },
        new ChartData { x= "Australia",       y= 15.8 },
        new ChartData { x= "Italy",           y= 29.2 },
        new ChartData { x= "United Kingdom",  y= 44.6 },
        new ChartData { x= "Saudi Arabia",    y= 9.7  },
        new ChartData { x= "Russia",          y= 40.8 },
        new ChartData { x= "Mexico",          y= 31   },
        new ChartData { x= "Brazil",          y= 75.9 },
        new ChartData { x= "China",           y= 51.4 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
}

Case 3: When setting LabelIntersectAction as Rotate90.

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"
        labelIntersectAction="@Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "South Korea",     y= 39.4 },
        new ChartData { x= "India",           y= 61.3 },
        new ChartData { x= "Pakistan",        y= 20.4 },
        new ChartData { x= "Germany",         y= 65.1 },
        new ChartData { x= "Australia",       y= 15.8 },
        new ChartData { x= "Italy",           y= 29.2 },
        new ChartData { x= "United Kingdom",  y= 44.6 },
        new ChartData { x= "Saudi Arabia",    y= 9.7  },
        new ChartData { x= "Russia",          y= 40.8 },
        new ChartData { x= "Mexico",          y= 31   },
        new ChartData { x= "Brazil",          y= 75.9 },
        new ChartData { x= "China",           y= 51.4 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
}

Edge label placement

Labels with long text at the edges of an axis may appear partially in the 3D chart. To avoid this,
use the EdgeLabelPlacement property in axis, which moves the label inside the chart area for better appearance or hides it.

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"
        edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Maximum labels

The labels will be rendered based on the count in the MaximumLabels property per 100 pixel. If the range (minimum, maximum, interval) and MaximumLabels are set, then the priority goes to range. If the range is not set, then the priority goes to MaximumLabels property.

<ejs-chart3d id="container" title="Sales History of Product X" wallColor="transparent" enableRotation="true"
    rotation="7" tilt="10" depth="100" load="load">
    <e-chart3d-primaryxaxis title="Years" maximumLabels="1"
        edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis title="Profit ($)" rangePadding="@Syncfusion.EJ2.Charts.ChartRangePadding.None">
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart3d-primaryyaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series xName="x" yName="y" name="Product X"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column">
        </e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

<script>
    var series1 = [];
    var point1;
    var value = 80;
    var i;
    for (i = 1; i < 50; i++) {
        if (Math.random() > .5) {
            value += Math.random();
        } else {
            value -= Math.random();
        }
        point1 = { x: i, y: value.toFixed(1) };
        series1.push(point1);
    }

    function load(args) {
        args.chart.series[0].dataSource = series1;
    }
</script>
public ActionResult Index()
{
    return View();
}