Skip to content

Commit 97d87c7

Browse files
gvreddy04gvreddy04
authored
chartjs updates (#1284)
* feat: Add Bubble Chart component and related features - Introduced BubbleChart component for visualizing three dimensions of data. - Added BubbleChartOptions for configuration including responsiveness and interaction settings. - Implemented BubbleChartDataset and BubbleChartDataPoint for dataset management. - Enhanced documentation for Bubble Chart with examples and key types. - Updated existing chart components to support new animation and stacking features. - Added demo pages for Bubble Chart showcasing dynamic updates and interaction options. * feat: Enhance chart documentation with new features and examples * feat: Add versioning and new properties to chart datasets and options - Added [AddedVersion] attributes to various properties in LineChartDataset, PieChartDataset, PolarAreaChartDataset, RadarChartDataset, ScatterChartDataset, and their respective data labels classes to indicate version changes. - Introduced new properties in chart options classes such as BarChartOptions, BubbleChartOptions, DoughnutChartOptions, LineChartOptions, PieChartOptions, PolarAreaChartOptions, RadarChartOptions, and ScatterChartOptions, along with version annotations. - Updated documentation for bar, line, and scatter charts to reflect the correct version numbers for properties related to animations, axes, and interactions. * feat: Enhance chart options and plugins with new properties and descriptions - Added plugin configuration properties to Doughnut, Line, Pie, Polar Area, and Scatter chart options. - Introduced interaction and layout configurations for Line and Scatter charts. - Enhanced Bar, Bubble, Doughnut, Line, Pie, Polar Area, and Scatter chart plugins with data label configurations. - Updated ChartPlugins class with detailed descriptions for legend, title, and tooltip configurations. - Introduced RGB and RGBA color representation records with documentation. * Add versioning and documentation to chart datasets and options - Added [AddedVersion] attributes to various properties in PieChartDataset, PolarAreaChartDataset, RadarChartDataset, ScatterChartDataset to indicate versioning. - Enhanced documentation with XML comments for clarity on chart options classes including BarChartOptions, BubbleChartOptions, DoughnutChartOptions, LineChartOptions, PieChartOptions, PolarAreaChartOptions, RadarChartOptions, and ScatterChartOptions. - Ensured consistent use of [JsonIgnore] and [DefaultValue] attributes across chart options and datasets for better serialization and default behavior. * Refactor chart dataset and options documentation - Updated XML documentation comments to use "Gets or sets" for property descriptions across various chart dataset classes (ChartDataset, LineChartDataset, RadarChartDataset, ScatterChartDataset). - Added [AddedVersion("1.0.0")] attribute to new properties in ChartDataset and ChartOptions classes to indicate versioning. - Enhanced ChartOptions and ChartPlugins classes with additional properties and versioning attributes to improve configuration options and documentation clarity. - Updated tooltip configuration in ChartPlugins to include new properties and versioning for better customization. * feat: Update versioning for FillToDataset methods and Fill property in LineChartDataset
1 parent 8ef099d commit 97d87c7

98 files changed

Lines changed: 3683 additions & 135 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,13 @@ internal override IEnumerable<NavItem> GetNavItems()
9393

9494
new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
9595
new (){ Id = "600", Text = "Bar Chart", Href = DemoRouteConstants.Demos_URL_BarChart, IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },
96-
new (){ Id = "601", Text = "Doughnut Chart", Href = DemoRouteConstants.Demos_URL_DoughnutChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
97-
new (){ Id = "602", Text = "Line Chart", Href = DemoRouteConstants.Demos_URL_LineChart, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
98-
new (){ Id = "603", Text = "Pie Chart", Href = DemoRouteConstants.Demos_URL_PieChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
99-
new (){ Id = "604", Text = "Polar Area Chart", Href = DemoRouteConstants.Demos_URL_PolarAreaChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
100-
new (){ Id = "605", Text = "Radar Chart", Href = DemoRouteConstants.Demos_URL_RadarChart, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
101-
new (){ Id = "605", Text = "Scatter Chart", Href = DemoRouteConstants.Demos_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
96+
new (){ Id = "601", Text = "Bubble Chart", Href = DemoRouteConstants.Demos_URL_BubbleChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
97+
new (){ Id = "602", Text = "Doughnut Chart", Href = DemoRouteConstants.Demos_URL_DoughnutChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
98+
new (){ Id = "603", Text = "Line Chart", Href = DemoRouteConstants.Demos_URL_LineChart, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
99+
new (){ Id = "604", Text = "Pie Chart", Href = DemoRouteConstants.Demos_URL_PieChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
100+
new (){ Id = "605", Text = "Polar Area Chart", Href = DemoRouteConstants.Demos_URL_PolarAreaChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
101+
new (){ Id = "606", Text = "Radar Chart", Href = DemoRouteConstants.Demos_URL_RadarChart, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
102+
new (){ Id = "607", Text = "Scatter Chart", Href = DemoRouteConstants.Demos_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
102103

103104
new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
104105
new (){ Id = "700", Text = "Breadcrumb Service", Href = DemoRouteConstants.Demos_URL_BreadcrumbService, IconName = IconName.SegmentedNav, ParentId = "7" },

‎BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,13 @@ internal override IEnumerable<NavItem> GetNavItems()
6969

7070
new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
7171
new (){ Id = "600", Text = "Bar Chart", Href = DemoRouteConstants.Docs_URL_BarChart, IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },
72-
new (){ Id = "601", Text = "Doughnut Chart", Href = DemoRouteConstants.Docs_URL_DoughnutChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
73-
new (){ Id = "602", Text = "Line Chart", Href = DemoRouteConstants.Docs_URL_LineChart, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
74-
new (){ Id = "603", Text = "Pie Chart", Href = DemoRouteConstants.Docs_URL_PieChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
75-
new (){ Id = "604", Text = "Polar Area Chart", Href = DemoRouteConstants.Docs_URL_PolarAreaChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
76-
new (){ Id = "605", Text = "Radar Chart", Href = DemoRouteConstants.Docs_URL_RadarChart, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
77-
new (){ Id = "605", Text = "Scatter Chart", Href = DemoRouteConstants.Docs_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
72+
new (){ Id = "601", Text = "Bubble Chart", Href = DemoRouteConstants.Docs_URL_BubbleChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
73+
new (){ Id = "602", Text = "Doughnut Chart", Href = DemoRouteConstants.Docs_URL_DoughnutChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
74+
new (){ Id = "603", Text = "Line Chart", Href = DemoRouteConstants.Docs_URL_LineChart, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
75+
new (){ Id = "604", Text = "Pie Chart", Href = DemoRouteConstants.Docs_URL_PieChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
76+
new (){ Id = "605", Text = "Polar Area Chart", Href = DemoRouteConstants.Docs_URL_PolarAreaChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
77+
new (){ Id = "606", Text = "Radar Chart", Href = DemoRouteConstants.Docs_URL_RadarChart, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
78+
new (){ Id = "607", Text = "Scatter Chart", Href = DemoRouteConstants.Docs_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
7879

7980
new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
8081
new (){ Id = "700", Text = "Breadcrumb Service", Href = DemoRouteConstants.Docs_URL_BreadcrumbService, IconName = IconName.SegmentedNav, ParentId = "7" },

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,13 @@ internal override IEnumerable<NavItem> GetNavItems()
9292

9393
new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
9494
new (){ Id = "600", Text = "Bar Chart", Href = DemoRouteConstants.Demos_URL_BarChart, IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },
95-
new (){ Id = "601", Text = "Doughnut Chart", Href = DemoRouteConstants.Demos_URL_DoughnutChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
96-
new (){ Id = "602", Text = "Line Chart", Href = DemoRouteConstants.Demos_URL_LineChart, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
97-
new (){ Id = "603", Text = "Pie Chart", Href = DemoRouteConstants.Demos_URL_PieChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
98-
new (){ Id = "604", Text = "Polar Area Chart", Href = DemoRouteConstants.Demos_URL_PolarAreaChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
99-
new (){ Id = "605", Text = "Radar Chart", Href = DemoRouteConstants.Demos_URL_RadarChart, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
100-
new (){ Id = "605", Text = "Scatter Chart", Href = DemoRouteConstants.Demos_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
95+
new (){ Id = "601", Text = "Bubble Chart", Href = DemoRouteConstants.Demos_URL_BubbleChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
96+
new (){ Id = "602", Text = "Doughnut Chart", Href = DemoRouteConstants.Demos_URL_DoughnutChart, IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All },
97+
new (){ Id = "603", Text = "Line Chart", Href = DemoRouteConstants.Demos_URL_LineChart, IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
98+
new (){ Id = "604", Text = "Pie Chart", Href = DemoRouteConstants.Demos_URL_PieChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
99+
new (){ Id = "605", Text = "Polar Area Chart", Href = DemoRouteConstants.Demos_URL_PolarAreaChart, IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
100+
new (){ Id = "606", Text = "Radar Chart", Href = DemoRouteConstants.Demos_URL_RadarChart, IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
101+
new (){ Id = "607", Text = "Scatter Chart", Href = DemoRouteConstants.Demos_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
101102

102103
new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
103104
new (){ Id = "700", Text = "Modal Service", Href = DemoRouteConstants.Demos_URL_ModalService, IconName = IconName.WindowStack, ParentId = "7" },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,18 @@
3131
<Section Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" Link="stacked-bar-chart" />
3232
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
3333

34+
<Section Size="HeadingSize.H4" Name="Grouped stacks" PageUrl="@pageUrl" Link="grouped-stacks" />
35+
<div class="my-3">
36+
Set the <code>Stack</code> property on each dataset to group bars into separate stacked series within the same chart.
37+
</div>
38+
<Demo Type="typeof(BarChart_Demo_08_Grouped_Stacks)" Tabs="true" />
39+
40+
<Section Size="HeadingSize.H4" Name="Border radius" PageUrl="@pageUrl" Link="border-radius" />
41+
<div class="my-3">
42+
Use <code>BorderRadius</code> on each dataset to soften bar edges and create rounded columns.
43+
</div>
44+
<Demo Type="typeof(BarChart_Demo_09_Border_Radius)" Tabs="true" />
45+
3446
<Section Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale" />
3547
<div class="my-3">
3648
By default, the chart is using the default locale of the platform on which it is running.
@@ -41,6 +53,24 @@
4153
<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
4254
<Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
4355

56+
<Section Size="HeadingSize.H4" Name="Animation delay" PageUrl="@pageUrl" Link="animation-delay" />
57+
<div class="my-3">
58+
Configure chart-level animation timing through <code>ChartOptions.Animation</code> to delay or pace the initial render.
59+
</div>
60+
<Demo Type="typeof(BarChart_Demo_10_Animation_Delay)" Tabs="true" />
61+
62+
<Section Size="HeadingSize.H4" Name="Dataset animation" PageUrl="@pageUrl" Link="dataset-animation" />
63+
<div class="my-3">
64+
You can configure animations globally on the chart options or per dataset to stagger how each series enters the chart.
65+
</div>
66+
<Demo Type="typeof(BarChart_Demo_07_Dataset_Animation)" Tabs="true" />
67+
68+
<Section Size="HeadingSize.H4" Name="Combo bar/line" PageUrl="@pageUrl" Link="combo-bar-line" />
69+
<div class="my-3">
70+
Mix <code>BarChartDataset</code> and <code>LineChartDataset</code> in the same chart to combine columns with a trend line.
71+
</div>
72+
<Demo Type="typeof(BarChart_Demo_11_Combo_Bar_Line)" Tabs="true" />
73+
4474
<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event" />
4575
<Demo Type="typeof(BarChart_Demo_06_Click_Event)" Tabs="true" />
4676

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
barChartOptions = new BarChartOptions();
2525
barChartOptions.Responsive = true;
26-
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
26+
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
2727
barChartOptions.IndexAxis = "y";
2828

2929
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646

4747
barChartOptions = new();
4848
barChartOptions.Responsive = true;
49-
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
49+
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
5050
barChartOptions.IndexAxis = "y";
5151

5252
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
barChartOptions = new();
4848
barChartOptions.Locale = "de-DE";
4949
barChartOptions.Responsive = true;
50-
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
50+
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
5151
barChartOptions.IndexAxis = "y";
5252

5353
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050

5151
barChartOptions = new();
5252
barChartOptions.Responsive = true;
53-
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
53+
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
5454
barChartOptions.IndexAxis = "y";
5555

5656
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<BarChart @ref="barChart" Width="500" Height="300" />
2+
3+
@code {
4+
private BarChart barChart = default!;
5+
private BarChartOptions barChartOptions = default!;
6+
private ChartData chartData = default!;
7+
8+
protected override void OnInitialized()
9+
{
10+
var colors = ColorUtility.CategoricalTwelveColors;
11+
12+
chartData = new ChartData
13+
{
14+
Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
15+
Datasets = new List<IChartDataset>
16+
{
17+
new BarChartDataset
18+
{
19+
Label = "Product A",
20+
Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
21+
BackgroundColor = new List<string> { colors[0].ToColor().ToRgbString() },
22+
BorderColor = new List<string> { colors[0].ToColor().ToRgbString() },
23+
BorderWidth = new List<double> { 0 },
24+
Animation = new ChartAnimation { Delay = 0, Duration = 1200 }
25+
},
26+
new BarChartDataset
27+
{
28+
Label = "Product B",
29+
Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
30+
BackgroundColor = new List<string> { colors[1].ToColor().ToRgbString() },
31+
BorderColor = new List<string> { colors[1].ToColor().ToRgbString() },
32+
BorderWidth = new List<double> { 0 },
33+
Animation = new ChartAnimation { Delay = 250, Duration = 1200 }
34+
},
35+
new BarChartDataset
36+
{
37+
Label = "Product C",
38+
Data = new List<double?> { 18, 38, 50, 29, 66, 47 },
39+
BackgroundColor = new List<string> { colors[2].ToColor().ToRgbString() },
40+
BorderColor = new List<string> { colors[2].ToColor().ToRgbString() },
41+
BorderWidth = new List<double> { 0 },
42+
Animation = new ChartAnimation { Delay = 500, Duration = 1200 }
43+
}
44+
}
45+
};
46+
47+
barChartOptions = new BarChartOptions
48+
{
49+
Responsive = true,
50+
Animation = new ChartAnimation { Duration = 1200, Easing = "easeOutQuart" }
51+
};
52+
}
53+
54+
protected override async Task OnAfterRenderAsync(bool firstRender)
55+
{
56+
if (firstRender)
57+
await barChart.InitializeAsync(chartData, barChartOptions);
58+
59+
await base.OnAfterRenderAsync(firstRender);
60+
}
61+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_08_Grouped_Stacks.razor‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<BarChart @ref="barChart" Width="500" Height="300" />
2+
3+
@code {
4+
private BarChart barChart = default!;
5+
private BarChartOptions barChartOptions = default!;
6+
private ChartData chartData = default!;
7+
8+
protected override void OnInitialized()
9+
{
10+
var colors = ColorUtility.CategoricalTwelveColors;
11+
12+
chartData = new ChartData
13+
{
14+
Labels = new List<string> { "Q1", "Q2", "Q3", "Q4" },
15+
Datasets = new List<IChartDataset>
16+
{
17+
new BarChartDataset
18+
{
19+
Label = "North Budget",
20+
Data = new List<double?> { 42, 47, 44, 50 },
21+
BackgroundColor = new List<string> { colors[0] },
22+
BorderColor = new List<string> { colors[0] },
23+
BorderWidth = new List<double> { 0 },
24+
Stack = "North"
25+
},
26+
new BarChartDataset
27+
{
28+
Label = "North Actual",
29+
Data = new List<double?> { 39, 45, 48, 53 },
30+
BackgroundColor = new List<string> { colors[1] },
31+
BorderColor = new List<string> { colors[1] },
32+
BorderWidth = new List<double> { 0 },
33+
Stack = "North"
34+
},
35+
new BarChartDataset
36+
{
37+
Label = "South Budget",
38+
Data = new List<double?> { 35, 38, 41, 46 },
39+
BackgroundColor = new List<string> { colors[4] },
40+
BorderColor = new List<string> { colors[4] },
41+
BorderWidth = new List<double> { 0 },
42+
Stack = "South"
43+
},
44+
new BarChartDataset
45+
{
46+
Label = "South Actual",
47+
Data = new List<double?> { 33, 40, 43, 45 },
48+
BackgroundColor = new List<string> { colors[5] },
49+
BorderColor = new List<string> { colors[5] },
50+
BorderWidth = new List<double> { 0 },
51+
Stack = "South"
52+
}
53+
}
54+
};
55+
56+
barChartOptions = new BarChartOptions
57+
{
58+
Responsive = true,
59+
Interaction = new Interaction { Mode = InteractionMode.Index }
60+
};
61+
62+
barChartOptions.Scales.X!.Stacked = true;
63+
barChartOptions.Scales.Y!.Stacked = true;
64+
barChartOptions.Scales.X.Title = new ChartAxesTitle { Text = "Quarter", Display = true };
65+
barChartOptions.Scales.Y.Title = new ChartAxesTitle { Text = "Revenue (in millions)", Display = true };
66+
barChartOptions.Plugins.Title!.Text = "Grouped stacked revenue by region";
67+
barChartOptions.Plugins.Title.Display = true;
68+
}
69+
70+
protected override async Task OnAfterRenderAsync(bool firstRender)
71+
{
72+
if (firstRender)
73+
await barChart.InitializeAsync(chartData, barChartOptions);
74+
75+
await base.OnAfterRenderAsync(firstRender);
76+
}
77+
}

0 commit comments

Comments
 (0)