Numeric Axis
28 Feb 202224 minutes to read
You can use numeric Axis to represent numeric values of data in chart. By default, the ValueType of an axis is Double.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Range
Range for an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using Minimum, Maximum and Interval property of the axis.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Range Padding
Padding can be applied to the minimum and maximum extremes of the axis range by using the RangePadding property. Numeric axis supports following types of padding.
- None
- Round
- Additional
- Normal
- Auto
Numeric - None
When the RangePadding is set to None, minimum and maximum of an axis is based on the data.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Numeric - Round
When the RangePadding is set to Round, minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Round)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Numeric - Additional
When the RangePadding is set to Additional, interval of an axis will be padded to the minimum and maximum of the axis.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Numeric - Normal
When the RangePadding is set to Normal, padding is applied to the axis based on default range calculation.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Normal)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Numeric - Auto
When the RangePadding is set to Auto,horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation.
@Html.EJS().Charts("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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Auto)
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}Label Format
Numeric Label Format
Numeric labels can be formatted by using the LabelFormat property. Numeric labels supports all globalize format.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional).LabelFormat("n1")
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}The following table describes the result of applying some commonly used label formats on numeric values.
| Label Value | Label Format property value | Result | Description |
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
GroupingSeparator
To separate groups of thousands, use UseGroupingSeparator property in chart.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Width(2).XName("x").YName("y").DataSource(ViewBag.dataSource).Name("Germany").Add();
}).Title("Inflation - Consumer Price").UseGroupingSeparator(true).Render()public ActionResult Index()
{
List<ColumnChartData> chartData = new List<ColumnChartData>
{
new ColumnChartData{ x= "USA", y=50 },
new ColumnChartData{ x="China", y=40 },
new ColumnChartData{ x= "Japan", y=70 },
new ColumnChartData{ x= "Australia", y=60},
new ColumnChartData{ x= "France", y=50 },
new ColumnChartData{ x= "Germany", y=40 },
new ColumnChartData{ x= "Italy", y=40 },
new ColumnChartData{ x= "Sweden", y=30 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ColumnChartData
{
public string x;
public double y;
}Custom Label Format
Axis also supports custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 20°C.
@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.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional).LabelFormat("{value}K")
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = 10, yValue = 21, yValue1 = 28 },
new ChartData { xValue = 20, yValue = 24, yValue1 = 44 },
new ChartData { xValue = 30, yValue = 36, yValue1 = 48 },
new ChartData { xValue = 40, yValue = 38, yValue1 = 50 },
new ChartData { xValue = 50, yValue = 54, yValue1 = 66 },
new ChartData { xValue = 60, yValue = 57, yValue1 = 78 },
new ChartData { xValue = 70, yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double xValue;
public double yValue;
public double yValue1;
}