Fix the npm example
zackees opened this issue · 1 comments
zackees commented
The npm example in the readme is incomplete and doesn't work. Here's one that does.
<canvas id="canvas"></canvas>
import Chart from 'chart.js/auto';
import { ChoroplethController, GeoFeature, ColorScale, ProjectionScale, topojson } from 'chartjs-chart-geo';
// register controller in chart.js and ensure the defaults are set
Chart.register(ChoroplethController, GeoFeature, ColorScale, ProjectionScale);
const CANVAS_ID = "canvas"
const DATA_SOURCE = "https://unpkg.com/us-atlas/states-10m.json";
async function initDynamicContent() {
try {
const response = await fetch(DATA_SOURCE);
const us = await response.json();
const nation = topojson.feature(us, us.objects.nation).features[0];
const states = topojson.feature(us, us.objects.states).features;
const data = {
type: 'choropleth',
data: {
labels: states.map((d) => d.properties.name),
datasets: [{
label: 'States',
outline: nation,
data: states.map((d) => ({feature: d, value: Math.random() * 10})),
}]
},
options: {
plugins: {
legend: {
display: false
},
},
scales: {
projection: {
axis: 'x',
projection: 'albersUsa'
},
color: {
axis: 'x',
quantize: 5,
legend: {
position: 'bottom-right',
align: 'bottom'
},
}
},
}
}
const chart = new Chart(document.getElementById(CANVAS_ID).getContext("2d"), data);
} catch (error) {
console.error("Error fetching and processing data:", error);
}
}
export async function initGeoChart () {
await initDynamicContent();
}