Change color of specific echarts bar using dataset and encode API

Question

I have an bar chart made with echarts in Angular (ngx-echarts), using the dataset + encode API:

const options: EChartOption = {
  tooltip: {},
  dataset: {source: dataSource},
  xAxis: {
    name: xAxisLabel,
    nameLocation: 'middle',
    nameGap: 22,
  },
  yAxis: {
    name: yAxisLabel,
    nameLocation: 'middle',
    nameGap: 25,
  },
  series: [{
    name: field.label,
    type: 'bar',
    encode: {x: xDataField, y: yDataField},
  }],
};

I want to highlight a specific bar by making is red, while setting the rest grey. I realize this can be done easily if I were to declare each data point individually:

series: [{
    data: [
        {
            value: 120,
            itemStyle: {color: 'grey'},
        },
        {
            value: 200,
            itemStyle: {color: 'red'},
        },
        {
            value: 150,
            itemStyle: {color: 'grey'},
        }
    ],
    type: 'bar'
}],

But if possible I would like to avoid that and stick with the dataset + encode API. Is there anyway to address an individual bar and modify its color, or highlight it by default?

score 4 · Answer 1 · answered Aug 31 '21 at 15:46

4

refer to this link: https://echarts.apache.org/v4/en/option.html#series-pie.itemStyle.color

you can get it done using itemStyle.color as a callback function like this:

const colors = {
  positive: '#008000',
  neutral: '#ffa500',
  negative: '#ff0000',
}
// ... 
chart.setOption({
    id: 'pie',
    type: 'pie',
    itemStyle: { 
      // HERE IS THE IMPORTANT PART
      color: seriesIndex => colors[seriesIndex.name] 
    },
    encode: {
      itemName: 'sentiment',
      value: initialDim ,
      tooltip: initialDim
    }
  }
)

answered Aug 31 '21 at 15:46

DanWyry

41
2

it works but messes with the color of the items in the legend – user1519240 Sep 16 '22 at 20:08
where does that seriesIndex comes from? Cannot get it work as I have no visibility on this, thanks – Oleg Oct 27 '22 at 14:03
is there any way to achieve this for the itemStyle.opacity? – erzen May 30 '23 at 13:52

score -2 · Answer 2 · answered Jul 19 '20 at 14:18

-2

I think you can do it inside the dataset like the following:

dataset:{ source: [{category:'whatever', value: this.object, itemStyle: { color: '#e67345' } }, .....]

answered Jul 19 '20 at 14:18

Alaa'

487
3
7
16

I can't get this to work. I have the same question as the OP. Does anyone have add'l ideas? – mrcrag Oct 28 '20 at 19:18

Change color of specific echarts bar using dataset and encode API

2 Answers2