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%" />);

[krisquigley]

Needed this just now @adam-kramer. Works beautifully, thank you so much for this! ❤️

What's the best way to donate towards the project?

[theolevisage]

I tried implementing it with vue-apexcharts but it doesn't seem to be working yet, the numbers appear on the chart but there are no lines. But maybe I'm doing something wrong.

<vue-apexchart type="bar" width="100%" :options="chartOptions" :series="series"></vue-apexchart>

    return {
      modaleBc: false,
      height: null,
      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"
        }
      ],
      chartOptions: {
        chart: {
          background: "#ffffff",
          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"
            }
          }
        ]
      }
    }
  }

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[varesleader]

hi @junedchhipa !

please checkout below chart . some grid lines are not fitted on chart series.

I saw this bug only in horizontal stacked bar chart.

any suggestion?
/////////////

//////////////

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
font-family: Roboto, sans-serif;
}

#chart {
max-width: 650px;
margin: 35px auto;
}
///////////////////////////

    var options = {

grid: {
show: true,
borderColor: '#90A4AE',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 2000
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
}
,
series: [{
name: 'Marine Sprite',
data: [40, 20, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [40, 20, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [40, 20, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 20, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 20, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
position:'top',
tickAmount:10,
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();

[aminebelmahi]

@adam-kramer There is no "column" series type

[malcolmdcosta911]

i used Chart.js with react-chartjs-2

pls install "react-chartjs-2": "^5.2.0", and "chart.js": "^4.3.0",

My Code :

import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import { format } from 'date-fns';

ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);

const options = {
animation: {
duration: 0
},
plugins: {
title: {
display: false,
},
legend: {
display: true,
position: "bottom",
}

},
maintainAspectRatio: false ,
scales: {
A: {
type: 'linear',
display: true,
position: 'left',
suggestedMin:0,
},
B: {
type: 'linear',
display: true,
position: 'right',
min:0,

  grid: {
    drawOnChartArea: false, 
   
  },
},

},

};

const getFormattedDateArr = (arr) => {
const data = arr
.map(dated=> format(new Date(dated), 'dd LLL'))
.map(dated=> dated ? String(dated).toUpperCase() : dated);
return data;
}

export default function StackedBarLine({ data }) {

//console.log('StackedBarLine', data);

const dataaaaaa = {
labels: data?.dates?.length > 0 ? getFormattedDateArr(data?.dates) : [],
datasets: [
{
label: 'Negative',
data: data?.neg_sent?.length > 0 ? data?.neg_sent.map(val => Number(val.value)) : [],
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0, 0.5)',
stack: 'combined',
type: 'bar',
yAxisID: 'A',
},
{
label: 'Neutral',
data: data?.neu_sent?.length > 0 ? data?.neu_sent.map(val => Number(val.value)) : [],
borderColor: 'rgb(255, 165, 0)',
backgroundColor: 'rgb(255, 165, 0, 0.5)',
stack: 'combined',
type: 'bar',
yAxisID: 'A',
},
{
label: 'Positive',
data: data?.pos_sent?.length > 0 ? data?.pos_sent.map(val => Number(val.value)) : [],
borderColor: 'rgb(50, 205, 50)',
backgroundColor: 'rgb(50, 205, 50, 0.5)',
stack: 'combined',
type: 'bar',
yAxisID: 'A',

  },
  {
    label: 'Volume',
    data: data?.news?.length > 0 ? data?.news.map(val => Number(val.value)) : [],
    borderColor: 'rgb(46, 147, 250)',
    backgroundColor: 'rgb(46, 147, 250, 0.5)',
    stack: 'combined',
    yAxisID: 'B',
   

  }
]

};

return <>

</>

;

}