Datalabel Plugin

[zidn-pt]

Describe the feature request

I would like to have the ability to display labels over or inside data points on charts in Blazor Server without the need for hovering to show tooltips.

Which charts does this feature request apply to?

All Chart´s

Describe the solution you'd like

I envision a straightforward and configurable way to show labels over or inside data points on charts in Blazor Server. This could be achieved through a plugin or an integrated feature that allows users to customize the display of labels.

Is there a solution yet?

[larschristensen20]

This is already possible using a combination of callbacks and javascript. Other than that you need to also need to include the datalabels.min.js. Mine is bundled and included in _Host.cshtml.

When making your chart:

<Chart @ref="barGraph" Config="@_config" Width="600" Height="600" SetupCompletedCallback="@(() => SetupCompletedCallback(_config.CanvasId))" />

The callback method:

private async Task SetupCompletedCallback(string canvasID)
  {
      // if(module == null) {
      //    await InitImports();
      //}
      await jSRuntime.InvokeVoidAsync("generalInterop.datalabelsConfig", canvasID, adminSettings.ChartOrientation_Horizontal);
  }

The JS method (notice some extra config thats specific for my chart, remove that for yours):

datalabelsConfig: function (canvasID, horizontal) {
     let chart = window.ChartJsInterop.BlazorCharts.get(canvasID);
     if (!chart) return;

     if (horizontal) {
         chart.options.plugins.datalabels.align = 'right';
         chart.options.plugins.datalabels.anchor = 'end';
         chart.options.plugins.datalabels.clamp = true;
         chart.options.plugins.datalabels.font.weight = 'bold';

     } else {
         chart.options.plugins.datalabels.align = 'top';
         chart.options.plugins.datalabels.anchor = 'end';
         chart.options.plugins.datalabels.clamp = true;
         chart.options.plugins.datalabels.font.weight = 'bold';

     }
     //Tooltip decimal separator
     chart.options.tooltips.callbacks.label = function (tooltipItem, data) {
         let dataset = data.datasets[tooltipItem.datasetIndex];

         // return formatted string here
         return "Forbrug i m\xB3: " + Number(dataset.data[tooltipItem.index]).toFixed(3).toLocaleString().replace(".", ",");
     }

     //Datalabel decimal separator
     chart.options.plugins.datalabels.formatter = function (value, context) {
         // return formatted string here

         if (value > 0) {
             return Number(value).toFixed(3).toLocaleString().replace(".", ",");
         } else {
             return "";
         }
     }
     chart.options.layout.padding.right = 50;
     chart.update();
 }