Skip to content

Commit a3fd274

Browse files
gvreddy04gvreddy04
authored
Update BarChart and LineChart demos to enhance documentation and add stacked line chart example (#33)
1 parent 58ac6f4 commit a3fd274

5 files changed

Lines changed: 179 additions & 88 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,14 @@
105105
The <strong>Stacked Bar Chart with Data Labels</strong> enhances the standard stacked bar chart by displaying value labels directly on each bar segment. This makes it easier to read and compare the values of each dataset within a category.
106106
<br /><br />
107107
<strong>How to use:</strong>
108-
<ul>
109-
<li>Use the <code>BarChart</code> component and enable stacking by setting <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> to <code>true</code>.</li>
110-
<li>Add multiple datasets to your chart data to represent different series.</li>
111-
<li>Enable data labels by configuring the chart's plugins, such as <code>Options.Plugins.Datalabels.Display = true</code>.</li>
112-
<li>Customize the appearance and formatting of data labels as needed for your scenario.</li>
113-
</ul>
108+
<div class="content">
109+
<ol>
110+
<li>Use the <code>BarChart</code> component and enable stacking by setting <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> to <code>true</code>.</li>
111+
<li>Add multiple datasets to your chart data to represent different series.</li>
112+
<li>Enable data labels by passing the <code>ChartDataLabels</code> plugin when calling <code>InitializeAsync</code>: <code>plugins: new[] { "ChartDataLabels" }</code>.</li>
113+
<li>Customize label styling with <code>Options.Plugins.Datalabels</code> or per-dataset <code>Datalabels</code> settings as needed.</li>
114+
</ol>
115+
</div>
114116
Refer to the demo code below for a working example and further configuration options.
115117
</Block>
116118
<Demo Type="typeof(BarChart_Demo_04_Stacked_BarChart_with_Datalabels)" Tabs="true" />
@@ -170,7 +172,7 @@
170172
<Demo Type="typeof(BarChart_Demo_07_Animations_A_Delay)" Tabs="true" />
171173
</Section>
172174

173-
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - DataSet level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
175+
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - Dataset level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
174176
<Block>
175177
The <strong>Animations - DataSet Level Delay</strong> demo demonstrates how to apply different animation delays to each dataset in your Bar Chart. This allows each dataset to animate in sequence, making comparisons clearer and adding a dynamic effect to your data presentation.
176178
<br /><br />

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,44 @@
99
{
1010
var colors = ColorUtility.CategoricalTwelveColors;
1111

12-
var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
13-
var datasets = new List<IChartDataset>();
14-
15-
var dataset1 = new BarChartDataset()
16-
{
17-
Label = "Windows",
18-
Data = new List<double?> { 28000, 8000, 2000, 17000 },
19-
BackgroundColor = new List<string> { colors[0] },
20-
BorderColor = new List<string> { colors[0] },
21-
BorderWidth = new List<double> { 0 },
22-
};
23-
datasets.Add(dataset1);
24-
25-
var dataset2 = new BarChartDataset()
12+
chartData = new ChartData
2613
{
27-
Label = "macOS",
28-
Data = new List<double?> { 8000, 10000, 14000, 8000 },
29-
BackgroundColor = new List<string> { colors[1] },
30-
BorderColor = new List<string> { colors[1] },
31-
BorderWidth = new List<double> { 0 },
14+
Labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" },
15+
Datasets = new List<IChartDataset>
16+
{
17+
new BarChartDataset
18+
{
19+
Label = "Windows",
20+
Data = new List<double?> { 28000, 8000, 2000, 17000 },
21+
BackgroundColor = new List<string> { colors[0] },
22+
BorderColor = new List<string> { colors[0] },
23+
BorderWidth = new List<double> { 0 },
24+
},
25+
new BarChartDataset
26+
{
27+
Label = "macOS",
28+
Data = new List<double?> { 8000, 10000, 14000, 8000 },
29+
BackgroundColor = new List<string> { colors[1] },
30+
BorderColor = new List<string> { colors[1] },
31+
BorderWidth = new List<double> { 0 },
32+
},
33+
new BarChartDataset
34+
{
35+
Label = "Other",
36+
Data = new List<double?> { 28000, 10000, 14000, 8000 },
37+
BackgroundColor = new List<string> { colors[2] },
38+
BorderColor = new List<string> { colors[2] },
39+
BorderWidth = new List<double> { 0 },
40+
},
41+
},
3242
};
33-
datasets.Add(dataset2);
3443

35-
var dataset3 = new BarChartDataset()
44+
barChartOptions = new BarChartOptions
3645
{
37-
Label = "Other",
38-
Data = new List<double?> { 28000, 10000, 14000, 8000 },
39-
BackgroundColor = new List<string> { colors[2] },
40-
BorderColor = new List<string> { colors[2] },
41-
BorderWidth = new List<double> { 0 },
46+
Responsive = true,
47+
Interaction = new Interaction { Mode = InteractionMode.Y },
48+
IndexAxis = "y",
4249
};
43-
datasets.Add(dataset3);
44-
45-
chartData = new ChartData { Labels = labels, Datasets = datasets };
46-
47-
barChartOptions = new();
48-
barChartOptions.Responsive = true;
49-
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
50-
barChartOptions.IndexAxis = "y";
5150

5251
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
5352
barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
@@ -62,9 +61,8 @@
6261
protected override async Task OnAfterRenderAsync(bool firstRender)
6362
{
6463
if (firstRender)
65-
{
6664
await barChart.InitializeAsync(chartData, barChartOptions);
67-
}
65+
6866
await base.OnAfterRenderAsync(firstRender);
6967
}
7068
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor‎

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,51 +8,45 @@
88
protected override void OnInitialized()
99
{
1010
var colors = ColorUtility.CategoricalTwelveColors;
11-
12-
var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
13-
var datasets = new List<IChartDataset>();
14-
15-
var dataset1 = new BarChartDataset()
16-
{
17-
Label = "Windows",
18-
Data = new List<double?> { 28000, 8000, 2000, 17000 },
19-
BackgroundColor = new List<string> { colors[0] },
20-
BorderColor = new List<string> { colors[0] },
21-
BorderWidth = new List<double> { 0 },
22-
};
23-
datasets.Add(dataset1);
24-
25-
var dataset2 = new BarChartDataset()
26-
{
27-
Label = "macOS",
28-
Data = new List<double?> { 8000, 10000, 14000, 8000 },
29-
BackgroundColor = new List<string> { colors[1] },
30-
BorderColor = new List<string> { colors[1] },
31-
BorderWidth = new List<double> { 0 },
32-
};
33-
datasets.Add(dataset2);
34-
35-
var dataset3 = new BarChartDataset()
11+
chartData = new ChartData
3612
{
37-
Label = "Other",
38-
Data = new List<double?> { 28000, 10000, 14000, 8000 },
39-
BackgroundColor = new List<string> { colors[2] },
40-
BorderColor = new List<string> { colors[2] },
41-
BorderWidth = new List<double> { 0 },
13+
Labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" },
14+
Datasets = new List<IChartDataset>
15+
{
16+
new BarChartDataset
17+
{
18+
Label = "Windows",
19+
Data = new List<double?> { 28000, 8000, 2000, 17000 },
20+
BackgroundColor = new List<string> { colors[0] },
21+
BorderColor = new List<string> { colors[0] },
22+
BorderWidth = new List<double> { 0 },
23+
},
24+
new BarChartDataset
25+
{
26+
Label = "macOS",
27+
Data = new List<double?> { 8000, 10000, 14000, 8000 },
28+
BackgroundColor = new List<string> { colors[1] },
29+
BorderColor = new List<string> { colors[1] },
30+
BorderWidth = new List<double> { 0 },
31+
},
32+
new BarChartDataset
33+
{
34+
Label = "Other",
35+
Data = new List<double?> { 28000, 10000, 14000, 8000 },
36+
BackgroundColor = new List<string> { colors[2] },
37+
BorderColor = new List<string> { colors[2] },
38+
BorderWidth = new List<double> { 0 },
39+
},
40+
},
4241
};
43-
datasets.Add(dataset3);
4442

45-
chartData = new ChartData
43+
barChartOptions = new BarChartOptions
4644
{
47-
Labels = labels,
48-
Datasets = datasets
45+
Responsive = true,
46+
Interaction = new Interaction { Mode = InteractionMode.Y },
47+
IndexAxis = "y",
4948
};
5049

51-
barChartOptions = new();
52-
barChartOptions.Responsive = true;
53-
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
54-
barChartOptions.IndexAxis = "y";
55-
5650
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
5751
barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
5852

@@ -61,15 +55,14 @@
6155

6256
barChartOptions.Plugins.Title!.Text = "Operating system";
6357
barChartOptions.Plugins.Title.Display = true;
58+
barChartOptions.Plugins.Datalabels.Color = "white";
6459
}
6560

6661
protected override async Task OnAfterRenderAsync(bool firstRender)
6762
{
6863
if (firstRender)
69-
{
70-
// pass the plugin name to enable the data labels
7164
await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" });
72-
}
65+
7366
await base.OnAfterRenderAsync(firstRender);
7467
}
7568
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,32 @@
5454
<Demo Type="typeof(LineChart_Demo_06_Combo_Bar_Line)" Tabs="true" />
5555
</Section>
5656

57+
<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked line chart" PageUrl="@pageUrl" Link="stacked-line-chart">
58+
<Block>
59+
The <strong>Stack</strong> demo shows how to combine <code>LineChartDataset.Stack</code> with a stacked Y-axis to build a layered line or area chart.
60+
<br /><br />
61+
<strong>How to use:</strong>
62+
<div class="content">
63+
<ol>
64+
<li>Set <code>Options.Scales.Y.Stacked = true</code> so values accumulate on the Y-axis.</li>
65+
<li>Assign the same <code>Stack</code> value to each <code>LineChartDataset</code> that should contribute to the same stacked total.</li>
66+
<li>Optionally set <code>Fill</code> or use <code>FillToStackedValueBelow()</code> to make each layer easier to read.</li>
67+
<li>Refer to the demo code below for a working example of stacked traffic series using shared stack IDs.</li>
68+
</ol>
69+
</div>
70+
</Block>
71+
<Demo Type="typeof(LineChart_Demo_07_Stack)" Tabs="true" />
72+
</Section>
73+
5774
<Section Class="p-0" Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels">
5875
<Block>
5976
The <strong>Line Chart</strong> component supports data labels, allowing you to display values directly on each data point in the chart.
6077
<br /><br />
6178
<strong>How to use:</strong>
6279
<div class="content">
6380
<ol>
64-
<li>Enable data labels by setting <code>Options.Plugins.Datalabels.Display = true</code> in your chart options.</li>
65-
<li>Customize the label content, formatting, and position using the available plugin settings.</li>
81+
<li>Enable data labels by passing the <code>ChartDataLabels</code> plugin when calling <code>InitializeAsync</code>: <code>plugins: new[] { "ChartDataLabels" }</code>.</li>
82+
<li>Customize the label content, formatting, and position using <code>Options.Plugins.Datalabels</code> or per-dataset <code>Datalabels</code> settings.</li>
6683
<li>Bind your data and labels to the chart as usual.</li>
6784
<li>Refer to the demo code below for a working example and further configuration options.</li>
6885
</ol>
@@ -72,7 +89,7 @@
7289
<Demo Type="typeof(LineChart_Demo_02_Datalabels)" Tabs="true" />
7390
</Section>
7491

75-
<Section Class="p-0" Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration">
92+
<Section Class="p-0" Size="HeadingSize.H4" Name="Tick configuration" PageUrl="@pageUrl" Link="tick-configuration">
7693
<Block>
7794
The <strong>Tick Configuration</strong> demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.
7895
<br /><br />

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_07_Stack.razor‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<LineChart @ref="lineChart" Width="700" />
2+
3+
@code {
4+
private const string TrafficStack = "traffic";
5+
6+
private LineChart lineChart = default!;
7+
private LineChartOptions lineChartOptions = default!;
8+
private ChartData chartData = default!;
9+
10+
protected override void OnInitialized()
11+
{
12+
var desktopColor = ColorUtility.CategoricalTwelveColors[0].ToColor();
13+
var mobileColor = ColorUtility.CategoricalTwelveColors[1].ToColor();
14+
var tabletColor = ColorUtility.CategoricalTwelveColors[2].ToColor();
15+
16+
chartData = new ChartData
17+
{
18+
Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
19+
Datasets = new List<IChartDataset>
20+
{
21+
new LineChartDataset
22+
{
23+
Label = "Desktop",
24+
Stack = TrafficStack,
25+
Data = new List<double?> { 35, 38, 42, 46, 50, 53 },
26+
BackgroundColor = desktopColor.ToRgbaString(0.35),
27+
BorderColor = desktopColor.ToRgbString(),
28+
BorderWidth = 2,
29+
PointRadius = new List<double> { 3 },
30+
PointHoverRadius = new List<double> { 5 },
31+
Tension = 0.35,
32+
}.FillToOrigin(),
33+
new LineChartDataset
34+
{
35+
Label = "Mobile",
36+
Stack = TrafficStack,
37+
Data = new List<double?> { 22, 25, 29, 33, 36, 40 },
38+
BackgroundColor = mobileColor.ToRgbaString(0.35),
39+
BorderColor = mobileColor.ToRgbString(),
40+
BorderWidth = 2,
41+
PointRadius = new List<double> { 3 },
42+
PointHoverRadius = new List<double> { 5 },
43+
Tension = 0.35,
44+
}.FillToStackedValueBelow(),
45+
new LineChartDataset
46+
{
47+
Label = "Tablet",
48+
Stack = TrafficStack,
49+
Data = new List<double?> { 10, 12, 13, 15, 16, 18 },
50+
BackgroundColor = tabletColor.ToRgbaString(0.35),
51+
BorderColor = tabletColor.ToRgbString(),
52+
BorderWidth = 2,
53+
PointRadius = new List<double> { 3 },
54+
PointHoverRadius = new List<double> { 5 },
55+
Tension = 0.35,
56+
}.FillToStackedValueBelow(),
57+
},
58+
};
59+
60+
lineChartOptions = new LineChartOptions
61+
{
62+
Responsive = true,
63+
Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
64+
};
65+
66+
lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Month", Display = true };
67+
lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Sessions", Display = true };
68+
lineChartOptions.Scales.Y.Stacked = true;
69+
70+
lineChartOptions.Plugins.Title!.Text = "Website sessions by device type";
71+
lineChartOptions.Plugins.Title.Display = true;
72+
}
73+
74+
protected override async Task OnAfterRenderAsync(bool firstRender)
75+
{
76+
if (firstRender)
77+
await lineChart.InitializeAsync(chartData, lineChartOptions);
78+
79+
await base.OnAfterRenderAsync(firstRender);
80+
}
81+
}

0 commit comments

Comments
 (0)