sgratzl/chartjs-chart-geo

How can I add labels to countries with values > 0

Closed this issue · 1 comments

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

  • 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",
									},
								},
							},
						}
					);
				});
		}

`

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