Re: Best practice for showing totals on stacked bar charts?

[Ovilia]

Hi,

I would recommend creating an invisible bar series to show the total label.
Here's how it works.

const series = [
  {
    name: 'Direct',
    type: 'bar',
    stack: 'total',
    label: {
      show: true
    },
    data: [320, 302, 301, 334, 390, 330, 320]
  },
  {
    name: 'Mail Ad',
    type: 'bar',
    stack: 'total',
    label: {
      show: true
    },
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'Affiliate Ad',
    type: 'bar',
    stack: 'total',
    label: {
      show: true
    },
    data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: 'Video Ad',
    type: 'bar',
    stack: 'total',
    label: {
      show: true
    },
    data: [150, 212, 201, 154, 190, 330, 410]
  },
  {
    name: 'Search Engine',
    type: 'bar',
    stack: 'total',
    label: {
      show: true
    },
    data: [820, 832, 901, 934, 1290, 1330, 1320]
  }
];

const total = {
  type: 'bar',
  data: [],
  name: 'Total',

  // Show total label
  label: {
    show: true,
    position: 'top'
  },

  // Make it invisible
  barGap: '-100%',
  itemStyle: {
    color: 'none'
  },
  silent: true
};

for (let d = 0; d < series[0].data.length; ++d) {
  sum = 0;
  for (let s = 0; s < series.length; ++s) {
    sum += series[s].data[d];
  }
  total.data[d] = sum;
}

series.push(total);

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series
};

https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack&code=tZRNb-IwEIbv-RVzWaUVbJuEVgKyPSDtxwlpJfbjgDiYxCRWjR3FTlu04r_vjO2EtipHDthmMjN-5vXYhVbGguGt4AYeYB0B_MMfgGJ7Pof4q2h5YeOxs9lDQ7Yta4PBWFY8osVqy2SwSbblch6yoEutn-dg2447w9E7lcyyOawnWTKGSZLRkOIwucNhRrYJDVmyQW8X8gZqyYSERXkpqpSo0glSpUSVEhVBZQSVpWegFrudkIJZfkGyzJFNiWyGZBmRZSe9zqH9ESXXlxTs3gmDWJkT7B6x0gHr7hzWirO2qOGbqoTil2KbkmRTOswZsc1IstRpljo6PGePF23yKPLXwe2Ft4E2eAcUsm5oHcr4FcjQcnsLK4QJCRwmWt_gnmA9ZqONsEIrV2ITe6F8qiV75CAsCPUkjNhKKg85frAGnT-nSfLJIQnL9yt7kMjityi01C26KI2y9sobIbmyQaYjlrrTLVxJbqHESpMcpy_hHVgnmxuq8wYjKlvnMBqV1y636fbOGZdDOD0bGG6G8Fdhxof5wNFDn9_4_OsSJSflUWUSrDdiQvTPo2MUhYxNZ-or53ON5Lohwfrz0VpagYr4jWwrqopT9exFmNAvtPyphbL0oe8aFPi34e4bJukD-3zBKZy-qVmpn2OKGdbMQMl3rJM2h4IpYNJo2HKIJXUzoDy9q-_K_iAkr7gqkcP9Oyxw_wHe7_bEZHc6uJcPPAp8ZirdHkJ9oSnjpVbxGBsSo3H6y_HC47-6o-l7K2haMXzMcepUPFxKLzI2xX8&enc=deflate

Thanks

*Ovilia*


Dmitry Baev <d.baev.w...@gmail.com> 于2026年8月3日周一 23:47写道：

> I'm using a stacked bar chart where each segment displays its own value
> with `label.show: true`. I'd also like to display the total value at the
> top of each stacked bar (Mon, Tue, Wed, etc.), while keeping the individual
> segment labels visible.
>
> Is there a recommended or best-practice way to achieve this in ECharts?
>
> Example EchartsOptions:
>
> > option = {
> >   tooltip: {
> >     trigger: 'axis',
> >   },
> >   xAxis: {
> >
> >      type: 'category',
> >     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
> >   },
> >   yAxis: {
> >      type: 'value'
> >   },
> >   series: [
> >     {
> >       name: 'Direct',
> >       type: 'bar',
> >       stack: 'total',
> >       label: {
> >         show: true
> >       },
> >       emphasis: {
> >         focus: 'series'
> >       },
> >       data: [320, 302, 301, 334, 390, 330, 320]
> >     },
> >     {
> >       name: 'Mail Ad',
> >       type: 'bar',
> >       stack: 'total',
> >       label: {
> >         show: true
> >       },
> >       emphasis: {
> >         focus: 'series'
> >       },
> >       data: [120, 132, 101, 134, 90, 230, 210]
> >     },
> >     {
> >       name: 'Affiliate Ad',
> >       type: 'bar',
> >       stack: 'total',
> >       label: {
> >         show: true
> >       },
> >       emphasis: {
> >         focus: 'series'
> >       },
> >       data: [220, 182, 191, 234, 290, 330, 310]
> >     },
> >     {
> >       name: 'Video Ad',
> >       type: 'bar',
> >       stack: 'total',
> >       label: {
> >         show: true
> >       },
> >       emphasis: {
> >         focus: 'series'
> >       },
> >       data: [150, 212, 201, 154, 190, 330, 410]
> >     },
> >     {
> >       name: 'Search Engine',
> >       type: 'bar',
> >       stack: 'total',
> >       label: {
> >         show: true
> >       },
> >       emphasis: {
> >         focus: 'series'
> >       },
> >       data: [820, 832, 901, 934, 1290, 1330, 1320]
> >     }
> >   ]
> > };
>