HTML
<!DOCTYPE html>
<html>
<body style="width: 640px; height: 360px;">
<button id="toggleStack">Toggle bar stack</button>
<div id="chart" style="width: 100%; height: 100%;"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"
integrity="sha512-k37wQcV4v2h6jgYf5IUz1MoSKPpDs630XGSmCaCCOXxy2awgAWKHGZWr9nMyGgk3IOxA1NxdkN8r1JHgkUtMoQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script language="javascript">
// Source - https://stackoverflow.com/questions/78893663/apache-echarts-stacking-unstacking-rearranges-bars
// Posted by null
// Retrieved 2026-06-17, License - null
function showStack( theParams ) {
// ---------
let value1
,value2
;
debugger;
theParams[0].seriesName
if ( theParams.stackName ==='Jim') {
debugger;
} else if ( theParams.seriesName ==='Mag') {
debugger;
}
}
/**
** Initialize
*/
const chartDom = document.getElementById('chart');
const chart = echarts.init(chartDom);
/**
** Data
*/
const categoryData = ['2026_S01', '2026_S02', '2026_S03', '2026_S04', '2026_S05'];
const
// First stack 'Jim'
JimLV = [3, 5, 7, 6, 8]
,JimCL = [1, 0, 0, 1, 1]
,JimAB = [0, 0, 0, 0, 0]
,JimII = [0, 1, 0, 1, 0]
,JimEC = [6, 7, 9, 8, 7]
,// Second stack 'Mag'
MagLV = [0, 1, 2, 1, 0]
,MagCL = [2, 0, 0, 0, 1]
,MagAB = [3, 0, 1, 0, 0]
,MagII = [1, 1, 1, 1, 1]
,MagEC = [5, 8, 6, 9, 7]
// Third stack, etc.
;
/**
** Option
*/
const option = {
tooltip: {
trigger: 'axis',
type: 'shadow',
// formatter: showStack
},
legend: {},
yAxis: {},
xAxis: {
type: 'category',
data: categoryData,
},
series: [
{
type:'bar',stack:'Jim',name:'LV',data: JimLV
},{
type:'bar',stack:'Jim',name:'CL',data: JimCL
},{
type:'bar',stack:'Jim',name:'AB',data: JimAB
},{
type:'bar',stack:'Jim',name:'II',data: JimII
},{
type:'bar',stack:'Jim',name:'EC',data:...