Apexchart can do column overlap over each other instead of stacking?

17 Views Asked by At

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)} %`,
              },
            },
          ],
      },

Graph visualization

0

There are 0 best solutions below