Search results

Category Axis

Category axis are used to represent, the string values instead of numbers.

razor
column.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
}
//datasource for column chart
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 23 },
                new ColumnChartData { x= "AUS", yValue= 16 },
                new ColumnChartData { x= "IND", yValue= 36 },
                new ColumnChartData { x= "DEN", yValue= 12 },
                new ColumnChartData { x= "MEX", yValue= 20 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Labels Placement

By default, category labels are placed between the ticks in an axis, this can also be placed on ticks using labelPlacement property.

razor
placement.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .LabelPlacement(Syncfusion.EJ2.Charts.LabelPlacement.OnTicks)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 23 },
                new ColumnChartData { x= "AUS", yValue= 16 },
                new ColumnChartData { x= "IND", yValue= 36 },
                new ColumnChartData { x= "DEN", yValue= 12 },
                new ColumnChartData { x= "MEX", yValue= 20 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Range

Range of the category axis can be customized using minimum, maximum and interval property of the axis.

razor
range.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .Minimum(2)
   .Maximum(5).
   .Interval(2)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 23 },
                new ColumnChartData { x= "AUS", yValue= 16 },
                new ColumnChartData { x= "IND", yValue= 36 },
                new ColumnChartData { x= "DEN", yValue= 12 },
                new ColumnChartData { x= "MEX", yValue= 20 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Indexed category axis

Category axis also can be rendered based on the index values of data source. This can be achieved by defining the isIndexed property to true in the axis.

razor
index.cs
@using Syncfusion.EJ2;
@section ControlsSection{
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   .Add();

   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).   
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource1).
   Name("Silver").
   .Add();
   }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   .IsIndexed(true)).
   Title("Olympic Medal Counts - RIO").Render()
}
public ActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ x= "Myanmar", y= 7.3 },
                new ColumnChartData{ x= "India", y= 7.9 },
                new ColumnChartData{ x= "Bangladesh", y= 6.8 },
                new ColumnChartData{ x= "Cambodia", y=7.0 },
                new ColumnChartData{ x= "China", y= 6.9 }
            };
            ViewBag.dataSource = chartData;
            List<ColumnChartData> chartData1 = new List<ColumnChartData>
            {
            new ColumnChartData{ x= "Poland", y=2.7 },
            new ColumnChartData{ x= "Australia", y=2.5 },
            new ColumnChartData{ x= "Singapore", y=2.0 },
            new ColumnChartData{ x= "Canada", y=1.4 },
            new ColumnChartData{ x= "Germany", y=1.8 }
            };
            ViewBag.dataSource1 = chartData1;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double y;
        }