Issue #3463862: How to use plugins?

modules/charts_chartjs/README.md

@@ -43,7 +43,10 @@ remove "web/" from the lines below:
         "web/libraries/chart.js": ["npm-asset/chart.js"],
         "web/libraries/chartjs-adapter-date-fns": [
           "npm-asset/chartjs-adapter-date-fns"
-          ],
+        ],
+        "web/libraries/chartjs-plugin-datalabels": [
+          "npm-asset/chartjs-plugin-datalabels"
+        ],
     },
 }
 
@@ -81,6 +84,7 @@ them. So: create a new directory in your project root called "scripts".
           "web/libraries/chart.js/dist/plugins"
           "web/libraries/chart.js/dist/scales"
           "web/libraries/chart.js/dist/types"
+          "web/libraries/chartjs-plugin-datalabels/types"
         )
         counter=0
         echo "Deleting unneeded directories inside web/libraries/chartjs"
@@ -114,6 +118,10 @@ them. So: create a new directory in your project root called "scripts".
           "web/libraries/chartjs-adapter-date-fns/LICENSE.md"
           "web/libraries/chartjs-adapter-date-fns/package.json"
           "web/libraries/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js"
+          "web/libraries/chartjs-plugin-datalabels/README.md"
+          "web/libraries/chartjs-plugin-datalabels/LICENSE.md"
+          "web/libraries/chartjs-plugin-datalabels/package.json"
+          "web/libraries/chartjs-plugin-datalabels/bower.json"
         )
         counter=0
         echo "Deleting unneeded files inside web/libraries/chartjs"
@@ -147,3 +155,4 @@ them. So: create a new directory in your project root called "scripts".
 
     composer require --prefer-dist npm-asset/chart.js:^4.4
     npm-asset/chartjs-adapter-date-fns:^3.0
+    npm-asset/chartjs-plugin-datalabels:^2.0

modules/charts_chartjs/charts_chartjs.libraries.yml

@@ -9,9 +9,11 @@ charts_chartjs:
   cdn:
     /libraries/chart.js/: https://unpkg.com/chart.js@4.4.0/
     /libraries/chartjs-adapter-date-fns/: https://unpkg.com/chartjs-adapter-date-fns@3.0.0/
+    /libraries/chartjs-plugin-datalabels/: https://unpkg.com/chartjs-plugin-datalabels@2.0.0/
   js:
     /libraries/chart.js/dist/chart.umd.js: { }
     /libraries/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.js: { }
+    /libraries/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js: { }
   dependencies:
     - core/drupal
     - core/once

modules/charts_chartjs/composer.json

@@ -16,7 +16,8 @@
     "require": {
         "oomphinc/composer-installers-extender": "^2",
         "npm-asset/chart.js": "^4.4",
-        "npm-asset/chartjs-adapter-date-fns": "^3.0"
+        "npm-asset/chartjs-adapter-date-fns": "^3.0",
+        "npm-asset/chartjs-plugin-datalabels": "^2.0",
     },
     "extra": {
         "installer-types": [
@@ -28,6 +29,9 @@
             ],
             "web/libraries/chartjs-adapter-date-fns": [
                 "npm-asset/chartjs-adapter-date-fns"
+            ],
+            "web/libraries/chartjs-plugin-datalabels": [
+                "npm-asset/chartjs-plugin-datalabels"
             ]
         }
     }

modules/charts_chartjs/js/charts_chartjs.js

@@ -31,9 +31,15 @@
         // Initializing the chart item.
         const chart = contents.getData(chartId);
         const options = chart['options'];
+        const enabled_plugins = [];
+        // If options.plugins.dataLabels.display is set to true, we need to add the plugin to the chart.
+        if (options.plugins && options.plugins.dataLabels && options.plugins.dataLabels.display) {
+          enabled_plugins.push(ChartDataLabels);
+        }
         new Chart(chartId, {
           type: chart['type'],
           data: chart['data'],
+          plugins: enabled_plugins,
           options: options,
         });
         if (canvas.nextElementSibling && canvas.nextElementSibling.hasAttribute('data-charts-debug-container')) {

modules/charts_chartjs/src/Plugin/chart/Library/Chartjs.php

@@ -353,6 +353,9 @@ class Chartjs extends ChartBase {
       ];
     }
     $chart_definition['options']['plugins']['tooltip']['enabled'] = $element['#tooltips'];
+    if (!empty($element['#data_labels'])) {
+      $chart_definition['options']['plugins']['dataLabels']['display'] = TRUE;
+    }
     $chart_definition['options']['plugins']['legend'] = $this->buildLegend($element);
 
     return $chart_definition;