Search code examples
echarts

ECharts Stacked Bar Chart: Setting BorderRadius on Topmost Bar Only

I am using Apache eCharts and I have created a stacked bar chart.

It works, but now I want to put a border radius on the top stacked bar.

I do not want all bars to be rounded, only the very top bar, whatever that may be.

In the image below the stacked bars on the left have a green 2012 which is currently the top stack and correctly rounded using borderRadius.

But the right stacked bars do not have a value for 2012 because it is undefined for that country. So the top series in that case is actually 2011 which does not get the borderRadius applied.

So how do I apply a border radius on the top stacked bar, whatever that may be?

Here is a live demo.

See image here:

enter image description here

Here is my current code:

option = {
  legend: {},
  tooltip: {},
  dataset: {
    dimensions: ['country', '2012', '2011'],
    source: [
      { country: 'Brazil', 2011: 70, 2012: 30 },
      { country: 'Indonesia', 2011: 100, 2012: undefined }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      name: '2011',
      type: 'bar',
      stack: 'years',
      encode: {
        x: 'country',
        y: '2011'
      }
    },
    {
      name: '2012',
      type: 'bar',
      stack: 'years',
      encode: {
        x: 'country',
        y: '2012'
      },
      itemStyle: { borderRadius: [30, 30, 0, 0] }
    }
  ]
};
Solution

  • I dont think this is possible. The best workaround I can think of is using barMinHeight to always make the top bar appear but this would make the visualization incorrect.

    Here is an example:

    option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  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, 0],
      barMinHeight: 15,
      itemStyle: {
          borderRadius: [10, 10, 0, 0], // Adding border radius here
        },
    }
  ]
};