I'm trying to make a graph with values one after the other, crossed by a percentage, but the plot is stacking the values, and I can't make them all start from 0.
Here is the code, Am I doing something wrong?
rangeBarOverlap: true should do this, but apparently it's only available for horizontal bars
<apexchart
class="apexchart"
:class="className"
:height="height"
:options="chartOptions"
:series="series"
:type="type"
></apexchart>
series: this.serie,
chartOptions: {
chart: {
redrawOnParentResize: true,
stacked: this.stacke,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
type: 'line',
},
tooltip: {
followCursor: true,
},
plotOptions: {
bar: {
rangeBarOverlap: false,
rangeBarGroupRows: true,
},
},
colors: [
function ({ value }) {
if (value < 0) {
return '#0C8E65';
}
return '#0C8E65';
}, function ({ value }) {
if (value < 0) {
return '#033323';
}
return '#033323';
},
'#FEB019',
],
dataLabels: {
enabled: true,
enabledOnSeries: [2],
formatter(val) {
return `${val} %`;
},
},
xaxis: {
tickPlacement: 'between',
tooltip: {
enabled: false,
},
categories: this.xLabel,
type: 'category',
},
yaxis: [
{
max: this.max,
min: this.min,
labels: {
show: true,
formatter: (val) => `R$ ${NumberHelper.toShortAbsolute(val, 0)}`,
forceNiceScale: false,
},
},
{
max: this.max,
min: this.min,
labels: {
show: false,
formatter: (val) => `R$ ${NumberHelper.toShortAbsolute(val, 0)}`,
},
},
{
max: this.maxPercentage,
min: 0,
opposite: true,
labels: {
formatter: (val) => `${parseInt(val, 10)} %`,
},
},
],
},