I want series A (Horizontal Bar chart) data to be always of length 11. but if the data of series B increases from 11 it also effect series A. The horizontal bar chart show threshold and line chart show data from center. the sensor data updates every hour. so its length is not consistent. but threshold data (Series A) data should always be consistent but it is being effected by series B data.
let chartOptions = {
chart: {
toolbar: {
show: false,
},
},
stroke: {
width: [0, vhToPixels(0.4)],
curve: 'smooth',
},
plotOptions: {
bar: {
horizontal: true,
barHeight: '111%',
borderRadius: 0,
distributed: false,
dataLabels: {
enabled: false,
},
stroke: {
width: 0,
},
},
},
markers: {
size: vhToPixels(0),
},
xaxis: {
categories: ['Series B'],
labels: {
show: false,
style: {
fontSize: '1.7vh',
},
},
},
yaxis: {
min: 0,
max: 100,
tickAmount: 5,
labels: {
show: true,
formatter: (value) => `${value.toFixed(0)}%`,
style: {
fontSize: '1.7vh',
},
},
},
grid: {
strokeDashArray: 2,
},
tooltip: {
shared: false,
},
}
const hydroData = {
series: [
{
name: 'Series A',
type: 'bar',
data: [0, 0, 0, 0, 0, 100, 100, 0, 0, 0,0],
color: "#C1C6B7",
},
{
name: 'Series B',
type: 'line',
data: [
78,
78,
78,
78,
78,
78,
78,
43,
43,
43,
43,
],
},
],
options: chartOptions,
};
<ApexCharts
options={hydroData.options}
series={hydroData.series}
height={'80%'}
/>
I want the graph to show series A (Horizontal Bar chart) to be not effected by the series B (Linechart) data.