Align 2 Y-Axes to share the same 0 Value line?

ChartView
Top achievements
Rank 1
Daniel asked on 24 Jun 2021, 08:12 AM

We have 2 axes in one chart (left axis for bar series, right axis for line series)

The bar values range from negative to positive, the line values are only positive.

How can we align those 2 Y-axes to share the same line for value 0?

I'll attach 2 pictures, one from the actual ChartView and one from a Excel Chart with aligned 0-Value axes.

-1
Martin Ivanov
Telerik team
answered on 28 Jun 2021, 10:22 AM

Hello Daniel,

The RadChartView numeric axes are auto-calculating their range based on the plotted data in such manner that all the data fits within the viewport.  To achieve your requirement, you can explicitly set the Minimum property of the corresponding axis to 0. For example:

`<telerik:LinearAxis Minimum="0" />`

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a \$50 Amazon gift voucher.

Daniel
Top achievements
Rank 1
commented on 28 Jun 2021, 11:16 AM

I think you missunderstood our request. Please look at the picture attached picture "Excel1" and the Y values. and the 0-value mark on those 2 Y axes. Both Y axes share the same 0-Value horizontal chart line. When setting Minimum value to 0 nothing changes. Y1 axes still goes from -5 Million to 40 Million and the 2nd line from the bottom is the 0-value line. on the Y2 axes value go from 0 to 25.000 and the 1st line from the bottom is the 0-value line. we want Y1 and Y2 axes to have the 0 value line to be the 2nd from the bottom.
Martin Ivanov
Telerik team
commented on 30 Jun 2021, 11:30 AM

In that case, you will need to ensure the same range is adjusted for both axes. To do so, you can set the Minimum, Maximum and MajorStep properties of both axes. I suggest this, because if you rely on the auto-range calculations of the axes, if the current data changes, the range can change and no longer match the range of the other axis.

By the same range for both axes, I mean that the relative space between the ticks should be the same. And to do so, probably the data range should also be similar. For example, in the Excel picture the left axis ranges between -5,000,000 and 30,000,000, and the right axis ranges between -500 and 3,000. This allows matching between the ticks since the numbers are relative to one another. In this case, steps of 5000 and 500 will produce the same ticks.

To achieve the same visualization in your case, you can try the following numbers. Note that those will probably differ based on the plotted data. So, the Minimum of the left axis can be set to -10,000,000 and the Maximum to 30,000,000 with a MajorStep of 10,000,000. The right axis' Minimum can be set to -10,000 and the Maximum to 30,000 with MajorStep of 10,000.

In any case, you will need to play with the Minimum, Maximum and MajorStep properties of the axes.

Tags
ChartView