Chartjs - Datalables plugin - options

Created on 30 July 2025, 17 days ago

Problem/Motivation

The chartjs datalabels plugin can be used with the chartjs implementation. The data_labels config option is used for that. If that option is set, the chart definition is amended for the plugin. But the amended chart definition is a bit confusing, since it is using a config option "display" for the plugin, that is not used with the plugin, see https://chartjs-plugin-datalabels.netlify.app/guide/options.html. In addition the config option for the plugin is added with "dataLabels" (uppercase L), while the plugin needs to be configured with "datalabels" (lowercase l).

So for example if you like to change the color for the datalabels plugin (e. g. via hook_chart_definition_alter), the following will not work:
$definition['options']['plugins']['dataLabels']['color'] = '#fff';
while this will work:
$definition['options']['plugins']['datalabels']['color'] = '#fff';

This is at least a bit misleading, if the option to activate the plugin uses another key, than the option to configure the plugin.

Steps to reproduce

Proposed resolution

I would propose to change the key to lowercase l: "datalabels" and just add this as an empty array to activate the plugin. This will work the same as the current approach, but will not use the unrelated "display" property and will be more straightforward on howto change the plugin config afterwards.

That said, I think the default config for the plugin results in some really bad readibility of the datalabel (kind of dark grey, that will not make a good contrast on most of the colors). It might be better to use something like black background and white color for datalables as a default, as this will enhance readability a lot. But I do not include this in MR now, just to think about it.

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Active

Version

5.1

Component

Chart.js integration

Created by

🇩🇪Germany stefan.korn Jossgrund

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024