How do you set the Axis Crossing Value for multiple y-axis?

[Chris]

Hi, I'm having an issue with kendo charts. Basically I need to get both the cost and consumption y-axes on the chart to cross the category axis at 0. Kendo has .AxisCrossingValue() which looks like its supposed to fix this issue by setting the value however it doesn't seem to work when there is more than one y axis on a graph.

 

Here is the code im using:

@(Html.Kendo().Chart<PlotPoint>()

    .Name("InvoiceChart")

    .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))

    .ChartArea(chartArea => chartArea.Background("transparent"))

    .PlotArea(pa => pa.Background("#FFFFFF"))

    .AutoBind(false)

    .SeriesDefaults(x => x.Column().Labels(y => y.Visible(true).Format("{0:N0}").Background("transparent").Position(ChartBarLabelsPosition.InsideEnd).Rotation(90)))

    .ValueAxis(axis => axis.Numeric().Name("cons").Title("Consumption").Labels(labels => labels.Format("{0:N0}")).AxisCrossingValue(0))

    .ValueAxis(axis => axis.Numeric().Name("cost").Title("Cost £").Labels(labels => labels.Format("{0:N0}")).AxisCrossingValue(0))

    .HtmlAttributes(new { style = "height:480px;" })

    .CategoryAxis(axis => axis.Labels(x => x.Rotation(-45)).AxisCrossingValue(0, 1000))

    .Events(x => x.LegendItemClick("OnChartLegendClickToHideShowSeriesData")))

 

And here is what the graph looks like when there are negative y axis values:

Any help would be greatly appreciated.

Thanks

 

[Eyup]

Hi Chris,

 

Thank you for reaching out.

I am having difficulty to figure out exactly what you are looking for. Can you send me a snapshot or drawing demonstrating the desired final result? Or create a REPL sample and send me the URL for demonstration?
https://netcorerepl.telerik.com/GJkolWbI06RdJAfx19

I will then be able to forward this requirement to our Dev Team for deeper technical insight whether this requirement is possible or not.

 

Regards,
Eyup
Progress Telerik

[Chris]

Hi, I hope this drawing makes it a bit clearer. Currently the 0 points on both y-axes do not align on either end of the x-axis when there are negative y-axis values present. What I need is for the 0 points to align.

[Anton Mironov]

Hi Chris,

Thank you for the images and the details provided.

In order to achieve the desired behavior, you’ll need to manually set AxisCrossingValue() on each Y-axis using the same category axis value, and also align their min/max ranges to ensure their zero point is in the same relative position.

I would recommend using the Min and Max configurations:

    .ValueAxis(axis =>
    {
        axis.Numeric()
            .Name("cons")
            .Title("Consumption")
            .Labels(labels => labels.Format("{0:N0}"))
            .Min(-200).Max(200) 
            .AxisCrossingValue(0); 
    })
    .ValueAxis(axis =>
    {
        axis.Numeric()
            .Name("cost")
            .Title("Cost £")
            .Labels(labels => labels.Format("{0:N0}"))
            .Min(-500).Max(500) 
            .AxisCrossingValue(0); 
    })

Give a try to the approach above and let me know if it achieves the desired result.

Kind Regards,
Anton Mironov

 

[Chris]

Hi,

This makes sense but the problem with this approach in this context is that we don't know what the min and max values are going to be. I think we could come up with a method to generate a rounded min and max value based on the incoming data but I thought there could be a simpler solution that I wasn't seeing. Either way this is helpful.

Thanks