chart-geo with angular

[matheuspizzolato]

Hi!

Is possible to use chart-geo with angular and I really to triying create this example with Brazil map, is possible to share with me?

thanks a lot

[sgratzl]

re angular: this is just a plugin that extends chart.js so you can use tools like ng2-chartjs which embed chart.js in Angular.

Based on that I created the Choropleth map from the example in Angular in https://codesandbox.io/s/angular-chartjs-geo-npzhk?file=/src/app/app.component.ts

[matheuspizzolato]

@sgratzl thanks a lot! I will use your example!

[matheuspizzolato]

Hi @sgratzl sorry for reopen this issue!

So I try to use your example and I solution my problem with this new simple example. If someone would like know how create map country with angular just use it.

https://codesandbox.io/s/angular-brazil-map-0wd02?file=/src/app/app.component.ts

[armved]

Hi @sgratzl
I've tried to reproduce your example in my project but I'm getting error which says
"choropleth" is not a chart type.

Is there a specific place where I should register choropleth as new chart type or I'm doing something wrong?

my chartjs version is 2.9.3 and chartjs-chart-geo version is 2.1.0

[armved]

Well, I simply forgot to add following import
import "chartjs-chart-geo";

Sorry for bothering you :)

[bhayanisumit-amt]

hello @sgratzl
i am implmenting chartjs-chart-geo with us map.
but i got this error

ROR Error: "choropleth" is not a registered controller.

my chartjs version : 4.3.0 and chartjs-chart-geo version : 4.2.0

here it's my html
<canvas
baseChart
[datasets]="geoChartData"
[labels]="geoChartLabels"
[options]="geoChartOptions"
[legend]="geoChartLegend"
[type]="'choropleth'"

>
</canvas>

here it's my components

import { feature } from "topojson-client";

import "chartjs-chart-geo";

export class MapComponent implements OnInit {

geoChartType = "choropleth";
readonly geoChartLegend = false;
readonly geoChartOptions = {
responsive: true,
scale: {
projection: "albersUsa"
} as any,
geo: {
colorScale: {
display: true,
position: "bottom",
quantize: 5,
legend: {
position: "bottom-right"
}
}
}
};
geoChartLabels :any;

geoChartData :any;
constructor(private http: HttpClient) {

}

ngOnInit() {
fetch('https://unpkg.com/us-atlas/states-10m.json').then((r) => r.json()).then((us) => {

const nation = (feature(us, us.objects.nation) as any).features[0];
const states = (feature(us, us.objects.states) as any).features;
this.geoChartData = [
  {
    label: "States",
    outline: nation,
    data: states.map((d:any) => ({
      feature: d,
      value: Math.random() * 10
    }))
  }
];
this.geoChartLabels = states.map((d:any) => d.properties.name);


})

}
}

[AdoniasAlcantara]

This example doesn't seem to work anymore.

https://codesandbox.io/s/angular-chartjs-geo-npzhk?file=/src/app/app.component.ts