Radchart - Y axis impossible to customized as wished

Thread is closed for posting
6 posts, 0 answers
  1. Greg
    Greg avatar
    17 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    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.
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 04 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Greg
    Greg avatar
    17 posts
    Member since:
    Oct 2013

    Posted 05 Nov 2013 Link to this post

    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
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 06 Nov 2013 Link to this post

    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.
  6. Greg
    Greg avatar
    17 posts
    Member since:
    Oct 2013

    Posted 06 Nov 2013 Link to this post

    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
  7. Greg
    Greg avatar
    17 posts
    Member since:
    Oct 2013

    Posted 07 Nov 2013 Link to this post

    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 ;
        }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017