Blazor Charts with BlazorExpress.ChartJS
Chart components are no longer included in the BlazorBootstrap package. They are developed and released separately as BlazorExpress.ChartJS, a dedicated Blazor component library built on Chart.js.
When upgrading from a BlazorBootstrap version that included charts, add the BlazorExpress.ChartJS package and namespace, add its browser scripts, and update chart code to the dedicated package API. Remove references to the former BlazorBootstrap chart types and window.blazorChart interop.
Install the package
dotnet add package BlazorExpress.ChartJS --version 1.2.4
Add the namespace to the _Imports.razor used by your chart pages:
@using BlazorExpress.ChartJS
Add browser scripts
Load these scripts from the host page after the Blazor framework script and in the order shown. The data-labels plugin is needed only by charts that use data labels.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>
Documentation and original demos
Use the dedicated project as the source of truth for current chart APIs and examples:
- BlazorExpress.ChartJS website and documentation
- BlazorExpress.ChartJS GitHub repository
- Original BlazorExpress.ChartJS demos
We recommend checking the original demos before adapting advanced examples.
Click events in 1.2.4
BlazorExpress.ChartJS 1.2.4 adds chart item click callbacks for every supported chart family. Set the package-provided OnClick callback to receive ChartClickEventArgs, which includes the selected dataset index and label, data-item index and label, and raw selected value.
Use the official documentation and original demos below for the current click-event examples and API details.
Chart types
| Chart | Official documentation | Original demo |
|---|---|---|
| Bar | Documentation | Demo |
| Bubble | Documentation | Demo |
| Doughnut | Documentation | Demo |
| Line | Documentation | Demo |
| Pie | Documentation | Demo |
| Polar Area | Documentation | Demo |
| Radar | Documentation | Demo |
| Scatter | Documentation | Demo |