Implementing a choropleth chart in Anguar 2+ using chartjs-chart-geo

Viewed 46

I need to create a geo chart and I have installed the chartjs-chart-geo to implement a chart that simple show the total sales per state.

I got this error when trying to fetch the features from the topojson object and I got stack in here. Can any of you please help me ?

Error:

Property 'features' does not exist on type 'Feature<Point, GeoJsonProperties>'.

Here's my unfinish component code:

import { Component, OnInit } from '@angular/core';
import { DashboardService } from '../../../modules/dashboard.service';
import { Chart, registerables } from 'chart.js';
import { ChoroplethController, GeoFeature, ColorScale, ProjectionScale } from 'chartjs-chart-geo';
import * as ChartGeo from 'chartjs-chart-geo'
import ChartDataLabels from 'chartjs-plugin-datalabels';

// register controller in chart.js and ensure the defaults are set
Chart.register(ChoroplethController, GeoFeature, ColorScale, ProjectionScale);
Chart.register(...registerables);
Chart.register(ChartDataLabels);

// Get the topojson file examples
const url = 'https://unpkg.com/world-atlas@2.0.2/countries-50m.json';
// const url =  'https://unpkg.com/us-atlas/states-10m.json';

@Component({
  selector: 'quotes-by-state',
  templateUrl: './quotes-by-state.component.html',
  styleUrls: ['./quotes-by-state.component.css']
})
export class QuotesByStateComponent implements OnInit {

  chart:any;
  
  constructor(private dashService: DashboardService) { }

  ngOnInit(): void {
    // Prepare chart
    this.createChart();
  }

  // Create chart component
  createChart() {

    // 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;

    fetch(url).then((result) => result.json()).then((datapoint) => {

      // Get ChartGeo features from json
      const nation = ChartGeo.topojson.feature(datapoint, datapoint.objects.countries).features;


      this.chart = new Chart('geo-chart', {
        type: 'choropleth',
        data: {
          labels: ['a', 'b', 'c'],
          datasets: [
            {
              label: 'Contries',
              outline: nation,
              data: null, //states.map(country => ({feature: country, value: Math.random() * 100})),
            },
          ]
        },
        options: {
          responsive: true,

        }
      });

    });
  }
}
0 Answers
Related