Aligning Zero with Multiple Axes in the Chart
Environment
| Product | Telerik UI for ASP.NET Core Chart |
| Progress Telerik UI for ASP.NET Core version | Created with the 2022.3.1109 version |
Description
I have a Telerik UI for ASP.NET Core Chart with multiple axes. One has negative values and the other does not. How can I configure the zero on the two axes to be aligned and how can I show the negative values on one axis as well?
Solution
- Update both the
.Min()and.Max()configuration methods for the value axes so they include both positive and negative values. - To handle the zero values within a particular value axis, pass a function along with the current value as an argument through the
.Template()configuration option for its labels. - Within the function, make an assertion for any negative values with the help of the function's argument. Based on the evaluation, either return an empty result or that of the value.
@(Html.Kendo().Chart(Model)
.Name("chart")
.Title("Hybrid car mileage report")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.Series(series =>
{
series
.Column(model => model.Value, categoryExpression: model => model.Date)
.Labels(l => l.Visible(true));
series
.Line(new double[] { -7.8, 6.2, 5.9, 7.4, 5.6})
.Name("l/100 km")
.Color("#4e4141")
.Axis("l100km");
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
// Align the first two value axes to the left
// and the last two to the right.
//
// Right alignment is done by specifying a
// crossing value greater than or equal to
// the number of categories.
.AxisCrossingValue(0, 0, 15,15)
)
.ValueAxis(axis => axis
.Numeric()
.Max(3)
.Min(-3)
.Labels(l => l.Template("#=onlyPositive(data)#"))
.Line(line => line.Visible(true))
)
.ValueAxis(axis => axis
.Numeric()
.Min(-10)
.Max(10)
.MajorUnit(1)
.Labels(l => l.Template("#=onlyPositive(data)#"))
.Line(line => line.Visible(true))
)
.ValueAxis(axis => axis
.Numeric()
.Min(-60)
.Max(60)
.Labels(l => l.Template("#=onlyPositive(data)#"))
.Line(line => line.Visible(true))
)
.ValueAxis(axis => axis
.Numeric("l100km")
.Line(line => line.Visible(true))
)
)
<script>
function onlyPositive(e) {
console.log(e.value);
if (e.value < 0) {
return '';
}
return e.value;
}
</script>
For the complete implementation of the suggested approach, refer to the Telerik REPL example on aligning zero values with multiple axes within the ASP.NET Core Chart.