Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Diverging Bar Chart?

3 Answers 75 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 2
Joel asked on 26 Aug 2020, 05:16 PM

With radhtmlchart, is it possible to do a diverging bar chart similar to this?

https://www.ryansleeper.com/wp-content/uploads/2018/05/Wins-Per-Conference-Per-Season-Diverging-Bar-Chart-Tableau-with-Labels.png

If so, is there an example I can follow?

3 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 2
answered on 26 Aug 2020, 05:58 PM

I have most of it figured out. Is it possible to move the x axis labels (NA, Europe) so they are centered on y0 in this example, and display above the bar instead of inside the bar?

 

<telerik:RadHtmlChart runat="server" PlotArea-YAxis-MinorGridLines-Visible="false" PlotArea-XAxis-MinorGridLines-Visible="false" ID="BarChart" Height="400px" Width="500px">
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <XAxis>
                        <Items>
                            <telerik:AxisItem LabelText="North America"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Europe"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Asia"></telerik:AxisItem>
                        </Items>
                    </XAxis>
                    <Series>
                        <telerik:BarSeries StackType="Stack100" Stacked="true">
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="-25"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="-12"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="-39"></telerik:CategorySeriesItem>
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                            <LabelsAppearance DataFormatString="#,##0;#,##0"></LabelsAppearance>
                        </telerik:BarSeries>
                        <telerik:BarSeries Stacked="true" StackType="Stack100">
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="38"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:BarSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>
0
Joel
Top achievements
Rank 2
answered on 26 Aug 2020, 06:15 PM
above.png
Like this
0
Vessy
Telerik team
answered on 31 Aug 2020, 03:59 PM

Hi Joel,

You can control the position of the XAxis labels by configuring their Margin/Padding values:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/labels-and-titles-font-settings#setting-text-styles-for-titles-and-labels

Unfortunately, if you set a negative right padding to the labels, they will be not centered, but just moved to the right:

        <telerik:RadHtmlChart runat="server" PlotArea-YAxis-MinorGridLines-Visible="false" PlotArea-XAxis-MinorGridLines-Visible="false" ID="BarChart" Height="400px" Width="500px">
            <Legend>
                <Appearance Visible="false">
                </Appearance>
            </Legend>
            <PlotArea>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="North America"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Europe"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Asia"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance Position="OnAxis">
                        <TextStyle Margin="0 0 70 0" Padding="0 -50 0 0" />
                    </LabelsAppearance>
                </XAxis>
                <Series>
                    <telerik:BarSeries StackType="Stack100" Stacked="true">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="-25"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="-12"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="-39"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                        <LabelsAppearance DataFormatString="#,##0;#,##0">
                        </LabelsAppearance>
                    </telerik:BarSeries>
                    <telerik:BarSeries Stacked="true" StackType="Stack100">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="38"></telerik:CategorySeriesItem>
                            <telerik:CategorySeriesItem Y="11"></telerik:CategorySeriesItem>
                        </SeriesItems>
                        <TooltipsAppearance Color="White" />
                    </telerik:BarSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

The other option, as the chart does not offer a built-in align-over-the-axis functionality, is to implement a custom labels Visual template and position the labels in the desired places using the Kendo UI Drawing API.

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart (HTML5)
Asked by
Joel
Top achievements
Rank 2
Answers by
Joel
Top achievements
Rank 2
Vessy
Telerik team
Share this question
or