How can I add labels to countries with values > 0
Closed this issue · 1 comments
GabrielDvt commented
I'm using ChartJS for the first time and would like to add the names of the countries which has value > 0 for identification.
How can I manage to do that, please?
Context
- Version: 4.3.0
- Browser: Google Chrome
Here is my code:
`
const chart = new Chart(
document.getElementById("myChart5").getContext("2d"),
{
type: "choropleth",
data: {
labels: countries.map((d) => d.properties.name),
datasets: [
{
backgroundColor: (context) => {
if (context.dataIndex == null) {
return null;
}
const value = context.dataset.data[context.dataIndex];
if (!value.value) {
return "#FFFFFF";
}
const opacity = findOpacity(
countryOcurrences,
value.value ?? 0
);
return "rgba(8,49,109," + opacity + ")";
},
// label: "Countries",
data: countries.map((d) => {
const countryDataObj = countryOcurrences.find(
(country) => {
return (
country.Country.toLowerCase() ==
d.properties.name.toLowerCase()
);
}
);
return {
feature: d,
value: countryDataObj ? countryDataObj.count : 0,
};
}),
},
],
},
options: {
showOutline: true,
showGraticule: true,
plugins: {
legend: {
display: false,
},
datalabels: {
align: "top",
formatter: (v) => {
console.log(v);
return v.description;
},
},
},
scales: {
projection: {
axis: "x",
projection: "equalEarth",
},
},
},
}
);
});
}
`
sgratzl commented
labels are provided by the https://github.com/chartjs/chartjs-plugin-datalabels. This plugin just renders the map