Geo map Features Co-ordinates showing on map
Thishonjoel opened this issue · 3 comments
I have tried Chart-geo map but, features co-ordinates showing on map like this,
On .ts file in imported like these, i want that feature value should not show on map, like below image,
don't know what i missed, kindly help
import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import * as ChartGeo from 'chartjs-chart-geo'
Chart.register(ChartDataLabels);
ngOnInit(): void {
fetch('https://unpkg.com/us-atlas/states-10m.json').then((r) => r.json()).then((us) => {
/* const nation = ChartGeo.topojson.feature(us, us.objects.nation).features[0];
const states = ChartGeo.topojson.feature(us, us.objects.states).features; */
const nation = (ChartGeo.topojson.feature(us, us.objects.states) as any).features[0];
const states = (ChartGeo.topojson.feature(us, us.objects.states) as any).features;
let ctx= 'mapChart'
const chart = new Chart(
ctx, {
type: 'choropleth',
data: {
labels: states.map((d:any) => d.properties.name),
datasets: [{
// label: 'States',
// outline: nation,
data: states.map((d:any) => ({feature: d, value: Math.random() * 10})),
}]
},
options: {
plugins: {
legend: {
display: false
},
},
scales: {
xy: {
projection: 'albersUsa',
},
color: {
quantize: 5,
legend: {
position: 'bottom-right',
align: 'bottom'
},
}
},
}
});
});
}
you are using the data labels plugin which is about showing the label on the chart. However, you have to configure it such that it will show only the element you want
Thank you so much ... i did it like this chart option, my problem solved, thank you
datalabels: {
display:false
},