Skip to content

Latest commit

 

History

History
143 lines (120 loc) · 6.14 KB

chart-align-zero-multiple-axes.md

File metadata and controls

143 lines (120 loc) · 6.14 KB
title page_title description type slug tags component res_type
Aligning Zero with Multiple Axes in the Chart
Aligning Zero with Multiple Axes in the Chart
An example on how to align the zero value for multiple value axes in the {{ site.product }} Chart.
how-to
chart-align-zero-multiple-axes
telerik, chart, align, zero, multiple, axes, value
chart
kb

Environment

Product {{ site.product }} Chart
Progress {{ site.product }} version Created with the 2022.3.1109 version

Description

I have a {{ site.product }} 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

{% if site.core %}

  1. Update both the .Min() and .Max() configuration methods for the value axes so they include both positive and negative values.
  2. 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.
  3. 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. {% else %}
  4. Update both the .Min() and .Max() configuration methods for the value axes so they include both positive and negative values.
  5. 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.
  6. 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. {% endif %}
    @(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 {{ site.framework }} Chart.

More {{ site.framework }} Chart Resources

  • [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})

  • [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)

{% if site.core %}

{% else %}

See Also