2

I want to make a bar-chart like this using ECHARTS :

I have tried using their example, but I don't find any option to make it multiple colors.

I got an answer here, it is not useful to make a bar multiple colors.

I have very little knowledge about eCharts. Can anybody give me any reference how can I implement it?

Arif
  • 6,094
  • 4
  • 49
  • 81

1 Answers1

2

You want to have different colors for each series in the stacked bar? Just draw imaginary vertical line across all series value and set color style for all crossing values.


{
          name: 'Series-1',
          type: 'bar',
          stack: '1',
          data: [5, { value: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]
      },{
          name: 'Series-2',
          type: 'bar',
          stack: '1',
          data: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]
      }



  var myChart = echarts.init(document.getElementById('main'));
  var option = {
      title: {
          text: 'ECharts'
      },
      tooltip: {},
      legend: {
          data:['Label']
      },
      xAxis: {
          data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
      },
      yAxis: {},
      series: [{
          name: 'Series-1',
          type: 'bar',
          stack: '1',
          data: [5, { value: 20, itemStyle: { color: 'blue'} }, 36, 10, 10, 20]
      },{
          name: 'Series-2',
          type: 'bar',
          stack: '1',
          data: [5, {value: 20, itemStyle: { color: 'green'} }, 36, 10, 10, 20]
      }
      ]
  };

  myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Sergey Fedorov
  • 3,696
  • 2
  • 17
  • 21
  • In my case, some bar needs only one color. Say, in your example if I want to make Category3 bar only yellow color, how can I do that? – Arif May 28 '20 at 11:14
  • 1
    If you imagine a matrix of values where normal bar use one row by horizontal then stack use one row by vertical. If you want to get stack bar with single color then you need to set for value of each series by vertical this color. – Sergey Fedorov May 28 '20 at 11:33
  • In my example above you need to change blue to green and you get desired. – Sergey Fedorov May 28 '20 at 11:34
  • Yes. I got it. If I face any issue I will get back to you. – Arif May 28 '20 at 11:36