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.