Skip to content

Commit 1365130

Browse files
dimodidimodi
committed
docs(chart): Document from and to labels for range series
1 parent 4f27df9 commit 1365130

File tree

3 files changed

+75
-21
lines changed

3 files changed

+75
-21
lines changed

‎components/chart/types/rangearea.md‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ By default, the series backgrounds are semi-transparent, which lets the user cle
2424
2. Set the series `Type` parameter to `ChartSeriesType.RangeArea`.
2525
3. Provide a data collection to its `Data` property. You can use a [collection of arrays](#binding-range-area-series-to-collection-of-arrays) or a [collection of custom objects](#binding-range-area-series-to-custom-objects).
2626
4. If the Range Area data is a collection of arrays, provide data for the `Categories` parameter of the `ChartCategoryAxis`.
27+
5. (optional) Set `Visible="true"` to `<ChartSeriesLabels>` to show both the `from` and `to` labels. Alternatively, enable visibility or define [label `Template`]({%slug components/chart/label-template-format%}) for `<ChartSeriesLabelsFrom>` or `<ChartSeriesLabelsTo>`. These are nested tags inside `<ChartSeriesLabels>` of the respective `<ChartSeries>`.
2728

2829
### Binding Range Area Series to Collection of Arrays
2930

@@ -39,17 +40,26 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
3940
<ChartSeries Name="Sydney"
4041
Data="@SydneyData"
4142
Type="ChartSeriesType.RangeArea">
43+
<ChartSeriesLabels Visible="true" />
4244
</ChartSeries>
4345
<ChartSeries Name="Sofia"
4446
Data="@SofiaData"
4547
Type="ChartSeriesType.RangeArea">
48+
@*<ChartSeriesLabels>
49+
<ChartSeriesLabelsFrom Visible="true" />
50+
<ChartSeriesLabelsTo Visible="false" />
51+
</ChartSeriesLabels>*@
4652
</ChartSeries>
4753
</ChartSeriesItems>
4854
4955
<ChartCategoryAxes>
5056
<ChartCategoryAxis Categories="@MonthNames" />
5157
</ChartCategoryAxes>
5258
59+
<ChartValueAxes>
60+
<ChartValueAxis AxisCrossingValue="@( new object[] { -60 } )" />
61+
</ChartValueAxes>
62+
5363
<ChartTooltip Visible="true"></ChartTooltip>
5464
5565
<ChartTitle Text="Monthly Temperatures"></ChartTitle>
@@ -61,7 +71,7 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
6171
// The RangeArea series Data can be any collection of arrays
6272
6373
private List<double[]> SydneyData { get; set; } = new List<double[]>
64-
{
74+
{
6575
new double[] { 20, 27 },
6676
new double[] { 19.9, 26.8 },
6777
new double[] { 18.4, 25.7 },
@@ -90,7 +100,7 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
90100
new double[] { 6.7, 17.6 },
91101
new double[] { 2.2, 10.7 },
92102
new double[] { -2.3, 4.6 }
93-
};
103+
};
94104
95105
private object[] MonthNames = new string[] {
96106
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
@@ -114,13 +124,18 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
114124
FromField="@nameof(AreaDataPoint.LowValue)"
115125
ToField="@nameof(AreaDataPoint.HighValue)"
116126
CategoryField="@nameof(AreaDataPoint.Hour)">
127+
<ChartSeriesLabels Visible="true" />
117128
</ChartSeries>
118129
<ChartSeries Name="Test Tube 2"
119130
Data="@Tube2Data"
120131
Type="ChartSeriesType.RangeArea"
121132
FromField="@nameof(AreaDataPoint.LowValue)"
122133
ToField="@nameof(AreaDataPoint.HighValue)"
123134
CategoryField="@nameof(AreaDataPoint.Hour)">
135+
@*<ChartSeriesLabels Visible="true">
136+
<ChartSeriesLabelsFrom Visible="true" />
137+
<ChartSeriesLabelsTo Visible="false" />
138+
</ChartSeriesLabels>*@
124139
</ChartSeries>
125140
</ChartSeriesItems>
126141

‎components/chart/types/rangebar.md‎

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ The <a href="https://www.telerik.com/blazor-ui/range-bar-chart" target="_blank">
2020
2. Set the series `Type` parameter to `ChartSeriesType.RangeBar`.
2121
3. Provide a data collection to the series `Data` parameter. You can use a [collection of arrays](#binding-range-bar-series-to-collection-of-arrays) or a [collection of custom objects](#binding-range-column-series-to-custom-objects).
2222
4. If the Range Bar data is a collection of arrays, provide data for the `Categories` parameter of the `ChartCategoryAxis`.
23+
5. (optional) Set `Visible="true"` or define [label `Template`]({%slug components/chart/label-template-format%}) for `<ChartSeriesLabelsFrom>` or `<ChartSeriesLabelsTo>`. These are nested tags inside `<ChartSeriesLabels>` of the respective `<ChartSeries>`.
2324

2425
### Binding Range Bar Series to Collection of Arrays
2526

@@ -35,6 +36,17 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
3536
3637
<ChartSeriesItems>
3738
<ChartSeries Type="ChartSeriesType.RangeBar" Data="@SleepData">
39+
<ChartSeriesLabels>
40+
@* Show the From and To labels together *@
41+
42+
<ChartSeriesLabelsFrom Visible="false" />
43+
<ChartSeriesLabelsTo Visible="true" />
44+
45+
@* OR show the From and To labels separately *@
46+
47+
@*<ChartSeriesLabelsFrom Visible="true" Template="#= dataItem[0] #" />
48+
<ChartSeriesLabelsTo Visible="true" Template="#= dataItem[1] #" />*@
49+
</ChartSeriesLabels>
3850
</ChartSeries>
3951
</ChartSeriesItems>
4052
@@ -43,7 +55,7 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
4355
</ChartCategoryAxes>
4456
4557
<ChartValueAxes>
46-
<ChartValueAxis Min="4"></ChartValueAxis>
58+
<ChartValueAxis Min="6"></ChartValueAxis>
4759
</ChartValueAxes>
4860
4961
<ChartTooltip Visible="true">
@@ -59,18 +71,18 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
5971
6072
@code {
6173
private List<int[]> SleepData = new List<int[]>() {
62-
new int[] { 14, 17 },
63-
new int[] { 12, 16 },
64-
new int[] { 11, 14 },
65-
new int[] { 10, 13 },
66-
new int[] { 9, 12 },
67-
new int[] { 8, 10 },
74+
new int[] { 7, 8 },
6875
new int[] { 7, 9 },
69-
new int[] { 7, 8 }
76+
new int[] { 8, 10 },
77+
new int[] { 9, 12 },
78+
new int[] { 10, 13 },
79+
new int[] { 11, 14 },
80+
new int[] { 12, 16 },
81+
new int[] { 14, 17 },
7082
};
7183
7284
private string[] Categories = new string[] {
73-
"0–3 m", "4-12 m", "1-2 y", "3-5 y", "6-12 y", "13-18 y", "18-60 y", "60+ y"
85+
"60+ y", "18-60 y", "13-18 y", "6-12 y", "3-5 y", "1-2 y", "4-12 m", "0–3 m"
7486
};
7587
}
7688
````
@@ -92,11 +104,22 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
92104
FromField="@(nameof(RangeBarModel.LowValue))"
93105
ToField="@(nameof(RangeBarModel.HighValue))"
94106
CategoryField="@(nameof(RangeBarModel.AgeGroup))">
107+
<ChartSeriesLabels>
108+
@* Show the From and To labels together *@
109+
110+
<ChartSeriesLabelsFrom Visible="false" />
111+
<ChartSeriesLabelsTo Visible="true" />
112+
113+
@* OR show the From and To labels separately *@
114+
115+
@*<ChartSeriesLabelsFrom Visible="true" Template="#= dataItem.LowValue #" />
116+
<ChartSeriesLabelsTo Visible="true" Template="#= dataItem.HighValue #" />*@
117+
</ChartSeriesLabels>
95118
</ChartSeries>
96119
</ChartSeriesItems>
97120
98121
<ChartValueAxes>
99-
<ChartValueAxis Min="4"></ChartValueAxis>
122+
<ChartValueAxis Min="6"></ChartValueAxis>
100123
</ChartValueAxes>
101124
102125
<ChartTooltip Visible="true">
@@ -112,14 +135,14 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
112135
113136
@code {
114137
private List<RangeBarModel> SleepData = new List<RangeBarModel>() {
115-
new RangeBarModel { LowValue = 14, HighValue = 17, AgeGroup = "0-3 m" },
116-
new RangeBarModel { LowValue = 12, HighValue = 16, AgeGroup = "4-12 m" },
117-
new RangeBarModel { LowValue = 11, HighValue = 14, AgeGroup = "1-2 y" },
118-
new RangeBarModel { LowValue = 10, HighValue = 13, AgeGroup = "3-5 y" },
119-
new RangeBarModel { LowValue = 9, HighValue = 12, AgeGroup = "6-12 y" },
120-
new RangeBarModel { LowValue = 8, HighValue = 10, AgeGroup = "13-18 y" },
138+
new RangeBarModel { LowValue = 7, HighValue = 8, AgeGroup = "60+ y" },
121139
new RangeBarModel { LowValue = 7, HighValue = 9, AgeGroup = "18-60 y" },
122-
new RangeBarModel { LowValue = 7, HighValue = 8, AgeGroup = "60+ y" }
140+
new RangeBarModel { LowValue = 8, HighValue = 10, AgeGroup = "13-18 y" },
141+
new RangeBarModel { LowValue = 9, HighValue = 12, AgeGroup = "6-12 y" },
142+
new RangeBarModel { LowValue = 10, HighValue = 13, AgeGroup = "3-5 y" },
143+
new RangeBarModel { LowValue = 11, HighValue = 14, AgeGroup = "1-2 y" },
144+
new RangeBarModel { LowValue = 12, HighValue = 16, AgeGroup = "4-12 m" },
145+
new RangeBarModel { LowValue = 14, HighValue = 17, AgeGroup = "0-3 m" }
123146
};
124147
125148
public class RangeBarModel

‎components/chart/types/rangecolumn.md‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ The <a href="https://www.telerik.com/blazor-ui/range-column-chart" target="_blan
2020
2. Set the series `Type` parameter to `ChartSeriesType.RangeColumn`.
2121
3. Provide a data collection to its `Data` property. You can use a [collection of arrays](#binding-range-column-series-to-collection-of-arrays) or a [collection of custom objects](#binding-range-column-series-to-custom-objects).
2222
4. If the Range Column data is a collection of arrays, provide data for the `Categories` parameter of the `ChartCategoryAxis`.
23+
5. (optional) Set `Visible="true"` or define [label `Template`]({%slug components/chart/label-template-format%}) for `<ChartSeriesLabelsFrom>` or `<ChartSeriesLabelsTo>`. These are nested tags inside `<ChartSeriesLabels>` of the respective `<ChartSeries>`.
2324

2425
### Binding Range Column Series to Collection of Arrays
2526

@@ -35,10 +36,18 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
3536
<ChartSeries Name="University 1"
3637
Data="@StudentScores1"
3738
Type="ChartSeriesType.RangeColumn">
39+
<ChartSeriesLabels>
40+
<ChartSeriesLabelsFrom Visible="true" />
41+
<ChartSeriesLabelsTo Visible="false" />
42+
</ChartSeriesLabels>
3843
</ChartSeries>
3944
<ChartSeries Name="University 2"
4045
Data="@StudentScores2"
4146
Type="ChartSeriesType.RangeColumn">
47+
<ChartSeriesLabels>
48+
<ChartSeriesLabelsFrom Visible="true" Template="#= dataItem[0] #" />
49+
<ChartSeriesLabelsTo Visible="true" Template="#= dataItem[1] #" />
50+
</ChartSeriesLabels>
4251
</ChartSeries>
4352
</ChartSeriesItems>
4453
@@ -107,13 +116,21 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
107116
FromField="@nameof(ScoreModel.LowScore)"
108117
ToField="@nameof(ScoreModel.HighScore)"
109118
CategoryField="@nameof(ScoreModel.Year)">
119+
<ChartSeriesLabels>
120+
<ChartSeriesLabelsFrom Visible="true" />
121+
<ChartSeriesLabelsTo Visible="false" />
122+
</ChartSeriesLabels>
110123
</ChartSeries>
111124
<ChartSeries Name="University 2"
112125
Data="@StudentScoreList2"
113126
Type="ChartSeriesType.RangeColumn"
114127
FromField="@nameof(ScoreModel.LowScore)"
115128
ToField="@nameof(ScoreModel.HighScore)"
116129
CategoryField="@nameof(ScoreModel.Year)">
130+
<ChartSeriesLabels>
131+
<ChartSeriesLabelsFrom Visible="true" Template="#= dataItem.LowScore #" />
132+
<ChartSeriesLabelsTo Visible="true" Template="#= dataItem.HighScore #" />
133+
</ChartSeriesLabels>
117134
</ChartSeries>
118135
</ChartSeriesItems>
119136
@@ -138,11 +155,10 @@ Set the `Categories` parameter of the `ChartCategoryAxis` to `object[]`. The mem
138155
protected override void OnInitialized()
139156
{
140157
var thisYear = DateTime.Now.Year;
141-
Years = new object[] { thisYear - 4, thisYear - 3, thisYear - 2, thisYear - 1, thisYear };
142158
143159
var rnd = new Random();
144160
145-
for (int i = 1; i <= Years.Count(); i++)
161+
for (int i = 1; i <= 5; i++)
146162
{
147163
int randomValue = rnd.Next(30, 50);
148164

0 commit comments

Comments
 (0)