Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
GabrielDvt opened this issue May 19, 2024 · 1 comment
Closed

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

GabrielDvt opened this issue May 19, 2024 · 1 comment
Labels
answered The question has been answered but is in a waiting state question Further information is requested

Comments

@GabrielDvt
Copy link

GabrielDvt commented May 19, 2024

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

`

@GabrielDvt GabrielDvt added the question Further information is requested label May 19, 2024
@sgratzl
Copy link
Owner

sgratzl commented May 26, 2024

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

@sgratzl sgratzl added the answered The question has been answered but is in a waiting state label Jun 9, 2024
@sgratzl sgratzl closed this as not planned Won't fix, can't repro, duplicate, stale Jun 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered The question has been answered but is in a waiting state question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants