This is a migrated thread and some comments may be shown as answers.

Radchart - Y axis impossible to customized as wished

5 Answers 184 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 30 Oct 2013, 06:29 PM
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.

5 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 04 Nov 2013, 11:00 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Greg
Top achievements
Rank 1
answered on 05 Nov 2013, 09:22 PM
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
0
Danail Vasilev
Telerik team
answered on 06 Nov 2013, 11:09 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Greg
Top achievements
Rank 1
answered on 06 Nov 2013, 03:06 PM
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
0
Greg
Top achievements
Rank 1
answered on 07 Nov 2013, 05:19 PM
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 ;
    }
Tags
Chart (Obsolete)
Asked by
Greg
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Greg
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or