diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor
index 7ee281f0..3ebe01e1 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor
@@ -105,12 +105,14 @@
The Stacked Bar Chart with Data Labels 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.
How to use:
-
- - Use the
BarChart component and enable stacking by setting Options.Scales.X.Stacked and Options.Scales.Y.Stacked to true.
- - Add multiple datasets to your chart data to represent different series.
- - Enable data labels by configuring the chart's plugins, such as
Options.Plugins.Datalabels.Display = true.
- - Customize the appearance and formatting of data labels as needed for your scenario.
-
+
+
+ - Use the
BarChart component and enable stacking by setting Options.Scales.X.Stacked and Options.Scales.Y.Stacked to true.
+ - Add multiple datasets to your chart data to represent different series.
+ - Enable data labels by passing the
ChartDataLabels plugin when calling InitializeAsync: plugins: new[] { "ChartDataLabels" }.
+ - Customize label styling with
Options.Plugins.Datalabels or per-dataset Datalabels settings as needed.
+
+
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
index 0b98e51b..e37106c7 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
@@ -9,45 +9,44 @@
{
var colors = ColorUtility.CategoricalTwelveColors;
- var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };
- var datasets = new List();
-
- var dataset1 = new BarChartDataset()
- {
- Label = "Windows",
- Data = new List { 28000, 8000, 2000, 17000 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 0 },
- };
- datasets.Add(dataset1);
-
- var dataset2 = new BarChartDataset()
+ chartData = new ChartData
{
- Label = "macOS",
- Data = new List { 8000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 0 },
+ Labels = new List { "Chrome", "Firefox", "Safari", "Edge" },
+ Datasets = new List
+ {
+ new BarChartDataset
+ {
+ Label = "Windows",
+ Data = new List { 28000, 8000, 2000, 17000 },
+ BackgroundColor = new List { colors[0] },
+ BorderColor = new List { colors[0] },
+ BorderWidth = new List { 0 },
+ },
+ new BarChartDataset
+ {
+ Label = "macOS",
+ Data = new List { 8000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[1] },
+ BorderColor = new List { colors[1] },
+ BorderWidth = new List { 0 },
+ },
+ new BarChartDataset
+ {
+ Label = "Other",
+ Data = new List { 28000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[2] },
+ BorderColor = new List { colors[2] },
+ BorderWidth = new List { 0 },
+ },
+ },
};
- datasets.Add(dataset2);
- var dataset3 = new BarChartDataset()
+ barChartOptions = new BarChartOptions
{
- Label = "Other",
- Data = new List { 28000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 0 },
+ Responsive = true,
+ Interaction = new Interaction { Mode = InteractionMode.Y },
+ IndexAxis = "y",
};
- datasets.Add(dataset3);
-
- chartData = new ChartData { Labels = labels, Datasets = datasets };
-
- barChartOptions = new();
- barChartOptions.Responsive = true;
- barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
- barChartOptions.IndexAxis = "y";
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
@@ -62,9 +61,8 @@
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
- {
await barChart.InitializeAsync(chartData, barChartOptions);
- }
+
await base.OnAfterRenderAsync(firstRender);
}
}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
index 60e6fdce..38e5f4e3 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
@@ -8,51 +8,45 @@
protected override void OnInitialized()
{
var colors = ColorUtility.CategoricalTwelveColors;
-
- var labels = new List { "Chrome", "Firefox", "Safari", "Edge" };
- var datasets = new List();
-
- var dataset1 = new BarChartDataset()
- {
- Label = "Windows",
- Data = new List { 28000, 8000, 2000, 17000 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 0 },
- };
- datasets.Add(dataset1);
-
- var dataset2 = new BarChartDataset()
- {
- Label = "macOS",
- Data = new List { 8000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 0 },
- };
- datasets.Add(dataset2);
-
- var dataset3 = new BarChartDataset()
+ chartData = new ChartData
{
- Label = "Other",
- Data = new List { 28000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 0 },
+ Labels = new List { "Chrome", "Firefox", "Safari", "Edge" },
+ Datasets = new List
+ {
+ new BarChartDataset
+ {
+ Label = "Windows",
+ Data = new List { 28000, 8000, 2000, 17000 },
+ BackgroundColor = new List { colors[0] },
+ BorderColor = new List { colors[0] },
+ BorderWidth = new List { 0 },
+ },
+ new BarChartDataset
+ {
+ Label = "macOS",
+ Data = new List { 8000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[1] },
+ BorderColor = new List { colors[1] },
+ BorderWidth = new List { 0 },
+ },
+ new BarChartDataset
+ {
+ Label = "Other",
+ Data = new List { 28000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[2] },
+ BorderColor = new List { colors[2] },
+ BorderWidth = new List { 0 },
+ },
+ },
};
- datasets.Add(dataset3);
- chartData = new ChartData
+ barChartOptions = new BarChartOptions
{
- Labels = labels,
- Datasets = datasets
+ Responsive = true,
+ Interaction = new Interaction { Mode = InteractionMode.Y },
+ IndexAxis = "y",
};
- barChartOptions = new();
- barChartOptions.Responsive = true;
- barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
- barChartOptions.IndexAxis = "y";
-
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
@@ -61,15 +55,14 @@
barChartOptions.Plugins.Title!.Text = "Operating system";
barChartOptions.Plugins.Title.Display = true;
+ barChartOptions.Plugins.Datalabels.Color = "white";
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
- {
- // pass the plugin name to enable the data labels
await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" });
- }
+
await base.OnAfterRenderAsync(firstRender);
}
}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor
index 86edb6e2..f0444399 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor
@@ -54,6 +54,23 @@
+
+
+ The Stack demo shows how to combine LineChartDataset.Stack with a stacked Y-axis to build a layered line or area chart.
+
+ How to use:
+
+
+ - Set
Options.Scales.Y.Stacked = true so values accumulate on the Y-axis.
+ - Assign the same
Stack value to each LineChartDataset that should contribute to the same stacked total.
+ - Optionally set
Fill or use FillToStackedValueBelow() to make each layer easier to read.
+ - Refer to the demo code below for a working example of stacked traffic series using shared stack IDs.
+
+
- - Enable data labels by setting
Options.Plugins.Datalabels.Display = true in your chart options.
- - Customize the label content, formatting, and position using the available plugin settings.
+ - Enable data labels by passing the
ChartDataLabels plugin when calling InitializeAsync: plugins: new[] { "ChartDataLabels" }.
+ - Customize the label content, formatting, and position using
Options.Plugins.Datalabels or per-dataset Datalabels settings.
- Bind your data and labels to the chart as usual.
- Refer to the demo code below for a working example and further configuration options.
@@ -72,7 +89,7 @@
-
+
The Tick Configuration demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_07_Stack.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_07_Stack.razor
new file mode 100644
index 00000000..f81fb84b
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_07_Stack.razor
@@ -0,0 +1,81 @@
+
+
+@code {
+ private const string TrafficStack = "traffic";
+
+ private LineChart lineChart = default!;
+ private LineChartOptions lineChartOptions = default!;
+ private ChartData chartData = default!;
+
+ protected override void OnInitialized()
+ {
+ var desktopColor = ColorUtility.CategoricalTwelveColors[0].ToColor();
+ var mobileColor = ColorUtility.CategoricalTwelveColors[1].ToColor();
+ var tabletColor = ColorUtility.CategoricalTwelveColors[2].ToColor();
+
+ chartData = new ChartData
+ {
+ Labels = new List { "January", "February", "March", "April", "May", "June" },
+ Datasets = new List
+ {
+ new LineChartDataset
+ {
+ Label = "Desktop",
+ Stack = TrafficStack,
+ Data = new List { 35, 38, 42, 46, 50, 53 },
+ BackgroundColor = desktopColor.ToRgbaString(0.35),
+ BorderColor = desktopColor.ToRgbString(),
+ BorderWidth = 2,
+ PointRadius = new List { 3 },
+ PointHoverRadius = new List { 5 },
+ Tension = 0.35,
+ }.FillToOrigin(),
+ new LineChartDataset
+ {
+ Label = "Mobile",
+ Stack = TrafficStack,
+ Data = new List { 22, 25, 29, 33, 36, 40 },
+ BackgroundColor = mobileColor.ToRgbaString(0.35),
+ BorderColor = mobileColor.ToRgbString(),
+ BorderWidth = 2,
+ PointRadius = new List { 3 },
+ PointHoverRadius = new List { 5 },
+ Tension = 0.35,
+ }.FillToStackedValueBelow(),
+ new LineChartDataset
+ {
+ Label = "Tablet",
+ Stack = TrafficStack,
+ Data = new List { 10, 12, 13, 15, 16, 18 },
+ BackgroundColor = tabletColor.ToRgbaString(0.35),
+ BorderColor = tabletColor.ToRgbString(),
+ BorderWidth = 2,
+ PointRadius = new List { 3 },
+ PointHoverRadius = new List { 5 },
+ Tension = 0.35,
+ }.FillToStackedValueBelow(),
+ },
+ };
+
+ lineChartOptions = new LineChartOptions
+ {
+ Responsive = true,
+ Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false },
+ };
+
+ lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Month", Display = true };
+ lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Sessions", Display = true };
+ lineChartOptions.Scales.Y.Stacked = true;
+
+ lineChartOptions.Plugins.Title!.Text = "Website sessions by device type";
+ lineChartOptions.Plugins.Title.Display = true;
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await lineChart.InitializeAsync(chartData, lineChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+}
\ No newline at end of file