Skip to content

Update BarChart and LineChart demos to enhance documentation and add stacked line chart example #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gvreddy04 merged 1 commit into from
May 22, 2026
Merged

Update BarChart and LineChart demos to enhance documentation and add stacked line chart example #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<DocsLink Href="@DemoRouteConstants.Docs_BarChart" />

<Prerequisites PageUrl="@pageUrl" />

Check warning on line 15 in BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Job 

Found markup element with unexpected name 'Prerequisites'. If this is intended to be a component, add a @using directive for its namespace.

Check warning on line 15 in BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Job 

Found markup element with unexpected name 'Prerequisites'. If this is intended to be a component, add a @using directive for its namespace.

<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
<Block>
Expand Down Expand Up @@ -105,12 +105,14 @@
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.
<br /><br />
<strong>How to use:</strong>
<ul>
<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>
<li>Add multiple datasets to your chart data to represent different series.</li>
<li>Enable data labels by configuring the chart's plugins, such as <code>Options.Plugins.Datalabels.Display = true</code>.</li>
<li>Customize the appearance and formatting of data labels as needed for your scenario.</li>
</ul>
<div class="content">
<ol>
<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>
<li>Add multiple datasets to your chart data to represent different series.</li>
<li>Enable data labels by passing the <code>ChartDataLabels</code> plugin when calling <code>InitializeAsync</code>: <code>plugins: new[] { "ChartDataLabels" }</code>.</li>
<li>Customize label styling with <code>Options.Plugins.Datalabels</code> or per-dataset <code>Datalabels</code> settings as needed.</li>
</ol>
</div>
Refer to the demo code below for a working example and further configuration options.
</Block>
<Demo Type="typeof(BarChart_Demo_04_Stacked_BarChart_with_Datalabels)" Tabs="true" />
Expand Down Expand Up @@ -170,7 +172,7 @@
<Demo Type="typeof(BarChart_Demo_07_Animations_A_Delay)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - DataSet level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - Dataset level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
<Block>
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.
<br /><br />
Expand Down
70 changes: 34 additions & 36 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,44 @@
{
var colors = ColorUtility.CategoricalTwelveColors;

var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
var datasets = new List<IChartDataset>();

var dataset1 = new BarChartDataset()
{
Label = "Windows",
Data = new List<double?> { 28000, 8000, 2000, 17000 },
BackgroundColor = new List<string> { colors[0] },
BorderColor = new List<string> { colors[0] },
BorderWidth = new List<double> { 0 },
};
datasets.Add(dataset1);

var dataset2 = new BarChartDataset()
chartData = new ChartData
{
Label = "macOS",
Data = new List<double?> { 8000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[1] },
BorderColor = new List<string> { colors[1] },
BorderWidth = new List<double> { 0 },
Labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" },
Datasets = new List<IChartDataset>
{
new BarChartDataset
{
Label = "Windows",
Data = new List<double?> { 28000, 8000, 2000, 17000 },
BackgroundColor = new List<string> { colors[0] },
BorderColor = new List<string> { colors[0] },
BorderWidth = new List<double> { 0 },
},
new BarChartDataset
{
Label = "macOS",
Data = new List<double?> { 8000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[1] },
BorderColor = new List<string> { colors[1] },
BorderWidth = new List<double> { 0 },
},
new BarChartDataset
{
Label = "Other",
Data = new List<double?> { 28000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[2] },
BorderColor = new List<string> { colors[2] },
BorderWidth = new List<double> { 0 },
},
},
};
datasets.Add(dataset2);

var dataset3 = new BarChartDataset()
barChartOptions = new BarChartOptions
{
Label = "Other",
Data = new List<double?> { 28000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[2] },
BorderColor = new List<string> { colors[2] },
BorderWidth = new List<double> { 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 };
Expand All @@ -62,9 +61,8 @@
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await barChart.InitializeAsync(chartData, barChartOptions);
}

await base.OnAfterRenderAsync(firstRender);
}
}
77 changes: 35 additions & 42 deletions ...tJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,45 @@
protected override void OnInitialized()
{
var colors = ColorUtility.CategoricalTwelveColors;

var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
var datasets = new List<IChartDataset>();

var dataset1 = new BarChartDataset()
{
Label = "Windows",
Data = new List<double?> { 28000, 8000, 2000, 17000 },
BackgroundColor = new List<string> { colors[0] },
BorderColor = new List<string> { colors[0] },
BorderWidth = new List<double> { 0 },
};
datasets.Add(dataset1);

var dataset2 = new BarChartDataset()
{
Label = "macOS",
Data = new List<double?> { 8000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[1] },
BorderColor = new List<string> { colors[1] },
BorderWidth = new List<double> { 0 },
};
datasets.Add(dataset2);

var dataset3 = new BarChartDataset()
chartData = new ChartData
{
Label = "Other",
Data = new List<double?> { 28000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[2] },
BorderColor = new List<string> { colors[2] },
BorderWidth = new List<double> { 0 },
Labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" },
Datasets = new List<IChartDataset>
{
new BarChartDataset
{
Label = "Windows",
Data = new List<double?> { 28000, 8000, 2000, 17000 },
BackgroundColor = new List<string> { colors[0] },
BorderColor = new List<string> { colors[0] },
BorderWidth = new List<double> { 0 },
},
new BarChartDataset
{
Label = "macOS",
Data = new List<double?> { 8000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[1] },
BorderColor = new List<string> { colors[1] },
BorderWidth = new List<double> { 0 },
},
new BarChartDataset
{
Label = "Other",
Data = new List<double?> { 28000, 10000, 14000, 8000 },
BackgroundColor = new List<string> { colors[2] },
BorderColor = new List<string> { colors[2] },
BorderWidth = new List<double> { 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 };

Expand All @@ -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);
}
}
23 changes: 20 additions & 3 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<DocsLink Href="@DemoRouteConstants.Docs_LineChart" />

<Prerequisites PageUrl="@pageUrl" />

Check warning on line 14 in BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Job 

Found markup element with unexpected name 'Prerequisites'. If this is intended to be a component, add a @using directive for its namespace.

Check warning on line 14 in BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Job 

Found markup element with unexpected name 'Prerequisites'. If this is intended to be a component, add a @using directive for its namespace.

<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
<Block>
Expand Down Expand Up @@ -54,15 +54,32 @@
<Demo Type="typeof(LineChart_Demo_06_Combo_Bar_Line)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked line chart" PageUrl="@pageUrl" Link="stacked-line-chart">
<Block>
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.
<br /><br />
<strong>How to use:</strong>
<div class="content">
<ol>
<li>Set <code>Options.Scales.Y.Stacked = true</code> so values accumulate on the Y-axis.</li>
<li>Assign the same <code>Stack</code> value to each <code>LineChartDataset</code> that should contribute to the same stacked total.</li>
<li>Optionally set <code>Fill</code> or use <code>FillToStackedValueBelow()</code> to make each layer easier to read.</li>
<li>Refer to the demo code below for a working example of stacked traffic series using shared stack IDs.</li>
</ol>
</div>
</Block>
<Demo Type="typeof(LineChart_Demo_07_Stack)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels">
<Block>
The <strong>Line Chart</strong> component supports data labels, allowing you to display values directly on each data point in the chart.
<br /><br />
<strong>How to use:</strong>
<div class="content">
<ol>
<li>Enable data labels by setting <code>Options.Plugins.Datalabels.Display = true</code> in your chart options.</li>
<li>Customize the label content, formatting, and position using the available plugin settings.</li>
<li>Enable data labels by passing the <code>ChartDataLabels</code> plugin when calling <code>InitializeAsync</code>: <code>plugins: new[] { "ChartDataLabels" }</code>.</li>
<li>Customize the label content, formatting, and position using <code>Options.Plugins.Datalabels</code> or per-dataset <code>Datalabels</code> settings.</li>
<li>Bind your data and labels to the chart as usual.</li>
<li>Refer to the demo code below for a working example and further configuration options.</li>
</ol>
Expand All @@ -72,7 +89,7 @@
<Demo Type="typeof(LineChart_Demo_02_Datalabels)" Tabs="true" />
</Section>

<Section Class="p-0" Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration">
<Section Class="p-0" Size="HeadingSize.H4" Name="Tick configuration" PageUrl="@pageUrl" Link="tick-configuration">
<Block>
The <strong>Tick Configuration</strong> demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.
<br /><br />
Expand Down
81 changes: 81 additions & 0 deletions BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_07_Stack.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<LineChart @ref="lineChart" Width="700" />

@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<string> { "January", "February", "March", "April", "May", "June" },
Datasets = new List<IChartDataset>
{
new LineChartDataset
{
Label = "Desktop",
Stack = TrafficStack,
Data = new List<double?> { 35, 38, 42, 46, 50, 53 },
BackgroundColor = desktopColor.ToRgbaString(0.35),
BorderColor = desktopColor.ToRgbString(),
BorderWidth = 2,
PointRadius = new List<double> { 3 },
PointHoverRadius = new List<double> { 5 },
Tension = 0.35,
}.FillToOrigin(),
new LineChartDataset
{
Label = "Mobile",
Stack = TrafficStack,
Data = new List<double?> { 22, 25, 29, 33, 36, 40 },
BackgroundColor = mobileColor.ToRgbaString(0.35),
BorderColor = mobileColor.ToRgbString(),
BorderWidth = 2,
PointRadius = new List<double> { 3 },
PointHoverRadius = new List<double> { 5 },
Tension = 0.35,
}.FillToStackedValueBelow(),
new LineChartDataset
{
Label = "Tablet",
Stack = TrafficStack,
Data = new List<double?> { 10, 12, 13, 15, 16, 18 },
BackgroundColor = tabletColor.ToRgbaString(0.35),
BorderColor = tabletColor.ToRgbString(),
BorderWidth = 2,
PointRadius = new List<double> { 3 },
PointHoverRadius = new List<double> { 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);
}
}
Loading