CODEWITHSUNDEEP
webchartsecharts
wayen
wayen

Reputation: 53

echarts display corresponding legend for each bar

echarts version 3.5.4

I created a bar chart, and I want to display corresponding legend for each bar. However, it seems that the legend can only be displayed for series.

For example, I have a series and it has six data items. That means six bars will be shown. So how can I display a legend for each of these six bars?

Upvotes: 3

Views: 13655

Answers (1)

Clocher Zhong
Clocher Zhong

Reputation: 2456

Unfortunately, you just can't display corresponding legend for each bar.

In chart without axis like pie, funnel , you can display legend for each data,

like this demo

In chart with axis like line, bar, you can only display legend for each series,

like this demo

------addition ----

can we make each bar a separate series, and then make the chart look the same as only one series?

Yes, check this demo

However, some key points should be noticed to achieve this,

  • first, data of every series must have same length, so null value should be used as complement.

  • in order to have suitable bar width, every series must use stack option.

let echartsObj = echarts.init(document.querySelector('#canvas'));


	option = {
	    color: ['#3398DB', '#5528DB', '#ff00DB', '#3300DB', '#de3423'],
	 
	    xAxis : [
	        {
	            type : 'category',
	            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	        }
	    ],
	    legend: {
	    	data: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6']
	    },
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'data1',
	            type:'bar',
		          stack: 'stack',
	            data:[10, , , , ,,,]
	        }, {
	            name:'data2',
	            type:'bar',
							stack: 'stack',
	            data:[, 22, , , ,,,]
	        }, {
	            name:'data3',
	            type:'bar',
							stack: 'stack',
	            data:[, , 35, , ,,,]
	        }, {
	            name:'data4',
	            type:'bar',
							stack: 'stack',
	            data:[, , , 70, ,,,]
	        }, {
	            name:'data5',
	            type:'bar',
							stack: 'stack',
	            data:[, , , , 155,,,]
	        },  {
	            name:'data6',
	            type:'bar',
	            stack: 'stack',
	            data:[, , , , ,40,,]
	        }
	    ]
	};
  echartsObj.setOption(option)
<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="canvas" style="width: 100%; height: 200px">
        </div>
      </body>
    </html>

Upvotes: 7

Related Questions