Skip to content

Commit c220b07

Browse files
dimodiyordan-mitev
dimodi
and
yordan-mitev
authored
docs(chart): Add information about axis and legend click events (#1587)
* docs(chart): Add information about axis and legend click events * Update components/chart/events.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update components/chart/events.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --------- Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
1 parent c21acc6 commit c220b07

File tree

1 file changed

+204
-1
lines changed

1 file changed

+204
-1
lines changed

‎components/chart/events.md‎

Lines changed: 204 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,213 @@ position: 32
1010

1111
# Chart Events
1212

13-
This article explains the available events for the Telerik Chart for Blazor:
13+
This article describes the available events for the Telerik Chart for Blazor:
1414

15+
* [OnAxisLabelClick](#onaxislabelclick)
16+
* [OnLegendItemClick](#onlegenditemclick)
1517
* [OnSeriesClick](#onseriesclick)
1618

19+
## OnAxisLabelClick
20+
21+
The `OnAxisLabelClick` event fires when the user clicks a label item on any of the Chart axes. The event argument is of type `ChartAxisLabelClickEventArgs` and exposes the following properties:
22+
23+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
24+
25+
| Property | Type | Description |
26+
| --- | --- | --- |
27+
| `AxisName` | `string` | The value of the `Name` parameter of the Chart axis. Returns `null` if `Name` is not set. |
28+
| `Index` | `int` | The label index on the clicked axis. |
29+
| `Text` | `string` | The visible value of the label. It may be formatted. |
30+
| `Value` | `object` | The underlying non-formatted value of the label. The `Value` can be: <ul><li>The same as the <code>Text</code> value when clicking on a category axis label.</li><li>A numeric value when clicking on a value axis label.</li><li>An ISO-8601 DateTime string when clicking on a date axis.</li></ul> |
31+
32+
>caption Using the Chart OnAxisLabelClick event
33+
34+
````CSHTML
35+
@* Using the Chart OnAxisLabelClick event *@
36+
37+
<TelerikChart OnAxisLabelClick="@OnChartAxisLabelClick">
38+
<ChartSeriesItems>
39+
<ChartSeries Type="ChartSeriesType.Line"
40+
Data="@Series1Data"
41+
Field="@nameof(SalesData.Revenue)"
42+
CategoryField="@nameof(SalesData.TimePeriod)"
43+
Name="Smartphones">
44+
</ChartSeries>
45+
</ChartSeriesItems>
46+
47+
<ChartCategoryAxes>
48+
<ChartCategoryAxis Name="my-axis-name" Type="@ChartCategoryAxisType.Date"></ChartCategoryAxis>
49+
</ChartCategoryAxes>
50+
51+
<ChartTitle Text="Revenue per Product Line"></ChartTitle>
52+
</TelerikChart>
53+
54+
@code {
55+
private List<SalesData> Series1Data { get; set; } = new List<SalesData>();
56+
57+
private async Task OnChartAxisLabelClick(ChartAxisLabelClickEventArgs args)
58+
{
59+
Console.WriteLine($"Clicked axis label {args.Text} with index {args.Index} and value {args.Value} from axis {args.AxisName}.");
60+
}
61+
62+
protected override void OnInitialized()
63+
{
64+
var rnd = new Random();
65+
var now = DateTime.Today;
66+
var monthsBack = 12;
67+
68+
for (int i = 1; i <= monthsBack; i++)
69+
{
70+
var dateTimeValue = now.AddMonths(-monthsBack + i);
71+
72+
Series1Data.Add(new SalesData()
73+
{
74+
Id = i,
75+
Product = "Smartphones",
76+
Revenue = rnd.Next(500, 900),
77+
TimePeriod = dateTimeValue
78+
});
79+
}
80+
81+
base.OnInitialized();
82+
}
83+
84+
public class SalesData
85+
{
86+
public int Id { get; set; }
87+
public string Product { get; set; }
88+
public DateTime TimePeriod { get; set; }
89+
public decimal Revenue { get; set; }
90+
}
91+
}
92+
````
93+
94+
## OnLegendItemClick
95+
96+
The `OnLegendItemClick` event fires when the user clicks on any item in the Chart legend. The event argument is of type `ChartLegendItemClickEventArgs` and exposes the following properties:
97+
98+
| Property | Type | Description |
99+
| --- | --- | --- |
100+
| `PointIndex` | `int?` | The data point index in the series `Data`. Applies to single-series Charts only (Pie and Donut). |
101+
| `SeriesIndex` | `int` | The series index in the `ChartSeriesItems` collection. |
102+
| `Text` | `string` | The label of the clicked legend item. In multi-series Charts, the `Text` value matches the `ChartSeries` `Name`. In single-series Charts (Pie and Donut), the `Text` value matches the `CategoryField` value. |
103+
104+
>caption Using the Chart OnLegendItemClick event
105+
106+
````CSHTML
107+
@* Using the Chart OnLegendItemClick event *@
108+
109+
<TelerikChart OnLegendItemClick="@OnChartLegendClick"
110+
Transitions="false">
111+
<ChartSeriesItems>
112+
<ChartSeries Type="ChartSeriesType.Line"
113+
Data="@Series1Data"
114+
Field="@nameof(SalesData.Revenue)"
115+
CategoryField="@nameof(SalesData.TimePeriod)"
116+
Name="Smartphones"
117+
Visible="@( SeriesVisible(0) )">
118+
</ChartSeries>
119+
<ChartSeries Type="ChartSeriesType.Line"
120+
Data="@Series2Data"
121+
Field="@nameof(SalesData.Revenue)"
122+
CategoryField="@nameof(SalesData.TimePeriod)"
123+
Name="Tablets"
124+
Visible="@( SeriesVisible(1) )">
125+
</ChartSeries>
126+
<ChartSeries Type="ChartSeriesType.Line"
127+
Data="@Series3Data"
128+
Field="@nameof(SalesData.Revenue)"
129+
CategoryField="@nameof(SalesData.TimePeriod)"
130+
Name="Headphones"
131+
Visible="@( SeriesVisible(2) )">
132+
</ChartSeries>
133+
</ChartSeriesItems>
134+
135+
<ChartCategoryAxes>
136+
<ChartCategoryAxis Type="@ChartCategoryAxisType.Date"></ChartCategoryAxis>
137+
</ChartCategoryAxes>
138+
139+
<ChartValueAxes>
140+
<ChartValueAxis Max="1000"></ChartValueAxis>
141+
</ChartValueAxes>
142+
143+
<ChartTitle Text="Revenue per Product Line"></ChartTitle>
144+
145+
<ChartLegend Position="ChartLegendPosition.Bottom">
146+
</ChartLegend>
147+
</TelerikChart>
148+
149+
@code {
150+
private List<SalesData> Series1Data { get; set; } = new List<SalesData>();
151+
private List<SalesData> Series2Data { get; set; } = new List<SalesData>();
152+
private List<SalesData> Series3Data { get; set; } = new List<SalesData>();
153+
154+
private int? ChartLegendClickIndex { get; set; }
155+
156+
private bool SeriesVisible(int idx)
157+
{
158+
return ChartLegendClickIndex == null || ChartLegendClickIndex == idx;
159+
}
160+
161+
private async Task OnChartLegendClick(ChartLegendItemClickEventArgs args)
162+
{
163+
Console.WriteLine($"Clicked legend item {args.Text} with series index {args.SeriesIndex}.");
164+
165+
if (ChartLegendClickIndex != args.SeriesIndex)
166+
{
167+
ChartLegendClickIndex = args.SeriesIndex;
168+
}
169+
else
170+
{
171+
ChartLegendClickIndex = null;
172+
}
173+
}
174+
175+
protected override void OnInitialized()
176+
{
177+
var rnd = new Random();
178+
var now = DateTime.Today;
179+
var monthsBack = 12;
180+
181+
for (int i = 1; i <= monthsBack; i++)
182+
{
183+
var dateTimeValue = now.AddMonths(-monthsBack + i);
184+
185+
Series1Data.Add(new SalesData()
186+
{
187+
Id = i,
188+
Product = "Smartphones",
189+
Revenue = rnd.Next(500, 900),
190+
TimePeriod = dateTimeValue
191+
});
192+
Series2Data.Add(new SalesData()
193+
{
194+
Id = i,
195+
Product = "Tablets",
196+
Revenue = rnd.Next(300, 700),
197+
TimePeriod = dateTimeValue
198+
});
199+
Series3Data.Add(new SalesData()
200+
{
201+
Id = i,
202+
Product = "Headphones",
203+
Revenue = rnd.Next(100, 400),
204+
TimePeriod = dateTimeValue
205+
});
206+
}
207+
208+
base.OnInitialized();
209+
}
210+
211+
public class SalesData
212+
{
213+
public int Id { get; set; }
214+
public string Product { get; set; }
215+
public DateTime TimePeriod { get; set; }
216+
public decimal Revenue { get; set; }
217+
}
218+
}
219+
````
17220

18221
## OnSeriesClick
19222

0 commit comments

Comments
 (0)