How to rotate radhtml chart Xaxis value (vertical) ?

1 Answer 37 Views
Chart (HTML5)
M Kumar
Top achievements
Rank 1
Iron
Veteran
M Kumar asked on 25 Mar 2022, 09:45 AM
Hi,
  we are using radhtml chart, in that we bind Y axis, Y axis and color for each bars, in that we want to rotate the XAxis bar value horizontal to vertical, here i attach screenshot of current and what we want, is there any properties to change this? i am not asking for LabelsAppearance or legend text.

Note: Chart we create dynamically and bind data.


Thanks
M Kumar
Top achievements
Rank 1
Iron
Veteran
commented on 05 Apr 2022, 05:10 AM

Hi, Any solution for this ?

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 05 Apr 2022, 03:03 PM

Hi,

You can rotate the series labels by defining the ColumnSeries.LabelsAppearance.RotationAngle property like follows:

        <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Product 1">
                        <TooltipsAppearance BackgroundColor="Orange" DataFormatString="{0} sales" />
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15000" />
                            <telerik:CategorySeriesItem Y="23000" />
                            <telerik:CategorySeriesItem Y="10000" />
                            <telerik:CategorySeriesItem Y="16000" />
                        </SeriesItems>
                        <LabelsAppearance RotationAngle="-90"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    ...

 

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Chart (HTML5)
Asked by
M Kumar
Top achievements
Rank 1
Iron
Veteran
Answers by
Vessy
Telerik team
Share this question
or