Skip to content

Commit e6f713b

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
committed
Knowledge base article on dealing with crowded labels in the chart (#90)
* feat(kb): chart crowded labels kb initial commit * chore(kb): added notes section in the crowded labels kb * chore(kb): updates on the crowded labels kb article * chore(chart): minor improvements on kb for decluttering labels Co-authored-by: Marin Bratanov <[email protected]>
1 parent aa7d1c8 commit e6f713b

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎knowledge-base/chart-crowded-labels.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
title: Prevent crowded labels in the Chart
3+
description: How to prevent crowded labels in the Chart
4+
type: how-to
5+
page_title: Prevent crowded labels in the Chart
6+
slug: chart-kb-crowded-labels
7+
position:
8+
tags:
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Chart for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
23+
## Description
24+
25+
I am having a Chart with big load of data. The labels are overlapping and thus - unreadable.
26+
27+
28+
## Solution
29+
30+
You can control how many labels render, their rotation angle and even font in order to reduce clutter. Read further to see how to find and use the appropriate tags and parameters.
31+
32+
You can also skip directly to the examples:
33+
34+
* [Example - Rotate the Chart Labels](#example---rotate-the-chart-labels)
35+
* [Example - Skip rendering every n-th label](#example---skip-rendering-every-n-th-label)
36+
37+
38+
The general approach to customize the Chart is to apply settings using nested tags. In the case of the `Labels` the tag is
39+
* for [categorical charts]({%slug components/chart/databind%}#series-types) - `<ChartCategoryAxisLabels>` under the `<ChartCategoryAxis>`.
40+
* for [numerical charts]({%slug components/chart/databind%}#series-types) - `<ChartXAxisLabels>` and `<ChartYAxisLabels>` under the `<ChartXAxis>` and `<ChartYAxis>`.
41+
42+
43+
You can control the `Labels` by applying the following settings to the `<ChartCategoryAxisLabels>` or `<ChartXAxisLabels>` tags depending on the Chart type:
44+
* **Angle** - rotate the Labels to a desired degree - can be useful for long texts even if you have few items
45+
* **Step** - skip the rendering of every `n-th` label, where `n` is the `double` number passed to the parameter.
46+
* **Skip** - skip the rendering of the first `n` labels, where `n` is the `double` number passed to the parameter.
47+
48+
49+
To **rotate** the `Labels` to a desired degree you can use the `Angle` setting of the `<ChartCategoryAxisLabelsRotation />`, nested tag of `<ChartXAxisLabelsRotation />`, or `<ChartYAxisLabelsRotation />` respectively for categorical and numerical charts.
50+
51+
To **skip** the rendering of every n-th label, when the data in your application allows it (e.g., for a date axis or numerical axes), you can use the `Step` setting of the `<ChartCategoryAxisLabels>` or `<ChartXAxisLabels>`. Applying that would notify the chart to skip every n-th label, for example if set to `2` only the even labels would be rendered.
52+
53+
You can also control other visual settings of the Labels such as `Padding`, `Borders` and `Margin` by using the respective nested tags - `<ChartCategoryAxisLabels<SETTING NAME> />`. The labels also have a `Font` parameter where you can pass a CSS font setting to reduce the size of the text.
54+
55+
### Example - Rotate the Chart Labels
56+
57+
````CSHTML
58+
@* This example shows how to rotate the labels of a Categorical Chart by a certain angle *@
59+
60+
<TelerikChart>
61+
<ChartSeriesItems>
62+
<ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
63+
</ChartSeries>
64+
<ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data">
65+
</ChartSeries>
66+
</ChartSeriesItems>
67+
68+
<ChartCategoryAxes>
69+
<ChartCategoryAxis Categories="@xAxisItems">
70+
<ChartCategoryAxisLabels>
71+
<ChartCategoryAxisLabelsRotation Angle="-45" />
72+
</ChartCategoryAxisLabels>
73+
</ChartCategoryAxis>
74+
</ChartCategoryAxes>
75+
76+
<ChartTitle Text="Quarterly revenue per product"></ChartTitle>
77+
78+
<ChartLegend Position="ChartLegendPosition.Right">
79+
</ChartLegend>
80+
</TelerikChart>
81+
82+
@code {
83+
public List<object> series1Data = new List<object>() { 10, 2, 5, 6, 8, 8, 13, 11, 4, 9, 10, 15, 14, 3, 2 };
84+
public List<object> series2Data = new List<object>() { 5, 8, 2, 7, 6, 11, 14, 13, 8, 7, 2, 7, 5, 9, 11 };
85+
public string[] xAxisItems = new string[15];
86+
87+
protected override void OnInitialized()
88+
{
89+
for (int i = 0; i < 15; i++)
90+
{
91+
xAxisItems[i] = $"looooong label {i + 1}";
92+
}
93+
base.OnInitialized();
94+
}
95+
}
96+
````
97+
98+
>caption The result from the code snippet above
99+
100+
![rotate chart labels](images/chart-label-rotation-example.png)
101+
102+
103+
### Example - Skip rendering every n-th label
104+
105+
````CSHTML
106+
@* This example shows how render only every third label *@
107+
108+
<TelerikChart>
109+
<ChartSeriesItems>
110+
<ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
111+
</ChartSeries>
112+
<ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data">
113+
</ChartSeries>
114+
</ChartSeriesItems>
115+
116+
<ChartCategoryAxes>
117+
<ChartCategoryAxis Categories="@xAxisItems">
118+
<ChartCategoryAxisLabels Step="3">
119+
</ChartCategoryAxisLabels>
120+
</ChartCategoryAxis>
121+
</ChartCategoryAxes>
122+
123+
<ChartTitle Text="Quarterly revenue per product"></ChartTitle>
124+
125+
<ChartLegend Position="ChartLegendPosition.Right">
126+
</ChartLegend>
127+
</TelerikChart>
128+
129+
@code {
130+
public List<object> series1Data = new List<object>() { 10, 2, 5, 6, 8, 8, 13, 11, 4, 9, 10, 15, 14, 3, 2 };
131+
public List<object> series2Data = new List<object>() { 5, 8, 2, 7, 6, 11, 14, 13, 8, 7, 2, 7, 5, 9, 11 };
132+
public string[] xAxisItems = new string[15];
133+
134+
protected override void OnInitialized()
135+
{
136+
for (int i = 0; i < 15; i++)
137+
{
138+
xAxisItems[i] = $"looooong label {i + 1}";
139+
}
140+
}
141+
}
142+
````
143+
144+
>caption The result from the code snippet above
145+
146+
![rotate chart labels](images/chart-label-step-example.png)
147+
148+
## Notes
149+
150+
You can also see the Knowledge base article regarding [clustered grid lines]({%slug chart-kb-crowded-grid-lines%}) to further improve the layout of the Chart.

‎knowledge-base/images/chart-label-rotation-example.png

26.2 KB
Loading

‎knowledge-base/images/chart-label-step-example.png

11.2 KB
Loading

0 commit comments

Comments
 (0)