I'm familiar with the need to set
Chart.defaults.global.animation.duration = some valueBelow is the Chart Component code.
<script>
import Chart from 'chart.js'
import config from '../config.js'
Chart.defaults.global.animation.duration = 3000
export default {
name: 'Chart',
props: ["positions"],
data() {
return {
}
},
created() {
this.loadData()
this.createChart('canvas', config)
},
methods: {
loadData() {
this.positions.forEach((position) => {
config.data.labels.push(position.symbol)
config.data.datasets[0].data.push(position.closePrice)
})
},
createChart(id, data) {
const ctx = document.getElementById(id)
new Chart(ctx, {
type: data.type,
data: data.data,
options: data.options,
});
}
}
}
</script>
The configuration for the chart.
const config = {
type: 'pie',
data: {
labels: [],
datasets: [
{
label: '',
data: [],
backgroundColor: [
'#48beff',
'#3dfaff',
'#43c59e',
'#3d7068',
'#14453d',
],
borderWidth: 1
}
]
},
options: {
legend: {
display: false
},
},
}
export default config