Getting Started

Getting Started

The README chart is the smallest useful shape of a pax.BlazorChartJs chart:

1. Put a ChartComponent in Razor.
2. Create a ChartJsConfig.
3. Give the config a chart type, labels, and one or more datasets.

Minimal chart

The chart component receives a config object. ChartJsData.Labels describe the category axis and the dataset supplies the values.

@using pax.BlazorChartJs

<div class="chart-container w-75">
    <ChartComponent ChartJsConfig="chartJsConfig" />
</div>

@code {
    private readonly ChartJsConfig chartJsConfig = new()
    {
        Type = ChartType.bar,
        Data = new ChartJsData
        {
            Labels = ["Jan", "Feb", "Mar"],
            Datasets =
            [
                new BarDataset
                {
                    Label = "Dataset 1",
                    Data = [1, 2, 3]
                }
            ]
        }
    };
}

The dataset type should match the chart you are building. For example, a bar chart commonly uses BarDataset, while a line chart uses LineDataset.

Why is dataset data a list of object?

ChartJsDataset.Data is IList<object> because Chart.js accepts different data shapes depending on the chart and dataset. A simple bar chart can send scalar values such as 1, 2, and 3, while other charts can send point-like values such as { x, y } objects. The wrapper keeps the common dataset property flexible enough for those Chart.js shapes.

In a scalar dataset the collection expression is still concise:

Data = [1, 2, 3]

When code builds a new data list explicitly, the values are commonly stored as object for the same reason:

IList<object> data = [1, 2, 3];

Updating the chart

The public README sample also shows a button that replaces dataset values after the chart is initialized. The important pieces are:

• handle OnEventTriggered and set a local ready flag when ChartComponent raises ChartJsInitEvent
• update the existing config object
• call a ChartJsConfig update helper so the rendered chart receives the change

The chartReady flag is not a library property. It belongs to the sample component:

private bool chartReady;

private void ChartEventTriggered(ChartJsEvent chartJsEvent)
{
    if (chartJsEvent is ChartJsInitEvent)
    {
        chartReady = true;
    }
}

The component wires that handler with OnEventTriggered:

<ChartComponent ChartJsConfig="chartJsConfig"
                OnEventTriggered="ChartEventTriggered" />

The update button then checks that local flag before sending new values to the initialized chart:

private void Randomize()
{
    if (!chartReady)
    {
        return;
    }

    Dictionary<string, IList<object>> dataByDatasetId = [];

    foreach (var dataset in chartJsConfig.Data.Datasets)
    {
        if (dataset is BarDataset barDataset)
        {
            dataByDatasetId[barDataset.Id] =
                barDataset.Data.Select(_ => (object)Random.Shared.Next(1, 10)).ToList();
        }
    }

    chartJsConfig.UpdateDatasetsDataSmooth(dataByDatasetId);
}

The same config pattern scales to more options: axes, legends, tooltips, plugins, interaction settings, animations, and event flags are added under ChartJsConfig.Options.

Sample source

• ReadmeChartComp.razor
• Minimal live sample