Blazor Scatter Chart

BlazorExpress.ChartJS scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.

How it works #

In the following example, a categorical 12-color palette is used.

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.

<ScatterChart @ref="scatterChart" Width="560" Height="480" />

@code {
    private ScatterChart scatterChart = default!;
    private ScatterChartOptions scatterChartOptions = default!;
    private ChartData chartData = default!;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData
            {
                Datasets = new()
                {
                    GetRandomRadarChartDataset(0),
                    GetRandomRadarChartDataset(1),
                    GetRandomRadarChartDataset(2)
                }
            };

        scatterChartOptions = new() { };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await scatterChart.InitializeAsync(chartData, scatterChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    #region Data Preparation

    private ScatterChartDataset GetRandomRadarChartDataset(int recordIndex)
    {
        var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToChartColor();

        return new ScatterChartDataset
            {
                Label = $"Team {recordIndex + 1}",
                Data = GetRandomData(),
                BackgroundColor = c.ToChartRgbaString(), // RGBA
                BorderColor = c.ToChartRgbString(), // RGB
                BorderWidth = 2,
                HoverBorderWidth = 4,
            };
    }

    private List<ScatterChartDataPoint?> GetRandomData()
    {
        var data = new List<ScatterChartDataPoint?>();
        for (var index = 0; index < 10; index++)
        {
            data.Add(new(random.Next(200), random.Next(200)));
        }

        return data;
    }

    #endregion Data Preparation
}

Dynamic data #

In the following example, you can randomize the data and datasets dynamically. Along with this, the ScatterChartOptions are updated. With these changes, the scatter chart is responsive, and when hovered over, the points' radius increases for better visibility to the end-user. Additionally, the data is grouped and displayed in a tooltip by index.

<ScatterChart @ref="scatterChart" />

<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>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowHorizontalLineChartAsync()"> Horizontal Line Chart </Button>
    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ShowVerticalLineChartAsync()"> Vertical Line Chart </Button>
</div>

@code {
    private ScatterChart scatterChart = default!;
    private ScatterChartOptions scatterChartOptions = default!;
    private ChartData chartData = default!;

    private int datasetsCount;
    private int dataLabelsCount;

    private Random random = new();

    protected override void OnInitialized()
    {
        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
        scatterChartOptions = new() { 
            Responsive = true, 
            Interaction = new Interaction { Mode = InteractionMode.Index },
        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await scatterChart.InitializeAsync(chartData, scatterChartOptions);
        }
        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 ScatterChartDataset scatterChartDataset
                && scatterChartDataset is not null
                && scatterChartDataset.Data is not null)
            {
                var count = scatterChartDataset.Data.Count;

                var newData = new List<ScatterChartDataPoint?>();
                for (var i = 0; i < count; i++)
                {
                    newData.Add(new(random.Next(200), random.Next(200)));
                }

                scatterChartDataset.Data = newData;
                newDatasets.Add(scatterChartDataset);
            }
        }

        chartData.Datasets = newDatasets;

        await scatterChart.UpdateAsync(chartData, scatterChartOptions);
    }

    private async Task AddDatasetAsync()
    {
        if (datasetsCount >= 12)
            return;

        if (chartData is null || chartData.Datasets is null) return;

        var chartDataset = GetRandomScatterChartDataset();
        chartData = await scatterChart.AddDatasetAsync(chartData, chartDataset, scatterChartOptions);
    }

    private async Task AddDataAsync()
    {
        if (chartData is null || chartData.Datasets is null)
            return;

        var data = new List<IChartDatasetData>();
        foreach (var dataset in chartData.Datasets)
        {
            if (dataset is ScatterChartDataset scatterChartDataset)
                data.Add(new ScatterChartDatasetData(scatterChartDataset.Label, new ScatterChartDataPoint(random.Next(200), random.Next(200))));
        }

        chartData = await scatterChart.AddDataAsync(chartData, GetNextDataLabel(), data);
    }

    private async Task ShowHorizontalLineChartAsync()
    {
        scatterChartOptions.IndexAxis = "y";
        await scatterChart.UpdateAsync(chartData, scatterChartOptions);
    }

    private async Task ShowVerticalLineChartAsync()
    {
        scatterChartOptions.IndexAxis = "x";
        await scatterChart.UpdateAsync(chartData, scatterChartOptions);
    }

    #region Data Preparation

    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        for (var index = 0; index < numberOfDatasets; index++)
        {
            datasets.Add(GetRandomScatterChartDataset());
        }

        return datasets;
    }

    private ScatterChartDataset GetRandomScatterChartDataset()
    {
        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();

        datasetsCount += 1;

        return new ScatterChartDataset
            {
                Label = $"Team {datasetsCount}",
                Data = GetRandomData(),
                BackgroundColor = c.ToChartRgbaString(), // RGBA
                BorderColor = c.ToChartRgbString(), // RGB
                BorderWidth = 2,
                Fill = true,
                HoverBorderWidth = 4,
                PointHoverRadius = new List<double>{6},
            };
    }

    private List<ScatterChartDataPoint?> GetRandomData()
    {
        var data = new List<ScatterChartDataPoint?>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(new ScatterChartDataPoint(random.Next(200), 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()
    {
        dataLabelsCount += 1;
        return $"Day {dataLabelsCount}";
    }

    #endregion Data Preparation

}

Click event #

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

<ScatterChart @ref="scatterChart" Width="600" Height="480" 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 ScatterChart scatterChart = default!;
    private ScatterChartOptions scatterChartOptions = default!;
    private ChartData chartData = default!;
    private ChartClickEventArgs? selectedChartItem;

    protected override void OnInitialized()
    {
        chartData = new ChartData
        {
            Labels = new List<string> { "First", "Second", "Third", "Fourth" },
            Datasets = new List<IChartDataset>
            {
                new ScatterChartDataset
                {
                    Label = "Measurements",
                    Data = new List<ScatterChartDataPoint>
                    {
                        new(10, 25),
                        new(25, 15),
                        new(35, 40),
                        new(50, 30),
                    },
                    BackgroundColor = "rgba(255, 159, 64, 0.6)",
                    BorderColor = "rgb(255, 159, 64)",
                    BorderWidth = 2,
                },
            },
        };

        scatterChartOptions = new ScatterChartOptions { Responsive = true };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await scatterChart.InitializeAsync(chartData, scatterChartOptions);

        await base.OnAfterRenderAsync(firstRender);
    }

    private Task HandleClickAsync(ChartClickEventArgs eventArgs)
    {
        selectedChartItem = eventArgs;
        return Task.CompletedTask;
    }

    private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"point {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 Scatter Chart

How it works #

Dynamic data #

Click event #

Chart Components — Dedicated Library

Links

Guides

Community

Other Libraries