fxFlocke
commented
4 months ago I tried to push the datasets piece by piece, instead of feeding them all at once, which resulted in the same error:
`const newDataSeries2 = { name: 'Test', data: [849.45, 1245, 190, 743, 2190] }
const chart = ref({} as ApexCharts)
function appendSeries(){ if(chart.value !== null){ console.log(newDataSeries2) console.log("data: ", newDataSeries2.data) let chartRef = chart.value chartRef.appendSeries([ newDataSeries2 ], true) console.log('appended') }else{ console.log('undefined') } } `
Which gives the following error messages:
Uncaught (in promise) TypeError: e.push is not a function NuxtJS 59 vue3-apexcharts.js:2954:12 It is a possibility that you may have not included 'data' property in series. vue3-apexcharts.js:1887:30 Uncaught (in promise) TypeError: e.push is not a function NuxtJS 34 vue3-apexcharts.js:2954:12 It is a possibility that you may have not included 'data' property in series. vue3-apexcharts.js:1887:30 Uncaught (in promise) TypeError: e.push is not a function NuxtJS 34
EVEN if the Data exists (verified in console):
Object { name: "Test", data: (5) […] } ___.vue:154:12 data:
Array(5) [ 849.45, 1245, 190, 743, 2190 ] ___.vue:155:12 It is a possibility that you may have not included 'data' property in series. vue3-apexcharts.js:1887:30 appended ___.vue:160:12 Uncaught (in promise) TypeError: e.push is not a function NuxtJS 59 vue3-apexcharts.js:2954:12 It is a possibility that you may have not included 'data' property in series.
Hello, I am using vue3-apexcharts with an AreaChart, which disappears if I have more than 4 Dataseries.
Code looks like follows:
Mockup-Data
const chartData = { series: [ { name: "Test1", data: [1246.89, 847.43, 20, 345.5, 2459.82], }, { name: "Test2", data: [890.54, 1309.65, 59, 456.78, 2715.97], }, { name: "Test3", data: [930.45, 1039.45, 260, 105, 2949.45] }, { name: "Test4", data: [349.45, 1745, 390, 543, 2490] }, { name: "Test5", data: [349.45, 1745, 390, 543, 2490] } ] }ChartConfig:
legend: { position: "top", horizontalAlign: "left", fontWeight: 500, fontSize: "14px", onItemClick: { toggleDataSeries: true }, markers: { radius: 99, }, labels: { colors: ["#000000"] } }, colors: ["#11411B", "#2c9d5b", "#3C8256", "#0DEC50", "#45B480", "#CAFDC9"], chart: { fontFamily: "sans-serif", height: 335, type: "area", dropShadow: { enabled: true, color: "#623CEA14", top: 10, blur: 4, left: 0, opacity: 0.1, }, toolbar: { show: true, }, }, responsive: [ { breakpoint: 1024, options: { chart: { height: 300, }, }, }, { breakpoint: 1366, options: { chart: { height: 350, }, }, }, ], stroke: { width: [2, 2], curve: "straight", }, labels: { show: false, position: "top", }, grid: { xaxis: { lines: { show: true, }, }, yaxis: { lines: { show: true, }, }, }, dataLabels: { enabled: false, }, markers: { size: 6, colors: "#fff", strokeColors: ["#11411B", "#2c9d5b", "#3C8256", "#0DEC50", "#45B480", "#CAFDC9"], strokeWidth: 3, strokeOpacity: 0.9, strokeDashArray: 0, fillOpacity: 1, discrete: [], hover: { size: undefined, sizeOffset: 6, }, }, xaxis: { type: "category", categories: [ "example1", "example2", "example3", "example4", "example5" ], axisBorder: { show: false, }, axisTicks: { show: false, }, }, yaxis: { title: { style: { colors: ['#FFFFFF'] }, }, min: 0, max: 3000, },HTML-Script:
<div id="chartOne" className="ml-2"> <VueApexCharts type="area" height="350" :options="apexOptions" :series="chartData.series" ref="chart" /> </div>This gives the following errorMessage & shows no Diagram: