sgratzl / chartjs-chart-geo

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

Geo map Features Co-ordinates showing on map #122

Closed Thishonjoel closed 2 years ago

Thishonjoel commented 2 years ago

I have tried Chart-geo map but, features co-ordinates showing on map like this,

Screenshot 2022-07-28 at 4 38 54 PM

On .ts file in imported like these, i want that feature value should not show on map, like below image, 78821942-8b974700-79da-11ea-988d-142f7788ffe6

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

sgratzl commented 2 years ago

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

Thishonjoel commented 2 years ago

Thank you so much ... i did it like this chart option, my problem solved, thank you

datalabels: { display:false },

Thishonjoel commented 2 years ago

Hi Samuel,

I want to show USA states in different colors by their name eg: if states == california i should show in red color, etc., is there any way to do that. kindly help me

On Fri, Jul 29, 2022 at 4:45 AM Samuel Gratzl @.***> wrote:

Closed #122 https://github.com/sgratzl/chartjs-chart-geo/issues/122 as not planned.

— Reply to this email directly, view it on GitHub https://github.com/sgratzl/chartjs-chart-geo/issues/122#event-7085572391, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZHRK4WAECMD4KUKS7I2NADVWMICHANCNFSM54436EDQ . You are receiving this because you authored the thread.Message ID: @.***>