Contents
- Range
- Range padding
- Label format
- Grouping separator
- Custom label format
Having trouble getting help?
Contact Support
Contact Support
Numeric axis in ASP.NET MVC 3D Chart Component
9 Jan 202424 minutes to read
The Numeric Axis can be used to represent the numeric values of data in 3D chart. By default, the ValueType of an axis is Double.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Range
The range of an axis will be calculated automatically based on the provided data, and it can also be customized by using the Minimum, Maximum and Interval properties of the axis.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double).Minimum(1).Maximum(20).Interval(5)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Range padding
Padding can be applied to the minimum and maximum extremes of an axis range by using the RangePadding property. Numeric axis supports the following types of padding.
- None
- Round
- Additional
- Normal
- Auto
Numeric - None
When the RangePadding is set to None, minimum and maximum of the axis is based on the data.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
)
.PrimaryYAxis(py =>
py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Numeric - Round
When the RangePadding is set to Round, minimum and maximum will be rounded to the nearest possible value, which is 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().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
)
.PrimaryYAxis(py =>
py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Round)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Numeric - Additional
When the RangePadding is set to Additional, interval of an axis will be added to the minimum and maximum of the axis.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
)
.PrimaryYAxis(px =>
px.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Additional)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Numeric - Normal
When the RangePadding is set to Normal, padding is applied to the axis based on default range calculation.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
)
.PrimaryYAxis(py =>
py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Normal)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}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().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Auto)
)
.PrimaryYAxis(px =>
px.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.Auto)
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Label format
Numeric label format
Numeric labels can be formatted by using the LabelFormat property. Also, it supports all globalize format.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
ColumnSpacing(0.1).
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Double)
)
.PrimaryYAxis(py =>
py.LabelFormat("c")
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}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. |
Grouping separator
To separate the y-axis labels to groups of thousands, set the UseGroupingSeparator property to true in the 3D chart.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Add();
})
.UseGroupingSeparator(true)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 10, y= 7000 },
new ChartData { x= 20, y= 1000 },
new ChartData { x= 30, y= 12000 },
new ChartData { x= 40, y= 14000 },
new ChartData { x= 50, y= 11000 },
new ChartData { x= 60, y= 5000 },
new ChartData { x= 70, y= 7300 },
new ChartData { x= 80, y= 9000 },
new ChartData { x= 90, y= 12000 },
new ChartData { x= 100, y= 14000 },
new ChartData { x= 110, y= 11000 },
new ChartData { x= 120, y= 5000 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}Custom label format
The axis supports custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 20°C.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Add();
})
.PrimaryYAxis(py =>
py.LabelFormat("${value}K")
)
.Render())public ActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { x= 1, y= 7 },
new ChartData { x= 2, y= 1 },
new ChartData { x= 3, y= 1 },
new ChartData { x= 4, y= 14 },
new ChartData { x= 5, y= 1 },
new ChartData { x= 6, y= 10 },
new ChartData { x= 7, y= 8 },
new ChartData { x= 8, y= 6 },
new ChartData { x= 9, y= 10 },
new ChartData { x= 10, y= 10 },
new ChartData { x= 11, y= 16},
new ChartData { x= 12, y= 6 },
new ChartData { x= 13, y= 14 },
new ChartData { x= 14, y= 7 },
new ChartData { x= 15, y= 5 },
new ChartData { x= 16, y= 2 },
new ChartData { x= 17, y= 14 },
new ChartData { x= 18, y= 7 },
new ChartData { x= 19, y= 7 },
new ChartData { x= 20, y= 10 }
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public double x;
public double y;
}