Chartjs-plugin-datalabels: Using plugin with RequireJS

Created on 20 Apr 2018  路  5Comments  路  Source: chartjs/chartjs-plugin-datalabels

Hi

I'd like to use the plugin with RequireJS but not sure how to define require.config. I have followed the similar instructions for streaming plugin (https://stackoverflow.com/questions/48957033/what-is-the-syntax-for-require-config-for-chartjs-plugin-streaming-and-dependenc) but wasn't successful.

Any hint?

Thanks very much

regards, dejan

resolved support

Most helpful comment

@dgambin following stackoverflow suggestion, it works for me: jsfiddle

Seems you just need map:

require.config({
  paths: {
    chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min",
    datalabels: "//cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min"
  },
  map: {
    datalabels: {
      "chart.js": "chart"
    }
  }
});

require(["chart", "datalabels"], function(chart) {
  // ... initialize your chart here ...
});

All 5 comments

@dgambin can you provide the (minimal) code that reproduces your issue (a jsfiddle or a link to your code)? I'm not familiar with RequireJS, so have not clue how it's supposed to be integrated with it.

I basically tried to do the similar thing as described on above link for streaming plugin. I tried a bunch of combinations but the truth is that I don't know requirejs so deep either :-(

Seems like exports and map options in shim configuration are relevant for this but I wasn't successful

@dgambin following stackoverflow suggestion, it works for me: jsfiddle

Seems you just need map:

require.config({
  paths: {
    chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min",
    datalabels: "//cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min"
  },
  map: {
    datalabels: {
      "chart.js": "chart"
    }
  }
});

require(["chart", "datalabels"], function(chart) {
  // ... initialize your chart here ...
});

Thank you very much. It works!

Was this page helpful?
0 / 5 - 0 ratings