Different Color Bar Chart From Echarts

I was trying to create a different color bar. For Mon blue, Tue red, Wed green. Please help me how to write it. Line itemStyle: {normal: {color: 'blue','red', 'green'}}, did not wo

Solution 1:

This is my solution:

varoption= {
    xAxis: {
        type:'category',
        data: ['Mon', 'Tue', 'Wed']
    },
    yAxis: {
        type:'value'
    },
    series: [{
        data: [
            {
                value:120,
                itemStyle: {color:'blue'},
            },
            {
                value:200,
                itemStyle: {color:'red'},
            },
            {
                value:150,
                itemStyle: {color:'green'},
            }
        ],
        type:'bar'
    }],
    graph: {
        color:colorPalette
    }
};

https://plnkr.co/edit/vFK1qeMfMCXGx8Gdn1d8?p=preview

Solution 2:

The top solution was not working for me. From their documentation is seems lineStyle now has two children elements you can leverage 'normal' and 'emphasis'. I had to modify it like so to override the default colors:

varoption= {
    xAxis: {
        type:'category',
        data: ['Mon', 'Tue', 'Wed']
    },
    yAxis: {
        type:'value'
    },
    series: [{
        data: [
            {
                value:120,
                itemStyle: { normal: { color:'blue' } },
            },
            {
                value:200,
                itemStyle: { normal: { color:'red' } },
            },
            {
                value:150,
                itemStyle: { normal: { color:'green' } },
            }
        ],
        type:'bar'
    }],
    graph: {
        color:colorPalette
    }
};

Solution 3:

My solution in June 2019 for needing different colors based on values: Create separate series for the different colors, and use a stacked chart. For example, I needed to create a graph with green bars for passing values and yellow bars for failing values. This was my implementation:

vardata = {};
data.legendData = ['Sales','HR','Engineering'];
data.greenSeriesData = ['-',96.38,98.43];
data.yellowSeriesData = [44.23,'-','-'];

var option = {
    title: {
        text: '2019 Progress',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        data: data.legendData
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: function (val) {
                return (val) + '%';
            }
        }
    },
    series: [{
        data: data.greenSeriesData,
        type: 'bar',
        stack: 'colorbyvalue',
        label: {
            show: true,
            position: 'insideTop',
            formatter: "{c}%",
            color: '#000000'
        },
        barWidth: 50,
        itemStyle: {
            color: 'green'
        }
    },
    {
        data: data.yellowSeriesData,
        type: 'bar',
        stack: 'colorbyvalue',
        label: {
            show: true,
            position: 'insideTop',
            formatter: "{c}%",
            color: '#000000'
        },
        barWidth: 50,
        itemStyle: {
            color: 'yellow'
        }
    }],
    animation: false
};

Solution 4:

you may have an array corresponding to the colors that you need for each day.

initially that could be empty and then you push the relevant color to it, depending on that day!

var cars1 = data.data_1;

  var color_bar = [];

  var text = "";
  var i;

  for (i = 0; i < cars1.length; i++)
    {
    if (cars1[i] < 20.35) {
        color_bar.push("red");
          }  
        else {
      color_bar.push("yellow");
    }

  }

and the you call the relevant color for each data series...

yAxis: {
              type: 'value'
          },
          series: [{
              data: 
              [
            {
                value: data.data_1[0],
                itemStyle: {color: color_bar[0]},
            },{
                value: data.data_1[1],
                itemStyle: {color: color_bar[1]},
            },{
                value: data.data_1[2],
                itemStyle: {color: color_bar[2]},
            }],

Here I worked out an example based on value, but conditioning "day" should be ok.

I hope this helps mate.