Blazor Bubble Chart

A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.

How it works #

The bubble chart visualizes three dimensions of data by mapping each point to X, Y, and R values.

TIP

For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.

<BubbleChart @ref="bubbleChart" Width="600" />

<div class="mt-5">
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
</div>

@code {
    private BubbleChart bubbleChart = default!;
    private BubbleChartOptions bubbleChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount = 0;
    private int labelsCount = 0;
    private readonly string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
    private readonly Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        bubbleChartOptions = new BubbleChartOptions { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await bubbleChart.InitializeAsync(chartData, bubbleChartOptions);

        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 BubbleChartDataset bubbleChartDataset && bubbleChartDataset.Data is not null)
            {
                var count = bubbleChartDataset.Data.Count;
                var newData = new List<BubbleChartDataPoint>();

                for (var i = 0; i < count; i++)
                    newData.Add(NewBubbleChartDataPoint);

                bubbleChartDataset.Data = newData;
                newDatasets.Add(bubbleChartDataset);
            }

        chartData.Datasets = newDatasets;

        await bubbleChart.UpdateAsync(chartData, bubbleChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (chartData is null || chartData.Datasets is null || datasetsCount >= 12)
            return;

        chartData = await bubbleChart.AddDatasetAsync(chartData, GetRandomBubbleChartDataset(), bubbleChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null || labelsCount >= 12)
            return;

        var data = new List<IChartDatasetData>();

        foreach (var dataset in chartData.Datasets)
            if (dataset is BubbleChartDataset bubbleChartDataset)
                data.Add(new BubbleChartDatasetData(bubbleChartDataset.Label, NewBubbleChartDataPoint));

        chartData = await bubbleChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
            datasets.Add(GetRandomBubbleChartDataset());

        return datasets;
    }

    private BubbleChartDataset GetRandomBubbleChartDataset()
    {
        var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();

        datasetsCount += 1;

        return new BubbleChartDataset
        {
            Label = $"Product {datasetsCount}",
            Data = GetRandomData(),
            BackgroundColor = new List<string> { color.ToChartRgbString() },
            BorderColor = new List<string> { color.ToChartRgbString() },
            HoverBorderWidth = new List<double> { 4 }
        };
    }

    private List<BubbleChartDataPoint> GetRandomData()
    {
        var data = new List<BubbleChartDataPoint>();

        for (var index = 0; index < labelsCount; index++)
            data.Add(NewBubbleChartDataPoint);

        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 BubbleChartDataPoint NewBubbleChartDataPoint => new(random.Next(40), random.Next(40), random.Next(10));

    #endregion Data Preparation
}

Click event #

Set the OnClick callback to react when a bubble is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and structured raw X, Y, and R value.

<BubbleChart @ref="bubbleChart" Width="600" OnClick="HandleClickAsync" />

@if (selectedChartItem is not null)
{
    <p class="mt-3 mb-0">
        Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex),
        @FormatLabel(selectedChartItem) (index @selectedChartItem.Index),
        value @FormatValue(selectedChartItem)
    </p>
}

@code {
    private BubbleChart bubbleChart = default!;
    private BubbleChartOptions bubbleChartOptions = default!;
    private ChartData chartData = default!;
    private ChartClickEventArgs? selectedChartItem;

    protected override void OnInitialized()
    {
        chartData = new ChartData
        {
            Labels = new List<string> { "January", "February", "March" },
            Datasets = new List<IChartDataset>
            {
                new BubbleChartDataset
                {
                    Label = "Projects",
                    Data = new List<BubbleChartDataPoint>
                    {
                        new(10, 20, 8),
                        new(15, 12, 12),
                        new(8, 25, 6),
                    },
                    BackgroundColor = new List<string> { "rgba(255, 99, 132, 0.5)" },
                    BorderColor = new List<string> { "rgb(255, 99, 132)" },
                    BorderWidth = 1,
                },
            },
        };

        bubbleChartOptions = new BubbleChartOptions { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await bubbleChart.InitializeAsync(chartData, bubbleChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }

    private Task HandleClickAsync(ChartClickEventArgs eventArgs)
    {
        selectedChartItem = eventArgs;
        return Task.CompletedTask;
    }

    private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}";

    private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null";
}

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 Bubble Chart

How it works #

Click event #

Chart Components — Dedicated Library

Links

Guides

Community

Other Libraries