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\', \'gr

Answer 1

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

Answer 2

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
};

Answer 3

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
    }
};