Hello guys,
I'm working with PieChart, and I give dataSource by props. props data come from API call.
It works, but when I click the legends and I re-click legends the data not appear.
Where I wronge?
The same codice without props works without problem.
here the code:
thank you :)
<script>
/* eslint-disable */
script>
<template>
<div>
<ejs-accumulationchart
id="container-pie-chart-maggiore-incasso"
:title="title"
:legendSettings="legendSettings"
>
<e-accumulation-series-collection>
<e-accumulation-series :dataSource="dataMaggioreIncasso" xName="x" yName="y" :dataLabel="datalabel" :pointColorMapping="pointColorMapping" />
e-accumulation-series-collection>
ejs-accumulationchart>
div>
template>
<script>
import Vue from "vue";
import { AccumulationChartPlugin, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts"
Vue.use(AccumulationChartPlugin)
export default {
props: {
dataMaggioreIncasso: {
type: Array,
required: true,
},
},
data() {
return {
legendSettings: {
visible: true,
},
datalabel: { visible: true, name: 'text' },
tooltip:{enable: true, format: '${point.x} : ${point.y}%'},
pointColorMapping: 'fill',
title: 'Quantità più vendute(%)',
seriesData: [
{ x: 'Jan', y: 3, fill: '#498fff', text:'January' }, { x: 'Feb', y: 3.5, fill: '#ffa060', text: 'February' },
{ x: 'Mar', y: 7, fill: '#ff68b6', text: 'March' }, { x: 'Apr', y: 13.5, fill: '#81e2a1', text: 'April' },
]
};
},
provide: {
accumulationchart: [PieSeries, AccumulationLegend ]
}
};
script>
<style>
#container-pie-chart-maggiore-incasso {
height: 350px;
}
style>
