Different color bar chart from eCharts

Question

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 work.
The code comes from the echarts site.

 <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
           <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            itemStyle: {normal: {color: 'blue'}},
            data: [120, 200, 150],
            type: 'bar'
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
       </body>
    </html>

coudy.one · Accepted Answer · 2018-03-08T12:31:45.310

47

This is my solution:

    var option = {
    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

edited Mar 08 '18 at 12:31

answered Mar 08 '18 at 12:24

coudy.one

1,382
12
24

Thank you for this. Can you point me to any good resource for learning this? – आनंद Mar 10 '18 at 08:05
2

I think that good resource is documentation: https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts – coudy.one Mar 11 '18 at 20:19
@coudy.one How can I make this work for dynamic data. If the data has not fixed values.. Here it is fixed with 3 items. For my case, data is dynamic and varies from time to time.. – surazzarus Aug 30 '18 at 15:24
@surazzarus I've added an example for loading dynamic data: https://plnkr.co/edit/e5Ob1xn4h8VydpGUl3Ax?p=preview When you click the "Render" button, then the chart reads the new data. – coudy.one Aug 31 '18 at 09:03
@coudy.one Is there a way to set the data points in the HTML and get the color and value from data-attributes in the HTML? If not for ECharts, do you know of any JS Charts that have this ability? – Kyle Underhill Jan 31 '19 at 20:35
@coudy.one thanks for the documentation link! I was struggling with the Chinese version of the same: https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts – rottweiler Mar 18 '19 at 22:41

score 10 · Answer 2 · answered Jul 23 '19 at 21:35

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:

    var option = {
    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
    }
};

score 4 · Answer 3 · answered Jun 10 '19 at 14:51

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:

var data = {};
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
};

score 1 · Answer 4 · answered Jan 13 '23 at 16:35

After a day of research got this answer => add itemStyle with seriesIndex as params

var option = {
xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [ 120,200,150],
    type: 'bar',
    itemStyle: {
      // HERE IS THE IMPORTANT PART
      color: (seriesIndex) => yourCustomFunctionName(seriesIndex) // you will get access to array data passed and its index values
     },
    }],
    graph: {
    color: colorPalette
 }
};

score 1 · Answer 5 · answered May 19 '23 at 12:58

There is a new colorBy option: https://echarts.apache.org/en/option.html#series-bar.colorBy

Usage:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        colorBy: 'data' // <---
    }]
};

stelios_ioannides · Answer 6 · 2021-05-02T19:37:38.953

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.

score 0 · Answer 7 · answered Jun 12 '23 at 14:31

You dont need to set color for each data that you got you can just pass this props inside series and echart will give you random different colors

 series: [
        {
            data: [120,200,350,70,18,150],
            colorBy: "data",
            type: 'bar',
            barWidth: "50%",
    ],

Just add this:

colorBy :'data'

Happy coding !!

Different color bar chart from eCharts

7 Answers7

Linked