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

Overlapping of label

1 Answer 164 Views

Chart (HTML5)

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

1 Answer, 1 is accepted

answered on 15 Aug 2018, 12:01 PM

Hi Abhisek,

The easiest way to handle the appearance of the labels is to set their position:

<telerik:RadHtmlChart runat="server" ID="chrContractInfo" Width="500" Height="320">

<PlotArea>

<Appearance>

<TextStyle Margin="0 0 0 0" />

</Appearance>

<Series>

<telerik:ColumnSeries Name="" Gap=".5" Stacked="true">

<Appearance></Appearance>

<LabelsAppearance DataFormatString="{0:N0}" Position="InsideEnd">

<TextStyle FontSize="18px" Bold="true" />

</LabelsAppearance>

<TooltipsAppearance DataFormatString="{0:N0}" Color="White"></TooltipsAppearance>

<SeriesItems>

<telerik:CategorySeriesItem Y="88" />

<telerik:CategorySeriesItem Y="5" />

<telerik:CategorySeriesItem Y="10" />

</SeriesItems>

</telerik:ColumnSeries>

<telerik:ColumnSeries Name="" Gap=".5">

<appearance></appearance>

<labelsappearance dataformatstring="{0:N0}" position="OutsideEnd">

<TextStyle FontSize="18px" Bold="true" />

</labelsappearance>

<tooltipsappearance dataformatstring="{0:N0}" color="White"></tooltipsappearance>

<seriesitems>

<telerik:CategorySeriesItem Y="90" BackgroundColor="#b20924" />

<telerik:CategorySeriesItem Y="20" BackgroundColor="#0857c3" />

<telerik:CategorySeriesItem Y="5" BackgroundColor="#890916" />

</seriesitems>

</telerik:ColumnSeries>

</Series>

Another option to handle the appearance of the series labels and implement your own logic for their position by utilizing the charts Labels Visual Template functionality. Currently, this functionality is not directly exposed through the RadHtmlChart, but you can set it through the Kendo chart widget:
https://dojo.telerik.com/aWuwoYad

Regards,
Vessy
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.