ECharts unkown series undefined - series

Question

I am trying to use echarts bar https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation&lang=ts for displaying data . The problem I have is when trying to add four different bars to a chart I get error: [ECharts] Unkown series undefined. It works fine when there is only one bar. Here is my code:
this.chartOptions = {
grid: {
top: 20,
bottom: 90,
right: 5,
left: 60
},
legend: {
data: [
'Positive Capacity'
'Negative Capacity'
'Positive Energy'
'Negative Energy'
]
},
tooltip: {
trigger: 'axis',
formatter: (val) => `
<div>${format.formatTime('dd.MM.yyyy hh:mm', val[0].data[0])}</div>
<div>${val[0].marker}<span style="float:right"> ${val[0].data[1]} kW</span></div>
`
},
xAxis: {
type: 'time',
name: this.chartTranslations.xAxis,
nameLocation: 'middle',
nameGap: 80,
axisLabel: {
rotate: 45,
formatter: (val) => format.formatTime('dd.MM.yy hh:mm', val)
}
},
yAxis: {
type: 'value',
name: this.chartTranslations.yAxis,
nameLocation: 'middle',
nameGap: 50,
scale: true,
boundaryGap: ['2%', '2%'],
axisLabel : {
formatter: (val) => this.isMegaWatts ? (val/1000 + ' MW') : (val + ' kW')
},
},
series: [
{
name: 'Positive Capacity'
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(0, 0, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.positiveCapacity
},
{
name: 'Negative Capacity',
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(5, 5, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.negativeCapacity
},
{
name: 'Positive Energy',
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(10, 10, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.positiveEnergy
},
{
name: 'Positive Capacity',
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(20, 20, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.negativeEnergy
}
]
};
Then later setting content with: Echarts.setOption(this.chartOptions);
Thanks for any help or insight.