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

Diverging Bar Chart?

3 Answers 107 Views

Chart (HTML5)

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

3 Answers, 1 is accepted

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>

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/.