Chartjs-Why isnt vue-chartjs receiving data from api?

by

0👍

Turns out i was missing the array position [0]. And I was missing the v-if.
this.chartData.datasets[0].data = data.holders.map((x) => x.share)

Followed the examples here and here

<template>
  <Pie
    v-if="!loading"
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

<script>
import { Pie } from 'vue-chartjs/legacy'
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'
import EthplorerService from '../../services/EthplorerService'
import CoinGeckoService from '../../services/CoinGeckoService'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default {
  name: 'PieChart',
  components: {
    Pie,
  },
  props: {
    chartId: {
      type: String,
      default: 'pie-chart',
    },
    datasetIdKey: {
      type: String,
      default: 'label',
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 400,
    },
    cssClasses: {
      default: '',
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: true,
      chartData: {
        labels: [],
        datasets: [
          {
            data: [],
            backgroundColor: ['#0074D9', '#FF4136', '#2ECC40', '#39CCCC', '#01FF70', '#85144b', '#F012BE', '#3D9970', '#111111', '#AAAAAA'],
          },
        ],
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
      },
    }
  },
  async mounted() {
    const limit = 10
    try {
      this.loading = true
      const coinData = await CoinGeckoService.getCoinData('chainlink')
      const contractAddress = coinData.data.platforms.ethereum
      const { data } = await EthplorerService.getTopTokenHolders(contractAddress, limit)
      console.log(data.holders.map((x) => x.address.slice(1, 5)))
      console.log(data.holders.map((x) => x.share))
      this.chartData.labels = data.holders.map((x) => x.address.slice(2, 7))
      this.chartData.datasets[0].data = data.holders.map((x) => x.share)
      this.loading = false
    } catch (e) {
      this.loading = false
      console.log(e)
    }
  },
}
</script>

Leave a comment