Align Additional Y Axis

[David]

One of YAxis has negative value that throwing other out of balance

I attached current and desired pictures

Ideas?

[Vessy]

Hi David,

The main purpose of the additional YAxes is to be independent of the default one, so in order to align them you will need to configure the additional Axis Min/Max value manually.

For example:

                <YAxis Color="Orange" Width="3" MinValue="-4" MaxValue="14" Step="2">
                </YAxis>
                <AdditionalYAxes>
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3" MinValue="-30" MaxValue="107" Step="15">
                    </telerik:AxisY>
                </AdditionalYAxes>

Regards,
Vessy
Progress Telerik

[David]

It works!!!

Thank you

[David]

Hi Vessy,

  I am having a bit of trouble to centralize the points for other numbers.

  How did you come up with MinValue="-30" MaxValue="107" Step="15"?

  Can you help me to understand to please?

 

Thank you

David

[Vessy]

Hi David,

I am afraid that there is not a formula for choosing the values - they have to be chosen by you. When I was picking the value sin my sample, I just tried several ones (starting from -35-115) and changed them in order to position the 0 label of the second axis over the X axis. The max value is 107 as 105 moved the point below, 110 moved it over the axis, so I needed a value between them. 

Regards,
Vessy
Progress Telerik

[David]

:(

Thank you

[Vessy]

Hi David,

If you are still facing problems with the choosing the proper min and max values, you can send me the setup of the chart with some sample data and/or some images and I could help you.

Regards,
Vessy
Progress Telerik

[David]

I appreciate it Vessy, but data is dynamic.

So, i really need some way to figure out numbers on the fly

[Vessy]

Hi David,

I am really sorry, David, but the HtmlChart does not provide such logic out-of-the-box that I can offer you. A possible option that comes to my mind is to take the minimum and maximum value of the series using the second axis and set the min and max values depending on it using predefined ranges.

Something like

if (minValue>-30 && maxValue<105) => set secondAxis's MinValue to -30 and max to 107

else if (minValue>-75 && maxValue<260) => set secondAxis's MinValue to -75 and max to 260

etc.

Unfortunately, such approach would be applicable only if you know the approximate ranges of the dynamic series values.

Regards,
Vessy
Progress Telerik

[David]

Hi Vessy,

   Thank you for digging into this issue!

    I do know exact range for both series, however i still confused.

    Let say i have -110 to 55 for one range and 5 to 4500 for another.

    I am fine to implement some kind if/else solution with multiple entries, but not entirely sure how to assign Min/Max values to land correctly for specific ranges. Meaning, something like that...

    If (minValue>-130 && maxValue<500)  then

          AdditionalAxis,MinValue = ?

          AdditionalAxis.MaxValue=?

    end if

Thank you

David

[Vessy]

Hi David,

If you want to show the 0 label, you will need to choose a min value which both includes the minimum allowed value (-130) and is dividable by the set step. For example, it could be -150, with a step set to 50.

if you configure the additional axis with the following setup

                <AdditionalYAxes>
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3" MinValue="-150" MaxValue="500" Step="50">
                    </telerik:AxisY>
                </AdditionalYAxes>

You will see that the 0 point of the additional axis will be rendered a bit above the XAxis:

Increasing the Maximum value of the additional axis will allow you to move the 0 point down, let's try with 550:

                <AdditionalYAxes>
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3" MinValue="-150" MaxValue="550" Step="50">
                    </telerik:AxisY>
                </AdditionalYAxes>

The result of setting the max value to 550, though, will move the additional axis 0 point below the xAxis 0 point, meaning that this value is too big.:

Decreasing the maximum value to 540 also is not enough, but setting it to 530 will match the 0 points of both axis:

                <AdditionalYAxes>
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3" MinValue="-150" MaxValue="530" Step="50">
                    </telerik:AxisY>
                </AdditionalYAxes>

I hope that this explanation will shed some light on the way I chose the min and max values and will help you to do that for the other ranges.

Regards,
Vessy
Progress Telerik

[David]

That is very helpful

Thank you Vessy

[Vessy]

Hi,

You are welcome, David :) I am glad to hear that.

Regards,
Vessy
Progress Telerik

[David]

Hi Vessy,

I found additional solution if anybody struggles with the same.

 Create series with empty name and transparent color and add min/max values of standard axis series times difference coefficient. Hopefully that clear and helpful.

  <telerik:LineSeries Name="" AxisName="AdditionalAxis">
       <Appearance>
                 <FillStyle BackgroundColor="Transparent"></FillStyle>
       </Appearance>
       <LabelsAppearance Visible="false"/>              
   </telerik:LineSeries>

[Vessy]

Hi,

Thanks a lot for sharing your solution with the community, David! I am glad you managed to find a more straight-forward way to achieve your goal :)

Regards,
Vessy
Progress Telerik