Bar Chart

The Blazor Bar Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.

API Documentation

Chart setup #

Before using any chart demo: install BlazorExpress.ChartJS 1.2.2, load Chart.js 4.4.1, chartjs-plugin-datalabels 2.2.0, and _content/BlazorExpress.ChartJS/blazorexpress.chartjs.js, then add @using BlazorExpress.ChartJS to your chart page or chart folder.

Follow the shared chart setup guide, the .NET 8 WebAssembly guide, or the .NET 8 Web App Server guide. For full chart component guidance and examples, visit chartjs.blazorexpress.com.

How it works #

The Bar Chart component visualizes data as vertical bars, making it easy to compare values across categories or track changes over time.

How to use:
  1. Add the BarChart component to your page.
  2. Provide Labels for the X-axis categories and one or more Datasets for the Y-axis values.
  3. Customize appearance and behavior using the Options property (e.g., colors, tooltips, axis settings).
  4. Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.
This demo showcases the essential setup for a bar chart and demonstrates how to bind your data for quick visualization. 
<BarChart @ref="barChart" Width="600" />

<div class="mt-5">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
    <Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="AddDatasetAsync"> Add Dataset </Button>
    <Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="AddDataAsync">Add Data</Button>
    <Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="ShowHorizontalBarChartAsync">Horizontal Bar Chart</Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="ShowVerticalBarChartAsync">Vertical Bar Chart</Button>
</div>

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

    private int datasetsCount = 0;
    private int labelsCount = 0;
    private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

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

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset
                && barChartDataset is not null
                && barChartDataset.Data is not null)
            {
                var count = barChartDataset.Data.Count;

                var newData = new List<double?>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(random.Next(200));
                }

                barChartDataset.Data = newData;
                newDatasets.Add(barChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null) return;

        if (datasetsCount >= 12)
            return;

        var chartDataset = GetRandomBarChartDataset();
        chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null)
            return;

        if (labelsCount >= 12)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset)
                data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200)));
        }

        chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    private async Task ShowHorizontalBarChartAsync()
    {
        barChartOptions.IndexAxis = "y";
        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    private async Task ShowVerticalBarChartAsync()
    {
        barChartOptions.IndexAxis = "x";
        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomBarChartDataset());
        }

        return datasets;
    }

    private BarChartDataset GetRandomBarChartDataset()
    {
        var c = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[datasetsCount]);

        datasetsCount += 1;

        return new BarChartDataset()
        {
            Label = $"Product {datasetsCount}",
            Data = GetRandomData(),
            BackgroundColor = new List<string> { ChartJsColorExtensions.ToRgbString(c) },
            BorderColor = new List<string> { ChartJsColorExtensions.ToRgbString(c) },
            BorderWidth = new List<double> { 0 },
        };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(random.Next(200));
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return months[labelsCount - 1];
    }

    #endregion Data Preparation
}

Combo bar/line #

The Combo bar/line demo mixes BarChartDataset and LineChartDataset in the same BarChart.

How to use:
  1. Use the BarChart component as the root chart.
  2. Add both BarChartDataset and LineChartDataset instances to the same ChartData.Datasets collection.
  3. Configure interaction options such as Mode = InteractionMode.Index and Intersect = false for a combined tooltip experience.
  4. Refer to the demo code below for a working example with bar columns and a line overlay.
<BarChart @ref="barChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var revenueColor = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[0]);
        var trendColor = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[1]);

        chartData = new ChartData
        {
            Labels = new List<string> { "January", "February", "March", "April", "May", "June" },
            Datasets = new List<IChartDataset>
            {
                new BarChartDataset
                {
                    Label = "Revenue",
                    Data = new List<double?> { 65, 59, 80, 81, 56, 55 },
                    BackgroundColor = new List<string> { ChartJsColorExtensions.ToRgbaString(revenueColor) },
                    BorderColor = new List<string> { ChartJsColorExtensions.ToRgbString(revenueColor) },
                    BorderWidth = new List<double> { 0 },
                },
                new LineChartDataset
                {
                    Label = "Target",
                    Data = new List<double?> { 50, 55, 60, 70, 72, 78 },
                    BackgroundColor = ChartJsColorExtensions.ToRgbaString(trendColor),
                    BorderColor = ChartJsColorExtensions.ToRgbString(trendColor),
                    PointRadius = new List<double> { 4 },
                    PointHoverRadius = new List<double> { 6 },
                },
            },
        };

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

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

        await base.OnAfterRenderAsync(firstRender);
    }
}

Horizontal bar chart #

The Horizontal Bar Chart displays data values as horizontal bars, making it ideal for comparing categories with long labels or when you want to emphasize comparison between values.

How to use:
  1. Use the BarChart component and set the IndexAxis option to 'y' to render bars horizontally.
  2. Provide your data and labels as you would for a standard bar chart.
  3. Customize colors and appearance using the available palette utilities or your own color set.
Refer to the demo code below for a working example and configuration options. 
<BarChart @ref="barChart" Width="600" />

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

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

        var dataset1 = new BarChartDataset()
        {
            Data = new List<double?> { 55000, 15000, 18000, 21000 },
            BackgroundColor = new List<string> { ChartJsColorUtility.CategoricalTwelveColors[0] },
            BorderColor = new List<string> { ChartJsColorUtility.CategoricalTwelveColors[0] },
            BorderWidth = new List<double> { 0 },
        };
        datasets.Add(dataset1);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        barChartOptions = new BarChartOptions();
        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 };

        barChartOptions.Plugins.Legend.Display = false;
    }

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

Stacked bar chart #

The Stacked Bar Chart allows you to display multiple data series stacked on top of each other, making it easy to compare the total and individual contributions of each series for every category.

How to use:
  1. Use the BarChart component and configure the Options.Scales.X.Stacked and Options.Scales.Y.Stacked properties to true to enable stacking.
  2. Provide multiple datasets in your chart data, each representing a different series to be stacked.
  3. Customize colors for each dataset using palette utilities or your own color set for better distinction.
  4. Refer to the demo code below for a working example and further configuration options.
<BarChart @ref="barChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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()
        {
            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 { 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 };

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

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

Stacked bar chart with data labels #

The Stacked Bar Chart with Data Labels 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.

How to use:
  • Use the BarChart component and enable stacking by setting Options.Scales.X.Stacked and Options.Scales.Y.Stacked to true.
  • Add multiple datasets to your chart data to represent different series.
  • Enable data labels by configuring the chart's plugins, such as Options.Plugins.Datalabels.Display = true.
  • Customize the appearance and formatting of data labels as needed for your scenario.
Refer to the demo code below for a working example and further configuration options. 
<BarChart @ref="barChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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()
        {
            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
        {
            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 };

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    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);
    }
}

Locale #

The Locale demo shows how to localize number and date formatting in your bar chart.

How to use:
  1. Set the Locale property on the BarChart component to your desired culture code (e.g., "fr-FR" for French).
  2. Number and date labels in the chart will automatically format according to the specified locale.
  3. This is useful for displaying charts to users in different regions with appropriate formatting.
Refer to the demo code below for a working example and configuration options. 
<BarChart @ref="barChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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()
        {
            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 { Labels = labels, Datasets = datasets };

        barChartOptions = new();
        barChartOptions.Locale = "de-DE";
        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 };

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

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

Border radius #

The Border Radius feature allows you to create bar charts with rounded corners, giving your charts a modern and visually appealing look. This is especially useful for dashboards and applications where aesthetics are important.

How to use:
  1. Add the BarChart component to your page.
  2. When defining each BarChartDataset, set the BorderRadius property to a list of pixel values (e.g., new List<double> { 10 }) to control the roundness of the bar corners.
  3. Optionally, set BorderSkipped = false to apply the border radius to all corners of each bar.
  4. Customize other appearance options such as BackgroundColor and BorderColor as needed.
  5. Refer to the demo code below for a working example and further customization options.
Using the BorderRadius property, you can easily enhance the style of your bar charts to better match your application's design. 
<BarChart @ref="barChart" Width="600" />

<div class="mt-5">
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
</div>

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

    private int datasetsCount = 0;
    private int labelsCount = 0;
    private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
    }

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

    private async Task RandomizeAsync()
    {
        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;

        var newDatasets = new List<IChartDataset>();

        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is BarChartDataset barChartDataset
                && barChartDataset is not null
                && barChartDataset.Data is not null)
            {
                var count = barChartDataset.Data.Count;

                var newData = new List<double?>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(NewRandom());
                }

                barChartDataset.Data = newData;
                newDatasets.Add(barChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await barChart.UpdateAsync(chartData, barChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomBarChartDataset());
        }

        return datasets;
    }

    private BarChartDataset GetRandomBarChartDataset()
    {
        var c = ChartJsColorExtensions.ToColor(ChartJsColorUtility.CategoricalTwelveColors[datasetsCount]);

        datasetsCount += 1;

        return new BarChartDataset()
        {
            Label = $"Product {datasetsCount}",
            Data = GetRandomData(),
            BorderColor = new List<string> { ChartJsColorExtensions.ToRgbString(c) },
            BackgroundColor = new List<string> { ChartJsColorExtensions.ToRgbaString(c, 0.5) },
            BorderWidth = new List<double> { 2 },
            BorderRadius = new List<double> { 10 },
            BorderSkipped = false
        };
    }

    private List<double?> GetRandomData()
    {
        var data = new List<double?>();
        for (var index = 0; index < labelsCount; index++)
        {
            data.Add(NewRandom());
        }

        return data;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        for (var index = 0; index < numberOfLabels; index++)
        {
            labels.Add(GetNextDataLabel());
        }

        return labels;
    }

    private string GetNextDataLabel()
    {
        labelsCount += 1;
        return months[labelsCount - 1];
    }

    private double NewRandom() => random.Next(-100, 100);

    #endregion Data Preparation
}

Animations - Delay #

The Animations - Delay demo illustrates how to add a delay to the animation of your Bar Chart, making the chart elements appear with a timed entrance effect. This is useful for drawing attention to the chart as it loads or for creating a more engaging user experience.

How to use:
  1. Add the BarChart component to your page and define your Labels and Datasets as usual.
  2. Configure the Options.Animation property by setting the Duration (in milliseconds) and Delay (in milliseconds) to control the timing of the animation.
  3. Bind your chartData and barChartOptions to the BarChart component.
  4. Refer to the demo code below for a working example of how to set up and customize animation delays.
Animation delays help you create visually appealing transitions and can be tailored to fit your application's style. 
<BarChart @ref="barChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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[3] },
            BorderColor = new List<string> { colors[3] },
            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[4] },
            BorderColor = new List<string> { colors[4] },
            BorderWidth = new List<double> { 0 }
        };
        datasets.Add(dataset2);

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

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };

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

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;

        barChartOptions.Animation = new ChartAnimation { Duration = 1000, Delay = 1500 };
    }

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

Animations - DataSet level delay #

The Animations - DataSet Level Delay 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.

How to use:
  1. Add the BarChart component to your page and define your Labels and multiple Datasets.
  2. For each dataset, set the Animation property with specific Duration and Delay values to control when each dataset animates.
  3. Bind your chartData and barChartOptions to the BarChart component.
  4. Refer to the demo code below for a practical example of dataset-level animation configuration.
Dataset-level animation delays are ideal for highlighting differences between series and creating engaging, stepwise chart reveals. 
<BarChart @ref="barChart" Width="600" />

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

    protected override void OnInitialized()
    {
        var colors = ChartJsColorUtility.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[6] },
            BorderColor = new List<string> { colors[6] },
            BorderWidth = new List<double> { 0 },
            Animation = new ChartAnimation { Duration = 1000, Delay = 500 }
        };
        datasets.Add(dataset1);

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

        var dataset3 = new BarChartDataset()
        {
            Label = "Other",
            Data = new List<double?> { 28000, 10000, 14000, 8000 },
            BackgroundColor = new List<string> { colors[8] },
            BorderColor = new List<string> { colors[8] },
            BorderWidth = new List<double> { 0 },
            Animation = new ChartAnimation { Duration = 1000, Delay = 2500 }
        };
        datasets.Add(dataset3);

        chartData = new ChartData { Labels = labels, Datasets = datasets };

        barChartOptions = new();
        barChartOptions.Responsive = true;
        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };

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

        barChartOptions.Scales.X.Stacked = true;
        barChartOptions.Scales.Y.Stacked = true;

        barChartOptions.Plugins.Title!.Text = "Operating system";
        barChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await barChart.InitializeAsync(chartData, barChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!