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

Possibility of setting y-axis orientation in RadHTMLChart

2 Answers 171 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
sri harsha
Top achievements
Rank 1
sri harsha asked on 04 Sep 2018, 07:27 AM

Dear Team,

I am working on some charts where some of them have more than 3 or 4 y-axis. The requirement is to set 2 y-axis on left side and remaining on right side.

Basically, we are trying to enable the user to customize their own chart where they can set orientation for each y-axis and save the option in back-end. I have tried with axis crossing points but it is pushing all additional y-axis to the right side. 

Any example / guidance is appreciated. 

2 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 05 Sep 2018, 11:20 AM
Hello,

You need to use the AxisCrossingPoints collection of the x-axis and put the items in it in the order that you have the y-axes, like shown in this article: https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/axes/multiple-y-axes. You can see how this is done with sliders in the following demo: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/multipleyaxes/defaultcs.aspx.

Note that this when using categories you will use natural numbers (0, n) where n is the number of categories you have in the chart data. If you use a numerical x-axis (like with a scatter chart or a bubble chart), the crossing point is the numerical value of the axis, not the category index. So, if you have negative values

Here is an example:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Total cases">
                <Appearance>
                    <FillStyle BackgroundColor="Green" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1000" />
                    <telerik:CategorySeriesItem Y="2000" />
                    <telerik:CategorySeriesItem Y="2500" />
                    <telerik:CategorySeriesItem Y="1750" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries AxisName="AdditionalAxis" Name="Outstanding Cases">
                <Appearance>
                    <FillStyle BackgroundColor="Red" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="200" />
                    <telerik:CategorySeriesItem Y="230" />
                    <telerik:CategorySeriesItem Y="170" />
                    <telerik:CategorySeriesItem Y="190" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries AxisName="ThirdAxis" Name="Third Series">
                <Appearance>
                    <FillStyle BackgroundColor="Blue" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="200" />
                    <telerik:CategorySeriesItem Y="230" />
                    <telerik:CategorySeriesItem Y="170" />
                    <telerik:CategorySeriesItem Y="190" />
                </SeriesItems>
            </telerik:ColumnSeries>
            <telerik:ColumnSeries AxisName="FourthAxis" Name="Fourth Series">
                <Appearance>
                    <FillStyle BackgroundColor="Yellow" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="200" />
                    <telerik:CategorySeriesItem Y="230" />
                    <telerik:CategorySeriesItem Y="170" />
                    <telerik:CategorySeriesItem Y="190" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <YAxis Color="Green" Width="3">
        </YAxis>
        <AdditionalYAxes>
            <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3">
            </telerik:AxisY>
            <telerik:AxisY Name="ThirdAxis" Color="Blue" Width="3">
            </telerik:AxisY>
            <telerik:AxisY Name="FourthAxis" Color="Yellow" Width="3">
            </telerik:AxisY>
        </AdditionalYAxes>
        <XAxis>
            <AxisCrossingPoints>
                <telerik:AxisCrossingPoint Value="0" />
                <telerik:AxisCrossingPoint Value="0" />
                <telerik:AxisCrossingPoint Value="4" />
                <telerik:AxisCrossingPoint Value="4" />
            </AxisCrossingPoints>
            <LabelsAppearance DataFormatString="Quarter {0}" />
            <Items>
                <telerik:AxisItem LabelText="1" />
                <telerik:AxisItem LabelText="2" />
                <telerik:AxisItem LabelText="3" />
                <telerik:AxisItem LabelText="4" />
            </Items>
        </XAxis>
    </PlotArea>
    <Legend>
        <Appearance Position="Top" />
    </Legend>
</telerik:RadHtmlChart>


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
sri harsha
Top achievements
Rank 1
answered on 05 Sep 2018, 11:42 AM
Thanks a lot Marin. 
Tags
Chart (HTML5)
Asked by
sri harsha
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
sri harsha
Top achievements
Rank 1
Share this question
or