Radchart - Y axis impossible to customized as wished

[Greg]

Hello,

I am working on this telerik radchart and I am having some issues to customize the Y axis. I would like to set the scale manually from 0 to 110% of biggest value.
So I have

radchart.PlotArea.YAxis.AutoScale = false;<br>radchart.PlotArea.YAxis.MinValue = 0;<br>radchart.PlotArea.YAxis.MaxValue = (int) ((double)_maxAmount * 1.1);<br>radchart.PlotArea.YAxis.Step = 500;

        
The result is that my Y labels values don't match the major tick (see attached picture).

Could you please tell me what is not going right?
Thank you.

[Stamo Gochev]

Hello Greg,

The described behavior is expected and it is due to chart's configuration (mainly the Step property). What I could suggest you as a workaround is use the following YAxis' settings:

<YAxis AutoScale="true" MinValue="0" MaxValue="110" Step="20" AxisMode="Extended"></YAxis>

Applying AxisMode="Extended" should solve the problem with the incorrect labels' positioning. If this doesn't work for you, then the only possible improvement seems to be the change of the Step property (applying lower or higher value), so that the YAxi's labels looks in a somewhat acceptable way.

I also attach a sample page where you can test my suggestion.

Regards,
Stamo Gochev
Telerik

[Greg]

Hello Stamo,

Thank you for your answer. Axis mode extended worked but extended to much my axis. It seems that it is extended by one more step. That would be perfect in my case. However, setting this value, it seems that the step parameter is now ignored, as well as the max value.

Here is as an example my code and attached the result. The step seems to be 1000 on the graph.

        rcMaturity.PlotArea.YAxis.AutoScale = true;
        rcMaturity.PlotArea.YAxis.MinValue = 0;
        rcMaturity.PlotArea.YAxis.MaxValue = (int) _maxAmount ; //3767 in this graph
        rcMaturity.PlotArea.YAxis.AxisMode = Telerik.Charting.ChartYAxisMode.Extended;
        rcMaturity.PlotArea.YAxis.Step = 500;

I could deal with something like a maximum value of Y axis of (the next step after the highest value) + 1 step if the step parameter was 500 on this graph.
I also tried crazy values such a 10 or 5000 for the step but no changes.

Thank you for your help
Grégory

[Danail Vasilev]

Hi Greg,

You can either set the AutoScale property of the YAxis to "true" and leave the  AxisMode to "Normal" - the default value. For example:

<telerik:RadChart runat="server" ID="RadChart1">
    <Series>
        <telerik:ChartSeries Type="Bar">
            <Items>
                <telerik:ChartSeriesItem YValue="3700"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="50"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="10"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="100"></telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <YAxis AutoScale="true">
        </YAxis>
    </PlotArea>
</telerik:RadChart>

Or auto adjust the scale of the YAxis by setting the AutoScale property of the YAxis to "false" and set appropriate values for the MinValue, MaxValue and Step properties. For example:

<telerik:RadChart runat="server" ID="Chart">
    <Series>
        <telerik:ChartSeries Type="Bar">
            <Items>
                <telerik:ChartSeriesItem YValue="3700"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="50"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="10"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="100"></telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <YAxis AutoScale="false" MinValue="0" MaxValue="4000" Step="500"></YAxis>
    </PlotArea>
</telerik:RadChart>

The above charts will render like this.

Note that you can try the newer RadHtmlChart control that renders entirely on the client through SVG and JavaScript. More information about the pros and cons of both charts can be found in RadHtmlChart vs. RadChart, round 2. Which one is right for me? blog post from Marin Bratanov.

Regards,
Danail Vasilev
Telerik

[Greg]

Hello Danail,

Thank you for your help. Based on your second example (autoscale false), could you please try a maximum value of 4200 instead of 4000? In this case the Y axis becomes all disorganized. The ticks don't match the 500 step and a legend is displayed on the very top where there is no chart anymore. Attached the picture to show I mean.

I give a random value of 4200 because this will be a dynamic value of 110% of the highest value.

Thank you
Grégory

[Greg]

I finally dealt with my problem with an alternative solution. I put it online if someone needs it.

rcMaturity.PlotArea.YAxis.AutoScale = false;
rcMaturity.PlotArea.YAxis.MinValue = 0;
        rcMaturity.PlotArea.YAxis.MaxValue = getMaxYAxisValue(_max_value_of_the_serie);

and

private int getMaxYAxisValue(decimal maxValue)
    {
        int _val = (int)maxValue ;
        for (int i = 500; i <= 50000; i = i + 500)
        {
            if (((_val/ (i - 200)) < 1)
                return i ;
        }
        return _val ;
    }