Dynamic column/bar series labels position
Environment
| Product Version | 2018.3.910 |
| Product | RadHtmlChart for ASP.NET AJAX |
Description
When the labels of the bar/column series and shown inside the series might become truncated in case the valuen of the series item is too small. In this article you will see how to change the series.lables.visual in order to move the labels outside the series if there is not enough space for them inside the items.
Dynamic Labels for BarChart
Dynamic labels position calculated for BarSeries items.
Figure 1: Dynamic labels in BarChart:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Transitions="true" Width="600px" Height="300px">
<PlotArea>
<Series>
<telerik:BarSeries Name="Product 1" DataFieldY="valuesField">
<LabelsAppearance Visual="dynamicLabelsVisual" Position="InsideEnd" Visible="true" Color="White">
<TextStyle FontSize="20" />
</LabelsAppearance>
</telerik:BarSeries>
</Series>
<XAxis DataLabelsField="labelsField"></XAxis>
</PlotArea>
</telerik:RadHtmlChart>
<script>
function dynamicLabelsVisual(e) {
var original = e.createVisual();
var textBox = original.children[1];
var seriesItemWidth = e.rect.width();
var labelWidth = textBox.bbox().width() + 10;
var low = seriesItemWidth < labelWidth; // whether height of chart element is lower than the height of the label
if (seriesItemWidth >= labelWidth) {
return original
};
var y = textBox.position().y; //keep the same alignment of y
var x = e.rect.origin.x + seriesItemWidth + 10; //wide enough to fit the label
var layout = new kendo.drawing.Layout(e.rect);
var txt = new kendo.drawing.Text(e.text, [x, y], {
fill: { color: "#000" },
font: e.options.font
});
layout.append(txt);
return layout;
}
</script>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
}
private object GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("valuesField");
dt.Columns.Add("labelsField");
dt.Rows.Add(600.50, "Item 1");
dt.Rows.Add(200.50, "Item 2");
dt.Rows.Add(2850.50, "Item 3");
return dt;
}
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
RadHtmlChart1.DataSource = GetData()
RadHtmlChart1.DataBind()
End If
End Sub
Private Function GetData() As Object
Dim dt As DataTable = New DataTable()
dt.Columns.Add("valuesField")
dt.Columns.Add("labelsField")
dt.Rows.Add(600.5, "Item 1")
dt.Rows.Add(200.5, "Item 2")
dt.Rows.Add(2850.5, "Item 3")
Return dt
End Function
Dynamic Labels for ColumnChart
Dynamic labels position calculated for ColumnSeries items.
Figure 1: Dynamic labels in ColumnChart:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Transitions="true" Width="600px" Height="300px">
<PlotArea>
<Series>
<telerik:ColumnSeries Name="Product 1" DataFieldY="valuesField">
<LabelsAppearance Visual="dynamicLabelsVisual" Position="InsideEnd" Visible="true" Color="White">
<TextStyle FontSize="20" />
</LabelsAppearance>
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="labelsField"></XAxis>
</PlotArea>
</telerik:RadHtmlChart>
<script>
function dynamicLabelsVisual(e) {
var original = e.createVisual();
var textBox = original.children[1];
var seriesItemHeight = e.rect.height();
var labelHeight = textBox.bbox().height() + 10;
if (seriesItemHeight >= labelHeight) {
return original
};
var y = e.rect.origin.y - labelHeight; //high enough to fit the label
var x = textBox.position().x; //keep the same alignment of x
var layout = new kendo.drawing.Layout(e.rect);
var txt = new kendo.drawing.Text(e.text, [x, y], {
fill: { color: "#000" },
font: e.options.font
});
layout.append(txt);
return layout;
}
</script>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
RadHtmlChart1.DataSource = GetData();
RadHtmlChart1.DataBind();
}
}
private object GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("valuesField");
dt.Columns.Add("labelsField");
dt.Rows.Add(600.50, "Item 1");
dt.Rows.Add(200.50, "Item 2");
dt.Rows.Add(2850.50, "Item 3");
return dt;
}
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
RadHtmlChart1.DataSource = GetData()
RadHtmlChart1.DataBind()
End If
End Sub
Private Function GetData() As Object
Dim dt As DataTable = New DataTable()
dt.Columns.Add("valuesField")
dt.Columns.Add("labelsField")
dt.Rows.Add(600.5, "Item 1")
dt.Rows.Add(200.5, "Item 2")
dt.Rows.Add(2850.5, "Item 3")
Return dt
End Function