Closed Thishonjoel closed 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
Thank you so much ... i did it like this chart option, my problem solved, thank you
datalabels: { display:false },
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: @.***>
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,![78821942-8b974700-79da-11ea-988d-142f7788ffe6](https://user-images.githubusercontent.com/105846130/181492529-0af0e25d-9c32-4b19-9445-747e688b65c1.png)
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 {
/ 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' }, } }, } }); }); }