sgratzl / chartjs-chart-geo

Chart.js Choropleth and Bubble Maps
https://www.sgratzl.com/chartjs-chart-geo/
MIT License
347 stars 36 forks source link

How can I add labels to countries with values > 0 #230

Closed GabrielDvt closed 4 months ago

GabrielDvt commented 5 months ago

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?

image

Context

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 5 months ago

labels are provided by the https://github.com/chartjs/chartjs-plugin-datalabels. This plugin just renders the map