How can I set ticks callback for a chart?

[kwon0408]

const options = {
    scales: {
        y: {
            ticks: {
                callback: function(value, index, ticks) { return value + '%'; }
            },
            // ...
        }
    }
};

This will make each tick's value followed by %. (e.g. 0%, 10%, ...) I could not find this feature in this project for now. Did I missed one or is it just not yet implemented?

[Etogerman]

You did not miss it: ticks.callback is not exposed by the current BlazorBootstrap chart API. The current ChartAxesTicks model contains the serializable styling options, but no Callback property. A JavaScript function also cannot be transferred as a normal .NET delegate through JSON interop.

A small JS interop helper is a workable solution for now. Give the chart a stable ID:

@inject IJSRuntime JS

<LineChart Id="percent-chart" @ref="lineChart" />

Add this to a JS file loaded after Chart.js/BlazorBootstrap:

window.setPercentYAxisTicks = (canvasId) => {
    const chart = Chart.getChart(canvasId);
    const ticks = chart?.options?.scales?.y?.ticks;
    if (!ticks) return;

    ticks.callback = (value) => `${value}%`;
    chart.update("none");
};

Then apply it immediately after initialization:

await lineChart.InitializeAsync(chartData, lineChartOptions);
await JS.InvokeVoidAsync("setPercentYAxisTicks", "percent-chart");

Chart.getChart(canvasId) is a public Chart.js API: https://www.chartjs.org/docs/latest/developers/api.html#static-getchart-key

One important detail: call the helper again after every BlazorBootstrap UpdateAsync(...). Its current implementation replaces chart.options with the newly serialized options object, which removes the JavaScript callback. UpdateValuesAsync(...) only changes data, so the callback survives that method.

So the short answer is: not implemented as a first-class C# option yet; JS interop is required unless the library adds a dedicated formatter/callback bridge.