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>
Source: stackoverflow.com
Related Query
- why isnt vue-chartjs receiving data from api?
- How to get Data from API to display chart using chartjs in Vuejs
- Why is my data on chartjs not starting from the data that it should
- Svelte , pass data to chartjs from API
- Vue chartjs is not rendering from API
- Why is the data from my API not displaying on my chart.js chart in React?
- Calling data from outside of Chartjs code
- React and Chartjs not updating from dynamic data through api
- Vue.js: How to retrieve data from API for vue chart.js
- Populating a chartJS with data from API through axios (VueJS)
- Chartjs random colors for each part of pie chart with data dynamically from database
- Vuejs with ChartJS populate from API
- React ChartJS prevent new data from being added into state after it's redrawn?
- Filter ChartJS using data from PHP
- Using data from API with Chart JS
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- I can't add data to chartjs from codeigniter
- Chartjs not working with d3 from csv source
- How To Use Api Data With Vue Chart.js
- Chart.js not updating or receiving data from Flask python
- create Chart.js after getting data from api
- Initialize a Chart.js chart with data from an api
- How to handle data API from Django Rest Framework in Chart.js
- Receiving json data from a server to display a chart.js graph not working
- chartjs xaxis ticks with round values from shifted input data
- Passing JSON data from PHP array into ChartJS
- Implementing Data Decimation in vue chartjs
- How to fetch all data from API files and assign their values to chart?
More Query from same tag
- Print chart using chart js
- Data updating but chart isn't
- Is there any method to map or represent API data to Chart in ReactJS?
- How to show only the data points that have a change in Chartjs?
- Charts.js tooltip overlapping text on chart
- How i can localize days and month name in ChartJS 3.x?
- Implement Chart.js Plugin Meteor Project
- Angular 2: How to pass my API data to graph and Display the Graph with data
- dynamic number of chart.js charts on the same page
- Chartjs line graph point hover animation buggy / jumpy
- Chart.js v2: How to make tooltips always appear on pie chart?
- hover/mouseover not activated on every move inside element
- How to remove background color and color example from tooltip in Chart.js?
- How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?
- Create chart using one of the given javascript libraries
- Laravel - production.ERROR: Undefined variable: department_chart_data in Chartjs barchart
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- How to disable canvas elements from hijacking mouse wheel when scrolling through a page?
- Bootstrap grid not working with canvas
- Ng2-charts set color for one specific value in dataset
- Having different colors per bar with angular charts chart.js v2
- Update Chart.js plugin
- How to inject data into chartjs plugin function?
- Chart.js with dual axis on bar and line graph
- How to add overlay color to chart.js pie chart segment?
- Charts.js: Load new data set to an existing chart
- Define backgroundColor from data in chartJS
- Array of objects condensed into array of unique objects with nested array
- ChartJS How to set color to just one bar
- The real time chart sometimes does not display when I switch the target