Skip to content

chartjs updates #1284

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

Open
gvreddy04 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

chartjs updates #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
04301d9
feat: Add Bubble Chart component and related features
gvreddy04 May 13, 2026
2dd7445
feat: Enhance chart documentation with new features and examples
gvreddy04 May 13, 2026
b4b0c55
feat: Add versioning and new properties to chart datasets and options
gvreddy04 May 13, 2026
f4dd312
feat: Enhance chart options and plugins with new properties and descr…
gvreddy04 May 13, 2026
db33834
Add versioning and documentation to chart datasets and options
gvreddy04 May 13, 2026
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
13 changes: 7 additions & 6 deletions BlazorBootstrap.Demo.RCL/Components/Layout/DemosMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,13 @@ internal override IEnumerable<NavItem> GetNavItems()

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

new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
new (){ Id = "700", Text = "Breadcrumb Service", Href = DemoRouteConstants.Demos_URL_BreadcrumbService, IconName = IconName.SegmentedNav, ParentId = "7" },
Expand Down
13 changes: 7 additions & 6 deletions BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,13 @@ internal override IEnumerable<NavItem> GetNavItems()

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

new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
new (){ Id = "700", Text = "Breadcrumb Service", Href = DemoRouteConstants.Docs_URL_BreadcrumbService, IconName = IconName.SegmentedNav, ParentId = "7" },
Expand Down
13 changes: 7 additions & 6 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,13 @@ internal override IEnumerable<NavItem> GetNavItems()

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

new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
new (){ Id = "700", Text = "Modal Service", Href = DemoRouteConstants.Demos_URL_ModalService, IconName = IconName.WindowStack, ParentId = "7" },
Expand Down
30 changes: 30 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,18 @@
<Section Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" Link="stacked-bar-chart" />
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Grouped stacks" PageUrl="@pageUrl" Link="grouped-stacks" />
<div class="my-3">
Set the <code>Stack</code> property on each dataset to group bars into separate stacked series within the same chart.
</div>
<Demo Type="typeof(BarChart_Demo_08_Grouped_Stacks)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Border radius" PageUrl="@pageUrl" Link="border-radius" />
<div class="my-3">
Use <code>BorderRadius</code> on each dataset to soften bar edges and create rounded columns.
</div>
<Demo Type="typeof(BarChart_Demo_09_Border_Radius)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale" />
<div class="my-3">
By default, the chart is using the default locale of the platform on which it is running.
Expand All @@ -41,6 +53,24 @@
<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
<Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Animation delay" PageUrl="@pageUrl" Link="animation-delay" />
<div class="my-3">
Configure chart-level animation timing through <code>ChartOptions.Animation</code> to delay or pace the initial render.
</div>
<Demo Type="typeof(BarChart_Demo_10_Animation_Delay)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Dataset animation" PageUrl="@pageUrl" Link="dataset-animation" />
<div class="my-3">
You can configure animations globally on the chart options or per dataset to stagger how each series enters the chart.
</div>
<Demo Type="typeof(BarChart_Demo_07_Dataset_Animation)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Combo bar/line" PageUrl="@pageUrl" Link="combo-bar-line" />
<div class="my-3">
Mix <code>BarChartDataset</code> and <code>LineChartDataset</code> in the same chart to combine columns with a trend line.
</div>
<Demo Type="typeof(BarChart_Demo_11_Combo_Bar_Line)" Tabs="true" />

<Section Size="HeadingSize.H4" Name="Click event" PageUrl="@pageUrl" Link="click-event" />
<Demo Type="typeof(BarChart_Demo_06_Click_Event)" Tabs="true" />

Expand Down
2 changes: 1 addition & 1 deletion ...mo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

barChartOptions = new BarChartOptions();
barChartOptions.Responsive = true;
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
barChartOptions.IndexAxis = "y";

barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
Expand Down
2 changes: 1 addition & 1 deletion ....Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

barChartOptions = new();
barChartOptions.Responsive = true;
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
barChartOptions.IndexAxis = "y";

barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
Expand Down
2 changes: 1 addition & 1 deletion ...rBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
barChartOptions = new();
barChartOptions.Locale = "de-DE";
barChartOptions.Responsive = true;
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
barChartOptions.IndexAxis = "y";

barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
Expand Down
2 changes: 1 addition & 1 deletion ...ents/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

barChartOptions = new();
barChartOptions.Responsive = true;
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y };
barChartOptions.IndexAxis = "y";

barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
Expand Down
61 changes: 61 additions & 0 deletions ...Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
private BarChart barChart = default!;
private BarChartOptions barChartOptions = default!;
private ChartData chartData = default!;

protected override void OnInitialized()
{
var colors = ColorUtility.CategoricalTwelveColors;

chartData = new ChartData
{
Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
Datasets = new List<IChartDataset>
{
new BarChartDataset
{
Label = "Product A",
Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
BackgroundColor = new List<string> { colors[0].ToColor().ToRgbString() },
BorderColor = new List<string> { colors[0].ToColor().ToRgbString() },
BorderWidth = new List<double> { 0 },
Animation = new ChartAnimation { Delay = 0, Duration = 1200 }
},
new BarChartDataset
{
Label = "Product B",
Data = new List<double?> { 28, 48, 40, 19, 86, 27 },
BackgroundColor = new List<string> { colors[1].ToColor().ToRgbString() },
BorderColor = new List<string> { colors[1].ToColor().ToRgbString() },
BorderWidth = new List<double> { 0 },
Animation = new ChartAnimation { Delay = 250, Duration = 1200 }
},
new BarChartDataset
{
Label = "Product C",
Data = new List<double?> { 18, 38, 50, 29, 66, 47 },
BackgroundColor = new List<string> { colors[2].ToColor().ToRgbString() },
BorderColor = new List<string> { colors[2].ToColor().ToRgbString() },
BorderWidth = new List<double> { 0 },
Animation = new ChartAnimation { Delay = 500, Duration = 1200 }
}
}
};

barChartOptions = new BarChartOptions
{
Responsive = true,
Animation = new ChartAnimation { Duration = 1200, Easing = "easeOutQuart" }
};
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await barChart.InitializeAsync(chartData, barChartOptions);

await base.OnAfterRenderAsync(firstRender);
}
}
77 changes: 77 additions & 0 deletions ...ap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_08_Grouped_Stacks.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<BarChart @ref="barChart" Width="500" Height="300" />

@code {
private BarChart barChart = default!;
private BarChartOptions barChartOptions = default!;
private ChartData chartData = default!;

protected override void OnInitialized()
{
var colors = ColorUtility.CategoricalTwelveColors;

chartData = new ChartData
{
Labels = new List<string> { "Q1", "Q2", "Q3", "Q4" },
Datasets = new List<IChartDataset>
{
new BarChartDataset
{
Label = "North Budget",
Data = new List<double?> { 42, 47, 44, 50 },
BackgroundColor = new List<string> { colors[0] },
BorderColor = new List<string> { colors[0] },
BorderWidth = new List<double> { 0 },
Stack = "North"
},
new BarChartDataset
{
Label = "North Actual",
Data = new List<double?> { 39, 45, 48, 53 },
BackgroundColor = new List<string> { colors[1] },
BorderColor = new List<string> { colors[1] },
BorderWidth = new List<double> { 0 },
Stack = "North"
},
new BarChartDataset
{
Label = "South Budget",
Data = new List<double?> { 35, 38, 41, 46 },
BackgroundColor = new List<string> { colors[4] },
BorderColor = new List<string> { colors[4] },
BorderWidth = new List<double> { 0 },
Stack = "South"
},
new BarChartDataset
{
Label = "South Actual",
Data = new List<double?> { 33, 40, 43, 45 },
BackgroundColor = new List<string> { colors[5] },
BorderColor = new List<string> { colors[5] },
BorderWidth = new List<double> { 0 },
Stack = "South"
}
}
};

barChartOptions = new BarChartOptions
{
Responsive = true,
Interaction = new Interaction { Mode = InteractionMode.Index }
};

barChartOptions.Scales.X!.Stacked = true;
barChartOptions.Scales.Y!.Stacked = true;
barChartOptions.Scales.X.Title = new ChartAxesTitle { Text = "Quarter", Display = true };
barChartOptions.Scales.Y.Title = new ChartAxesTitle { Text = "Revenue (in millions)", Display = true };
barChartOptions.Plugins.Title!.Text = "Grouped stacked revenue by region";
barChartOptions.Plugins.Title.Display = true;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await barChart.InitializeAsync(chartData, barChartOptions);

await base.OnAfterRenderAsync(firstRender);
}
}
Loading
Loading