Search results

Axis Labels

Smart Axis Labels

When the axis labels overlap with each other, you can use labelIntersectAction property in the axis, to place them smartly.

When setting labelIntersectAction as Hide

razor
hide.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")           
           .YName("yValue")
           .DataSource(ViewBag.dataSource)
           .Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")
           .YName("yValue1")
           .DataSource(ViewBag.dataSource)
           .Name("England").Add();
       }).PrimaryXAxis( px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
           .MajorGridLines(ViewBag.majorGridLines)
           .MajorGridLines(ViewBag.majorGridLines)
           .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
           .LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hides)
           .LabelFormat("y")
       ).PrimaryYAxis(py => 
            py.LabelFormat("{value}%")
            .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
            .MajorTickLines(ViewBag.majorTickLines)
            .MinorTickLines(ViewBag.minorTickLines)
            .LineStyle(ViewBag.lineStyle)
            .Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Render()
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4 },
             new AxisLabelData { x= "India", y= 61.3 }, 
             new AxisLabelData { x= "Pakistan", y= 20.4 },
             new AxisLabelData { x= "Germany", y= 65.1 }, 
             new AxisLabelData { x= "Australia", y= 15.8 },
             new AxisLabelData { x= "Italy", y= 29.2 },
             new AxisLabelData { x= "United Kingdom", y= 44.6 },
             new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
             new AxisLabelData { x= "Russia", y= 40.8 },
             new AxisLabelData { x= "Mexico", y= 31 },
             new AxisLabelData { x= "Brazil", y= 75.9 },
             new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public double y1;
        }

When setting labelIntersectAction as Rotate45

razor
rotate45.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")           
           .YName("yValue")
           .DataSource(ViewBag.dataSource)
           .Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")
           .YName("yValue1")
           .DataSource(ViewBag.dataSource)
           .Name("England").Add();
       }).PrimaryXAxis( px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
           .MajorGridLines(ViewBag.majorGridLines)
           .MajorGridLines(ViewBag.majorGridLines)
           .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
           .LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hides)
           .LabelFormat("y")
       ).PrimaryYAxis(py => 
            py.LabelFormat("{value}%")
            .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
            .MajorTickLines(ViewBag.majorTickLines)
            .MinorTickLines(ViewBag.minorTickLines)
            .LineStyle(ViewBag.lineStyle)
            .Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Render()
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4 },
             new AxisLabelData { x= "India", y= 61.3 }, 
             new AxisLabelData { x= "Pakistan", y= 20.4 },
             new AxisLabelData { x= "Germany", y= 65.1 }, 
             new AxisLabelData { x= "Australia", y= 15.8 },
             new AxisLabelData { x= "Italy", y= 29.2 },
             new AxisLabelData { x= "United Kingdom", y= 44.6 },
             new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
             new AxisLabelData { x= "Russia", y= 40.8 },
             new AxisLabelData { x= "Mexico", y= 31 },
             new AxisLabelData { x= "Brazil", y= 75.9 },
             new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public double y1;
        }

When setting labelIntersectAction as Rotate90

razor
rotate90.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")           
           .YName("yValue")
           .DataSource(ViewBag.dataSource)
           .Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")
           .YName("yValue1")
           .DataSource(ViewBag.dataSource)
           .Name("England").Add();
       }).PrimaryXAxis( px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
           .MajorGridLines(ViewBag.majorGridLines)
           .MajorGridLines(ViewBag.majorGridLines)
           .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
           .LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hides)
           .LabelFormat("y")
       ).PrimaryYAxis(py => 
            py.LabelFormat("{value}%")
            .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
            .MajorTickLines(ViewBag.majorTickLines)
            .MinorTickLines(ViewBag.minorTickLines)
            .LineStyle(ViewBag.lineStyle)
            .Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Render()
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4 },
             new AxisLabelData { x= "India", y= 61.3 }, 
             new AxisLabelData { x= "Pakistan", y= 20.4 },
             new AxisLabelData { x= "Germany", y= 65.1 }, 
             new AxisLabelData { x= "Australia", y= 15.8 },
             new AxisLabelData { x= "Italy", y= 29.2 },
             new AxisLabelData { x= "United Kingdom", y= 44.6 },
             new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
             new AxisLabelData { x= "Russia", y= 40.8 },
             new AxisLabelData { x= "Mexico", y= 31 },
             new AxisLabelData { x= "Brazil", y= 75.9 },
             new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public double y1;
        }

Axis Labels Positioning

By default, the axis labels can be placed at outside the axis line and this also can be placed at inside the axis line using the labelPosition property.

razor
position.cs
@using Syncfusion.EJ2;
@section ControlsSection{

@Html.EJS().Chart("container").Series(series =>
   {
       series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
       .XName("x")
       .YName("y")
       .Marker(ViewBag.marker)
       .DataSource(ViewBag.dataSource)
       .Name("Germany").Add();
   }).PrimaryXAxis(px =>
    px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
    .MajorGridLines(ViewBag.majorGridLines)
    .IsIndexed(true)
    .LabelRotation(90)
    .Interval(1)
    .LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90)
       ).PrimaryYAxis(py => py.Maximum(120)
       .Minimum(0)
       .Interval(30)
       .MajorTickLines(ViewBag.majorTickLines)
       .LineStyle(ViewBag.lineStyle)
       ).Title("Fruits and Vegetables - Season").ChartArea(area => area.Border(ViewBag.ChartBorder))
       .LegendSettings(lg=>lg.Visible(false))
       .Load("load")       
       .Render()

<script>
        var load = function (args) {
            var selectedTheme = location.hash.split('/')[1];
            selectedTheme = selectedTheme ? selectedTheme : 'Material';
            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
            args.chart.width = ej.base.Browser.isDevice ? "100%" : "60%";
            args.chart.primaryXAxis.border = { type: "Rectangle", width: 1 };
            args.chart.primaryXAxis.multiLevelLabels = (ej.base.Browser.isDevice ? ([
                {
                    border: { type: 'Rectangle' },
                    categories: [
                        { start: -0.5, end: 2.5, text: 'In Season', },
                        { start: 2.5, end: 5.5, text: 'Out of Season', },
                        { start: 5.5, end: 7.5, text: 'In Season', },
                        { start: 7.5, end: 9.5, text: 'Out of Season', },
                    ]
                }, {
                    border: { type: 'Rectangle' },
                    textStyle: { fontWeight: 'Bold' },
                    categories: [
                        { start: -0.5, end: 5.5, text: 'Fruits', },
                        { start: 5.5, end: 9.5, text: 'Vegetables', },
                    ]
                }]) : [
                    {
                        border: { type: 'Rectangle' },
                        categories: [
                            { start: -0.5, end: 0.5, text: 'Seedless', },
                            { start: 0.5, end: 2.5, text: 'Seeded', },
                            { start: 2.5, end: 3.5, text: 'Seedless', },
                            { start: 3.5, end: 5.5, text: 'Seeded', },
                            { start: 5.5, end: 6.5, text: 'Seedless', },
                            { start: 6.5, end: 7.5, text: 'Seeded', },
                            { start: 7.5, end: 8.5, text: 'Seedless', },
                            { start: 8.5, end: 9.5, text: 'Seeded', }
                        ]
                    }, {
                        border: { type: 'Rectangle' },
                        categories: [
                            { start: -0.5, end: 2.5, text: 'In Season', },
                            { start: 2.5, end: 5.5, text: 'Out of Season', },
                            { start: 5.5, end: 7.5, text: 'In Season', },
                            { start: 7.5, end: 9.5, text: 'Out of Season', },
                        ]
                    }, {
                        border: { type: 'Rectangle' },
                        textStyle: { fontWeight: 'Bold' },
                        categories: [
                            { start: -0.5, end: 5.5, text: 'Fruits', },
                            { start: 5.5, end: 9.5, text: 'Vegetables', },
                        ]
                    }])

        };
    </script>
}
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
             new AxisLabelData { x= "South Korea", y= 39.4 },
             new AxisLabelData { x= "India", y= 61.3 }, 
             new AxisLabelData { x= "Pakistan", y= 20.4 },
             new AxisLabelData { x= "Germany", y= 65.1 }, 
             new AxisLabelData { x= "Australia", y= 15.8 },
             new AxisLabelData { x= "Italy", y= 29.2 },
             new AxisLabelData { x= "United Kingdom", y= 44.6 },
             new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
             new AxisLabelData { x= "Russia", y= 40.8 },
             new AxisLabelData { x= "Mexico", y= 31 },
             new AxisLabelData { x= "Brazil", y= 75.9 },
             new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public double y1;
        }

Multilevel Labels

Any number of levels of labels can be added to an axis using the multiLevelLabels property. This property can be configured using the following properties:

• Categories • Overflow • Alignment • Text style • Border

Categories

Using the categories property, you can configure the start, end, text, and maximumTextWidth of multilevel labels.

razor
category.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
           


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "United States", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Overflow

Using the overflow property, you can trim or wrap the multilevel labels.

razor
overflow.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").Marker(ViewBag.marker).YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue1").Marker(ViewBag.marker).DataSource(ViewBag.dataSource).Name("England").Add();


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).MajorGridLines(ViewBag.majorGridLines).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle).Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "United States", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Alignment

The alignment property provides option to position the multilevel labels at far, center, or near.

razor
alignement.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").Marker(ViewBag.marker).YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue1").Marker(ViewBag.marker).DataSource(ViewBag.dataSource).Name("England").Add();


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).MajorGridLines(ViewBag.majorGridLines).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle).Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "United States", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Text customization

The textStyle property of multilevel labels provides options to customize the size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment and textOverflow.

razor
text-custom.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").Marker(ViewBag.marker).YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue1").Marker(ViewBag.marker).DataSource(ViewBag.dataSource).Name("England").Add();


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).MajorGridLines(ViewBag.majorGridLines).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle).Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "United States", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "Sweden", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Border customization

Using the border property, you can customize the width, color, and type. The type of border are Rectangle, Brace, WithoutBorder, WithoutTopBorder, WithoutTopandBottomBorder and CurlyBrace.

razor
border-custom.cs
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").Marker(ViewBag.marker).YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue1").Marker(ViewBag.marker).DataSource(ViewBag.dataSource).Name("England").Add();


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).MajorGridLines(ViewBag.majorGridLines).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle).Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Chart;

namespace EJ2MVCSampleBrowser.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        // GET: MultiLevelLabels
        public ActionResult MultiLevelLabels()
        {
            List<MultiLevelLabelsData> chartData = new List<MultiLevelLabelsData>
            {
                new MultiLevelLabelsData { x = "Grapes",  y = 28 },
                new MultiLevelLabelsData { x = "Apples",  y = 87 },
                new MultiLevelLabelsData { x = "Pears",   y = 42 },
                new MultiLevelLabelsData { x = "Grapes",  y = 13 },
                new MultiLevelLabelsData { x = "Apples",  y = 13 },
                new MultiLevelLabelsData { x = "Pears",   y = 10 },
                new MultiLevelLabelsData { x = "Tomato",  y = 31 },
                new MultiLevelLabelsData { x = "Potato",  y = 96 },
                new MultiLevelLabelsData { x = "Cucumber",y = 41 },
                new MultiLevelLabelsData { x = "Onion",   y = 59 }
             };
            ViewBag.dataSource = chartData;                   
            return View();
        }
        public class MultiLevelLabelsData
        {
            public string x;
            public double y;
        }
    }
}

Edge Label Placement

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

razor
edge.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")           
           .YName("yValue")
           .DataSource(ViewBag.dataSource)
           .Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")
           .YName("yValue1")
           .DataSource(ViewBag.dataSource)
           .Name("England").Add();
       }).PrimaryXAxis( px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
           .MajorGridLines(ViewBag.majorGridLines)
           .MajorGridLines(ViewBag.majorGridLines)
           .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
           .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Hide)
           .LabelFormat("y")
       ).PrimaryYAxis(py => 
            py.LabelFormat("{value}%")
            .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
            .MajorTickLines(ViewBag.majorTickLines)
            .MinorTickLines(ViewBag.minorTickLines)
            .LineStyle(ViewBag.lineStyle)
            .Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Render()
}
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "Russia", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "United States", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Labels Customization

The labelStyle property of an axis provides options to customize the colorfont-familyfont-size and font-weight of the axis labels.

razor
labels-custom.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")           
           .YName("yValue")
           .DataSource(ViewBag.dataSource)
           .Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")
           .YName("yValue1")
           .DataSource(ViewBag.dataSource)
           .Name("England").Add();
       }).PrimaryXAxis( px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
           .MajorGridLines(ViewBag.majorGridLines)
           .MajorGridLines(ViewBag.majorGridLines)
           .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
           .LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hides)
           .LabelFormat("y").
           .LabelStyle("ViewBag.label")
       ).PrimaryYAxis(py => 
            py.LabelFormat("{value}%")
            .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
            .MajorTickLines(ViewBag.majorTickLines)
            .MinorTickLines(ViewBag.minorTickLines)
            .LineStyle(ViewBag.lineStyle)
            .Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").Render()
}
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "Russia", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "United States", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Customizing Specific Point

You can customize the specific text in the axis labels using axisLabelRender event.

razor
custom-point.cs
@using Syncfusion.EJ2;
@section ControlsSection{
    @Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")           
           .YName("yValue")
           .DataSource(ViewBag.dataSource)
           .Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
           .Width(2)
           .XName("xValue")
           .YName("yValue1")
           .DataSource(ViewBag.dataSource)
           .Name("England").Add();
       }).PrimaryXAxis( px => 
            px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
           .MajorGridLines(ViewBag.majorGridLines)
           .MajorGridLines(ViewBag.majorGridLines)
           .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
           .LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Hides)
           .LabelFormat("y")
       ).PrimaryYAxis(py => 
            py.LabelFormat("{value}%")
            .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
            .MajorTickLines(ViewBag.majorTickLines)
            .MinorTickLines(ViewBag.minorTickLines)
            .LineStyle(ViewBag.lineStyle)
            .Interval(20).Minimum(0).Maximum(100)
       ).Title("Inflation - Consumer Price").AxisLabelRender("axisLabel").Render()

       <script>
       function axislabel(args) {
           if(args.text === 'France') {
            args.labelStyle.color = 'Red';
        }
       }
       </script>
}
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "Russia", gold=50  },
                new ColumnChartData{ country="China", gold=40 },
                new ColumnChartData{ country= "Japan", gold=70 },
                new ColumnChartData{ country= "Australia", gold=60},
                new ColumnChartData{ country= "France", gold=50 },
                new ColumnChartData{ country= "Germany", gold=40 },
                new ColumnChartData{ country= "Italy", gold=40 },
                new ColumnChartData{ country= "United States", gold=30 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
        }

Trim using maximum label width

You can trim the label using enableTrim property and width of the labels can also be customized using maximumLabelWidth property in the axis, the value maximum label width is 34 by default.