ASP.NET Core Category Axis
12 Apr 202413 minutes to read
Category axis are used to represent, the string values instead of numbers.
To quickly get started with Syncfusion ASP.NET Core Category Axis, you can check out this video:
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
size="size"></e-series>
</e-series-collection>
</ejs-chart>
//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.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category" labelPlacement="OnTicks"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
size="size"></e-series>
</e-series-collection>
</ejs-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;
}
Range
Range of the category axis can be customized using minimum
, maximum
and interval
property of the axis.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category" interval="2" minimum="1" maximum="5"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"
size="size"></e-series>
</e-series-collection>
</ejs-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;
}
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.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category" isIndexed="true"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
<e-series dataSource="ViewBag.dataSource1" xName="x" yName="y" name="Aus" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>
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;
}