Apexcharts.js: Stacked Bar Graph with Line?

[RyanMooreOPS]

Hello - I'm trying to figure out how I can implement a stacked bar graph WITH a line. Whenever "stacked = True," the columns are parallel and not stacked. Only 1 axis is required. I'm looking forward to working with Apex Charts - really good stuff.

Thanks,

[junedchhipa]

Hi @RyanMooreOPS
Currently, in mixed charts - stacked bars is not supported along with lines even though there is just 1 y-axis.

I have intentionally disabled the stacking in mixed-charts as there are a lot of other things to take care when dealing with this kind of chart.
I will surely give this an attempt in the future though.
Thank you

[junedchhipa]

Re-opening this.
The functionality will be released in v2.2.3

[bmacher]

Hello, is there an example of how to set up a stacked (100%) bar chart with a line chart?

[junedchhipa]

100% Stacked line/area chart is not supported yet.

[bmacher]

Do you have any idea when it will be supported?

[CalyphoZz]

I am looking for this fonctionnality aswell... thanks to say when it will be released :D

[junedchhipa]

Please open a new ticket for a new feature request as the original issue is resolved.

[CalyphoZz]

Do you mean 100% Stacked line/area chart is now supported ?

[junedchhipa]

No, the original issue is about stacked bar chart with a line chart.
100% stacked line/area chart is not supported yet.

[CalyphoZz]

Is 100% stacked columns / line supported ? If not i will open a ticket ! thanks for the fast anwser

[lacieri]

Please open a new ticket for a new feature request as the original issue is resolved.

There is still a bug related to how scales are computed when a stacked chart is combined with a line chart ( See also #531 ). The values for the line chart series are included when computing the stack scale, leaving empty space in either direction.
This could be solved by making stacked option support an array of values, similar to how stroke properties are handled.

[MarcelFranken]

any update? got the same problem

[accolver]

Checking in also. Any update or workaround for this? Love the library BTW

[Adriien-M]

+1 we have the same issue...

[franciscoh017]

@junedchhipa updates?

[adam-kramer]

Just recently implemented this. Example below.

const series = [
    {
      data: [4,5,6],
      name: "Complete",
      type: "column"
    },
    {
      data: [1,2,3],
      name: "Pending",
      type: "column"
    },
    {
      data: [10, 50, 90],
      name: "Percentage",
      type: "line"
    }
  ];

const options = {
    chart: {
      background: "#222",
      height: 400,
      redrawOnParentResize: true,
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      },
      type: "line"
    },
    colors: ["red", "blue", "green"],
    dataLabels: {
      enabled: true,
      enabledOnSeries: [2]
    },
    noData: {
      align: "center",
      text: "No data available at the moment",
      verticalAlign: "middle"
    },
    plotOptions: {
      bar: {
        borderRadius: 8,
        horizontal: false
      }
    },
    stroke: {
      width: [0, 0, 4]
    },
    title: {
      text: "Completion Count and Percentage"
    },
    theme: {
      mode: "dark"
    },
    xaxis: {
      categories: ["Label 1", "Label 2", "Label 3"],
      type: "category"
    },
    yaxis: [
      {
        title: {
          text: "Counts"
        }
      },
      {
        max: 100,
        min: 0,
        opposite: true,
        title: {
          text: "(%) Complete"
        }
      }
    ]
  };
return (<Chart options={options} series={series} type="bar" width="100%" />);