[Chartjs]-Map JSON for Chartjs with Angular 7

by

2👍

✅

To get the “values” from your JSON array, you can use:

dringlichkeiten.map(x => x.value)

This will get you an array you require, i.e.:

[883, 5925, 17119, 27114, 2758]

You can then pass this array to chartJS for it to render you a chart like so:

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: dringlichkeiten.map(x => x.id),
    datasets: [
      {
        label: 'My Bar Chart',
        data: dringlichkeiten.map(x => x.value),
        backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange']
      }
    ]
  },
});

Take a look at this simplified working SlackBlitz example.

Hope this helps!

Leave a comment