Blazor Charts

BlazorExpress.ChartJS provides chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.

Blazor Charts Example #

<BarChart @ref="barChart" Class="mb-4" />
<LineChart @ref="lineChart" />

@code {
    private BarChart barChart = default!;
    private LineChart lineChart = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await RenderManhattanAsync();
            await RenderWormAsync();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RenderManhattanAsync()
    {
        var data = new ChartData
            {
                Labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
                Datasets = new List<IChartDataset>()
                {
                    new BarChartDataset()
                    {
                        Label = "India",
                        Data = new List<double?>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
                        BackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
                        CategoryPercentage = 0.8,
                        BarPercentage = 1,
                    },
                    new BarChartDataset()
                    {
                        Label = "England",
                        Data = new List<double?>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
                        BackgroundColor = new List<string> { "rgb(255, 166, 0)" },
                        CategoryPercentage = 0.8,
                        BarPercentage = 1,
                    }
                }
            };

        var options = new BarChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title!.Text = "MANHATTAN";
        options.Plugins.Title.Display = true;
        options.Plugins.Title.Font = new ChartFont { Size = 20 };

        options.Responsive = true;

        options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
        options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };

        await barChart.InitializeAsync(data, options);
    }

    private async Task RenderWormAsync()
    {
        var data = new ChartData
            {
                Labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
                Datasets = new List<IChartDataset>()
                {
                    new LineChartDataset()
                    {
                        Label = "India",
                        Data = new List<double?>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
                        BackgroundColor = "rgb(88, 80, 141)",
                        BorderColor = "rgb(88, 80, 141)",
                        BorderWidth = 2,
                        HoverBorderWidth = 4,
                        //PointBackgroundColor = "rgb(88, 80, 141)",
                        //PointBorderColor = "rgb(88, 80, 141)",
                        //PointRadius = 0, // hide points
                        //PointHoverRadius = 4,
                    },
                    new LineChartDataset()
                    {
                        Label = "England",
                        Data = new List<double?>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
                        BackgroundColor = "rgb(255, 166, 0)",
                        BorderColor = "rgb(255, 166, 0)",
                        BorderWidth = 2,
                        HoverBorderWidth = 4,
                        // PointBackgroundColor = "rgb(255, 166, 0)",
                        // PointBorderColor = "rgb(255, 166, 0)",
                        // PointRadius = 0, // hide points
                        // PointHoverRadius = 4,
                    }
                }
            };

        var options = new LineChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title!.Text = "WORM";
        options.Plugins.Title.Display = true;
        options.Plugins.Title.Font = new ChartFont { Size = 20 };

        options.Responsive = true;

        options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
        options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };

        await lineChart.InitializeAsync(data, options);
    }
}

Chart Types #

At this moment we are supporting eight blazor chart types.

INFO

BarChart and LineChart now support mixed bar/line datasets, and BubbleChart is available alongside the rest of the chart gallery.

Chart Components — Dedicated Library

Chart components have been moved to the dedicated BlazorExpress.ChartJS library to support independent feature additions and easier maintenance. Complete the following steps in the Blazor project that renders the charts.

Install the package used by these demos:

dotnet add package BlazorExpress.ChartJS --version 1.2.4

Import the component namespace in _Imports.razor:
```
@using BlazorExpress.ChartJS
```

Load the browser scripts in this order from the host page, after the Blazor framework script. The data-labels plugin is needed only when a chart uses 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>

See the BlazorExpress.ChartJS website and GitHub repository for current package documentation. We also recommend checking the original BlazorExpress.ChartJS demos when adapting advanced examples.

For a complete charts setup walkthrough, see the Getting Started — Charts Setup section.

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Charts

Blazor Charts Example #

Chart Types #

Chart Components — Dedicated Library

Links

Guides

Community

Other Libraries