chartjs / chartjs/chartjs-plugin-datalabels

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

Open
#303 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
920
Forks
507
PR merge metrics
No merged PRs in 30d

Description

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:

```


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'
}
}

}
}
}
});
});

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.