Skip to content

Commit aff1918

Browse files
gvreddy04gvreddy04
committed
Add "Click event" demos for all chart types in docs
Added new "Click event" demo sections to the documentation pages for Doughnut, Line, Pie, Polar Area, Radar, and Scatter charts. Each demo shows how to handle chart element click events, display selected item details, and update the UI accordingly. New Razor demo components were created for each chart type, and documentation was updated to include and link to these interactive examples. This enhances guidance for handling user interactions in ChartJS-based Blazor charts.
1 parent a6bea47 commit aff1918

12 files changed

Lines changed: 374 additions & 0 deletions

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
<Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />
3232
</Section>
3333

34+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
35+
<Demo Type="typeof(DoughnutChart_Demo_03_Click_Event)" Tabs="true" />
36+
</Section>
37+
3438
<ChartJSCallout />
3539

3640
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<DoughnutChart @ref="doughnutChart" OnClick="OnClick" Width="500" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private DoughnutChart doughnutChart = default!;
9+
private DoughnutChartOptions doughnutChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a slice to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new DoughnutChartDataset
21+
{
22+
Label = "Browsers",
23+
Data = new List<double?> { 62, 18, 11, 9 },
24+
BackgroundColor = new List<string>
25+
{
26+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
27+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
28+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
29+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
30+
}
31+
}
32+
}
33+
};
34+
35+
doughnutChartOptions = new DoughnutChartOptions { Responsive = true };
36+
}
37+
38+
protected override async Task OnAfterRenderAsync(bool firstRender)
39+
{
40+
if (firstRender)
41+
await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
42+
43+
await base.OnAfterRenderAsync(firstRender);
44+
}
45+
46+
private void OnClick(ChartClickEventArgs eventArgs)
47+
{
48+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
49+
}
50+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
<Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
5454
</Section>
5555

56+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
57+
<Demo Type="typeof(LineChart_Demo_07_Click_Event)" Tabs="true" />
58+
</Section>
59+
5660
<ChartJSCallout />
5761

5862
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<div class="container-fluid overflow-x-auto">
2+
<LineChart @ref="lineChart" OnClick="OnClick" Width="800" />
3+
</div>
4+
5+
<div class="mt-3">
6+
<strong>Selected item:</strong> @selectedItemMessage
7+
</div>
8+
9+
@code {
10+
private LineChart lineChart = default!;
11+
private LineChartOptions lineChartOptions = default!;
12+
private ChartData chartData = default!;
13+
private string selectedItemMessage = "Click a point to view its details.";
14+
15+
protected override void OnInitialized()
16+
{
17+
chartData = new ChartData
18+
{
19+
Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
20+
Datasets = new List<IChartDataset>
21+
{
22+
new LineChartDataset
23+
{
24+
Label = "Product A",
25+
Data = new List<double?> { 35, 41, 62, 42, 13, 18 },
26+
BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
27+
BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
28+
PointRadius = new List<double> { 5 },
29+
PointHoverRadius = new List<double> { 8 }
30+
},
31+
new LineChartDataset
32+
{
33+
Label = "Product B",
34+
Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
35+
BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
36+
BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
37+
PointRadius = new List<double> { 5 },
38+
PointHoverRadius = new List<double> { 8 }
39+
}
40+
}
41+
};
42+
43+
lineChartOptions = new LineChartOptions
44+
{
45+
Interaction = new Interaction { Mode = InteractionMode.Nearest, Intersect = true },
46+
Responsive = true
47+
};
48+
}
49+
50+
protected override async Task OnAfterRenderAsync(bool firstRender)
51+
{
52+
if (firstRender)
53+
await lineChart.InitializeAsync(chartData, lineChartOptions);
54+
55+
await base.OnAfterRenderAsync(firstRender);
56+
}
57+
58+
private void OnClick(ChartClickEventArgs eventArgs)
59+
{
60+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
61+
}
62+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@
3838
<Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
3939
</Section>
4040

41+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
42+
<Demo Type="typeof(PieChart_Demo_04_Click_Event)" Tabs="true" />
43+
</Section>
44+
4145
<ChartJSCallout />
4246

4347
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<PieChart @ref="pieChart" OnClick="OnClick" Width="500" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private PieChart pieChart = default!;
9+
private PieChartOptions pieChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a slice to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "Chrome", "Edge", "Firefox", "Safari" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new PieChartDataset
21+
{
22+
Label = "Browsers",
23+
Data = new List<double?> { 62, 18, 11, 9 },
24+
BackgroundColor = new List<string>
25+
{
26+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
27+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
28+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
29+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString()
30+
}
31+
}
32+
}
33+
};
34+
35+
pieChartOptions = new PieChartOptions { Responsive = true };
36+
}
37+
38+
protected override async Task OnAfterRenderAsync(bool firstRender)
39+
{
40+
if (firstRender)
41+
await pieChart.InitializeAsync(chartData, pieChartOptions);
42+
43+
await base.OnAfterRenderAsync(firstRender);
44+
}
45+
46+
private void OnClick(ChartClickEventArgs eventArgs)
47+
{
48+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
49+
}
50+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
<Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
2828
</Section>
2929

30+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
31+
<Demo Type="typeof(PolarAreaChart_Demo_02_Click_Event)" Tabs="true" />
32+
</Section>
33+
3034
<ChartJSCallout />
3135

3236
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<PolarAreaChart @ref="polarAreaChart" OnClick="OnClick" Width="600" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private PolarAreaChart polarAreaChart = default!;
9+
private PolarAreaChartOptions polarAreaChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a segment to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "North", "South", "East", "West", "Central" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new PolarAreaChartDataset
21+
{
22+
Label = "Regions",
23+
Data = new List<double?> { 11, 16, 7, 3, 14 },
24+
BackgroundColor = new List<string>
25+
{
26+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.5),
27+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.5),
28+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.5),
29+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.5),
30+
ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.5)
31+
},
32+
BorderColor = new List<string>
33+
{
34+
ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(),
35+
ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(),
36+
ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(),
37+
ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString(),
38+
ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString()
39+
}
40+
}
41+
}
42+
};
43+
44+
polarAreaChartOptions = new PolarAreaChartOptions { Responsive = true };
45+
}
46+
47+
protected override async Task OnAfterRenderAsync(bool firstRender)
48+
{
49+
if (firstRender)
50+
await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions);
51+
52+
await base.OnAfterRenderAsync(firstRender);
53+
}
54+
55+
private void OnClick(ChartClickEventArgs eventArgs)
56+
{
57+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
58+
}
59+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
<Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true"/>
2828
</Section>
2929

30+
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event">
31+
<Demo Type="typeof(RadarChart_Demo_02_Click_Event)" Tabs="true" />
32+
</Section>
33+
3034
<ChartJSCallout />
3135

3236
@code {

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<RadarChart @ref="radarChart" OnClick="OnClick" Width="600" />
2+
3+
<div class="mt-3">
4+
<strong>Selected item:</strong> @selectedItemMessage
5+
</div>
6+
7+
@code {
8+
private RadarChart radarChart = default!;
9+
private RadarChartOptions radarChartOptions = default!;
10+
private ChartData chartData = default!;
11+
private string selectedItemMessage = "Click a point to view its details.";
12+
13+
protected override void OnInitialized()
14+
{
15+
chartData = new ChartData
16+
{
17+
Labels = new List<string> { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" },
18+
Datasets = new List<IChartDataset>
19+
{
20+
new RadarChartDataset
21+
{
22+
Label = "Model A",
23+
Data = new List<double?> { 65, 59, 90, 81, 56 },
24+
BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(),
25+
BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8),
26+
BorderWidth = 2,
27+
Fill = true,
28+
HoverBorderWidth = 4
29+
},
30+
new RadarChartDataset
31+
{
32+
Label = "Model B",
33+
Data = new List<double?> { 28, 48, 40, 19, 96 },
34+
BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(),
35+
BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8),
36+
BorderWidth = 2,
37+
Fill = true,
38+
HoverBorderWidth = 4
39+
}
40+
}
41+
};
42+
43+
radarChartOptions = new RadarChartOptions { Responsive = true };
44+
}
45+
46+
protected override async Task OnAfterRenderAsync(bool firstRender)
47+
{
48+
if (firstRender)
49+
await radarChart.InitializeAsync(chartData, radarChartOptions);
50+
51+
await base.OnAfterRenderAsync(firstRender);
52+
}
53+
54+
private void OnClick(ChartClickEventArgs eventArgs)
55+
{
56+
selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}";
57+
}
58+
}

0 commit comments

Comments
 (0)