Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate the plugin with requirejs from the chartjs and chartjs-datalabels files #303

Open
Funky89 opened this issue Dec 19, 2021 · 6 comments

Comments

@Funky89
Copy link

Funky89 commented Dec 19, 2021

Hello everyone,

I want to integrate the datalabels plugin with my requirejs
But I am having problems when defining datalabels in my js file, here is the error message.

Previously I don't use the cdns but I downloaded the Chart.js v3.6.2 and chartjs-plugin-datalabels v2.0.0 files

404 error:
https://192.168.1.70/script/chart.js/helpers.js

Uncaught Error: Script error for "../script/chart.js/helpers", needed by: datalabels

Can you tell me where I am wrong and how to get the plugin to work properly without using cdn?

Best regards

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
  
requirejs.config({
	paths: {
		chart: "../script/chart",
    datalabels: "../script/chartjs-plugin-datalabels",
	},	
	map: {
		datalabels: {
		  "chart.js": "../script/chart.js"
		}
	},
	waitSeconds: 30
});

require(["chart", "datalabels"], function(chart, datalabels) {
  var ctx = document.getElementById('myChart');
  //console.log(ChartDataLabels)
  //Chart.register(ChartDataLabels); // first way of registering the plugin, registers them for all your charts
  
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    //plugins: [ChartDataLabels], // second way of registering plugin, register plugin for only this chart
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        data: [12, 19, 3, 5, 2, 3],
        label: 'Advisor Closed MTD',
        backgroundColor: 'rgb(192,111,94)',
        barThickness: 25,
        datalabels: {
          color: '#FFCE56'
        }

      }],
    },
    options: {
      responsive: false,
      plugins: {
        datalabels: {
          formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];
        },
          labels: {
            value: {
              color: 'blue'
            }
          }

        }
      }
    }
  });
});


</script>
@LeeLenaleee
Copy link
Contributor

Can you try if it works if you nest the requires as shown in this example so you are sure chart.js is fully loaded when the datalabels tries to acces it

https://www.chartjs.org/docs/master/getting-started/integration.html#require-js

@Funky89
Copy link
Author

Funky89 commented Dec 24, 2021

@LeeLenaleee Hello and thank you, I just tested for nesting and I have the same problem
Cannot load helper function

It still tries to read the file:
https://192.168.1.70/script/chart.js/helpers.js

Except that in the datalabel file we use
factory (require ('chart.js / helpers'), require ('chart.js'))

On the other hand, no problem if I do not use requireJS but simply the cdns

@Funky89
Copy link
Author

Funky89 commented Jan 5, 2022

Hello,
I am coming back because here is the new code which "works" but does not suit me.

require.config({
  paths: {
    chart: "../script/chart",
    datalabels: "../script/chartjs-plugin-datalabels"
  },
  shim: {
    chartjs: {
      exports: "C"
    },
    datalabels: {
      exports: "C",
      deps: ["chart"]
    }
  },
  map: {
    datalabels: {
      "chart.js": "chart",
      "chart.js/helpers": "chart"
    }
  }
});

The problem comes from the map part, during the chart.js/helpers

Do you have a solution to indicate in the map to use chart.js/helper?

If I use my code I have to modify the code of the "chartjs-plugin-datalabels" file

Here is the line that I add:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('chart.js/helpers'), require('chart.js')) :
  typeof define === 'function' && define.amd ? define(['chart.js/helpers', 'chart.js'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChartDataLabels = factory(global.Chart.helpers, global.Chart));
  }(this, (function (helpers, chart_js) { 'use strict';
////////////////////////////////////////////////////
  helpers = helpers.helpers; // This line
///////////////////////////////////////////////////
  var devicePixelRatio = (function() {
    if (typeof window !== 'undefined') {
      if (window.devicePixelRatio) {
        return window.devicePixelRatio;
      }
  
      // devicePixelRatio is undefined on IE10
      // https://stackoverflow.com/a/20204180/8837887
      // https://github.com/chartjs/chartjs-plugin-datalabels/issues/85
      var screen = window.screen;
      if (screen) {
        return (screen.deviceXDPI || 1) / (screen.logicalXDPI || 1);
      }
    }
  
    return 1;
  }());

Best regards

@LeeLenaleee
Copy link
Contributor

Might needs to be the same as in the rollup config: https://github.com/chartjs/chartjs-plugin-datalabels/blob/master/rollup.config.js#L24

So instead of:

 map: {
    datalabels: {
      "chart.js": "chart",
      "chart.js/helpers": "chart"
    }
  }

You get:

 map: {
    datalabels: {
      "chart.js": "chart", // Not sure if it also needs to be capatalized C as in the rollup config
      "chart.js/helpers": "chart.helpers" // Not sure if it also needs to be capatalized C as in the rollup config
    }
  }

@Funky89
Copy link
Author

Funky89 commented Jan 17, 2022

@LeeLenaleee Hello,
I had already tried and I get the same error mentioned above.
Impossible to do the relation directly from the require, I don't know why

@kevinamixys
Copy link

did you find any solution ? I got the same problem with another plugin (annotation) @LeeLenaleee

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants