echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] Bar chart with legend issue

Open luojiandan opened this issue 1 year ago • 1 comments

Version

5.4.3

Legend shows color of different series. But my chart has only one series,data color by different sport. I want to show Legend by colors Variables.

Code:

` //test data var arrDatas = [ { name: 'Ronaldo', sport: 'Football', salary: 1.36 }, { name: 'Messi', sport: 'Football', salary: 1.3 }, { name: 'Mbappe', sport: 'Football', salary: 1.2 }, { name: 'James', sport: 'Basketball', salary: 1.19 }, { name: 'Alvarez', sport: 'Boxing', salary: 1.1 }, { name: 'Johnson', sport: 'Golf', salary: 1.07 }, { name: 'Federer', sport: 'Tennis', salary: 0.95 } ]; //color data var colors = { Basketball: '#D09726', Football: '#27D0B3', Tennis: '#267FCF', Golf: '#4CF53E', Boxing: '#D02F27' }; option = { xAxis: { type: 'category', axisLabel:{ interval:0, //show all }, data: arrDatas.map((item) => item.name +'('+ item.sport+')') }, yAxis: { type: 'value' }, legend: {}, series: [ { name:'sport', type: 'bar', data: arrDatas.map((item) => ({ value: item.salary, itemStyle: { color: colors[item.sport] //color } })) } ] };

`

Current Behavior

1.create bar chart like this: Example Code

2.the default legend is not right It only show one color: image

but not show color by sport name. ` //color data var colors = { Basketball: '#D09726', Football: '#27D0B3', Tennis: '#267FCF', Golf: '#4CF53E', Boxing: '#D02F27' };

`

No response

luojiandan avatar Jan 31 '24 14:01 luojiandan

If legend data is not supplied it is populated with series names. So put one series per sport name and it will show up correctly.

Demo

MatthiasMert avatar Jan 31 '24 15:01 MatthiasMert