AreaChart disappears for 5th Dataseries

[fxFlocke]

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:

Uncaught (in promise) TypeError: e.push is not a function NuxtJS 29 value value value value value value value ce setup createHook callWithErrorHandling callWithAsyncErrorHandling __weh flushPostFlushCbs flushJobs promise callback*queueFlush queueJob reload tryWrap accept fetchUpdate queueUpdate queueUpdate handleMessage handleMessage setupWebSocket setupWebSocket <anonymou

ADDITIONALLY, would ne be nice to know how to change the color for my labels and the legend. Tried everything but didn't seem to work! Example in the code above. PLUS, I can't see an option configure the tooltip-color. Could be dealbreaker to use the lib, cause I have a Light-Theme and the default Tooltip is dark.

[fxFlocke]

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.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.