Comments (7)
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
from chartjs-chart-geo.
@sgratzl thanks a lot! I will use your example!
from chartjs-chart-geo.
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
from chartjs-chart-geo.
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
from chartjs-chart-geo.
Well, I simply forgot to add following import
import "chartjs-chart-geo";
Sorry for bothering you :)
from chartjs-chart-geo.
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);
})
}
}
from chartjs-chart-geo.
This example doesn't seem to work anymore.
https://codesandbox.io/s/angular-chartjs-geo-npzhk?file=/src/app/app.component.ts
from chartjs-chart-geo.
Related Issues (20)
- bubbleMap with countries HOT 2
- ticks position HOT 1
- error in vite HOT 3
- ChoroplethController is not assignable to ChartComponentLike HOT 3
- TS error on import
- TS Error on import of library HOT 1
- How to have tooltip when no legend is shown HOT 2
- Choropleth doesn't appear HOT 2
- Large values get cut off in choropleth chart HOT 1
- Can't understand how to use in JSX HOT 2
- How to use bubble map with longitude and latitude HOT 4
- Samples on Readme doesn't work, 404 for https://github.com/sgratzl/chartjs-chart-geo/tree/main/samples HOT 3
- Fix the npm example
- Map of Europe HOT 1
- Pacific Centered World Map. HOT 1
- Small countries as circles in choropleth map? HOT 4
- Canvas size is greater than map width? HOT 1
- Any plan for support chart v4~ HOT 1
- How to do a bubbleMap using the world HOT 3
- Broken links HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartjs-chart-geo.