score: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>


Related Query

More Query from same tag