Custom Dynamic color for echarts

Question

I am using echarts for my data visualization.... I got the solution for static data from here.. But in my case I have dynamic data and don't know how to make it work. The data items changes from time to time. It is not always 3 items like below. It could be any number.

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

Someone have any idea about this.

Any help is appreciated. Thanks

@AmmoPT not exactly. I want my own custom color for each item. — surazzarus, Aug 30 '18 at 16:05
But your items are dynamic, right? Your code does not know exactly how many bars he's gonna have to draw. — AmmoPT, Aug 30 '18 at 16:06
@AmmoPT yes you are right but is there a way where I can have 5 different colors and the bars picks from it. For e.g. if, 1 => 'blue', 2 => 'red', 3 => 'yellow', 4 => 'green', 5 => 'orange'. Since I am sure I won't have bars more than 5. Thanks :) — surazzarus, Aug 30 '18 at 16:15
how to change or add custom color based on xAxis array data? — Nikhil Gowda, Jan 13 '23 at 14:39

score 8 · Answer 1 · answered Aug 30 '18 at 16:32

You can have an array of colors predefined and randomly pop a color from that array, for each bar you have to draw:

var colors = [
  "blue",
  "red",
  "yellow",
  "green",
  "purple"
];

function popRandomColor(){
  var rand = Math.random();
  var color = colors[Math.floor(rand*colors.length)];
  colors.splice(Math.floor(rand*colors.length), 1);
  return color;
}

Then call popRandomColor() everytime you need a color from the color bank.

var option = {
xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [
        {
            value: 120,
            itemStyle: {color: popRandomColor()},
        },
        {
            value: 200,
            itemStyle: {color: popRandomColor()},
        },
        {
            value: 150,
            itemStyle: {color: popRandomColor()},
        }
    ],
    type: 'bar'
}],
  graph: {
    color: colorPalette
  }
};

still not exactly I wanted but trying to solve in the same way of having new array of colors.. — surazzarus, Aug 30 '18 at 16:36

score 1 · Answer 2 · answered Sep 19 '18 at 03:08

Is dynamic data with different color you want? check below

// put any color you want in Array colors
var colors = [
    "blue",
    "red",
    "green"
];

// can be any length
var data = [{
    category: 'cate1',
    value: 120
}, {
    category: 'cate2',
    value: 200
}, {
    category: 'cate3',
    value: 150
}, {
    category: 'cate4',
    value: 135
}, {
    category: 'cate5',
    value: 54
}]

let category = [];

let seriesData = data.map((item, index) => {
    category.push(item.category);
    return {
        value: item.value,
        itemStyle: {
            color: colors[index % colors.length]
        }
    }
});

var option = {
    xAxis: {
        type: 'category',
        data: category
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: seriesData,
        type: 'bar'
    }]
};

score 1 · Answer 3 · answered Oct 11 '22 at 13:06

You can use this function to generate any number of colors and use it to assign these dynamic colors to your pie chart:

export const getColorArray = (num) => {
  const result = [];
  for (let i = 0; i < num; i += 1) {
    const letters = '0123456789ABCDEF'.split('');
    let color = '#';
    for (let j = 0; j < 6; j += 1) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    result.push(color);
  }
  return result;
};

You can call this function like:

...
series: [
        {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
                borderRadius: 8,
            },
            data: [
                { value: 40, name: "rose 1" },
                { value: 38, name: "rose 2" },
                { value: 32, name: "rose 3" },
                { value: 30, name: "rose 4" },
                { value: 28, name: "rose 5" },
                { value: 26, name: "rose 6" },
                { value: 22, name: "rose 7" },
                { value: 18, name: "rose 8" },
            ],
            color: [...getColorArray(6)]
        },
    ],
...

score 0 · Answer 4 · answered May 08 '23 at 00:52

Here is what you can do.

Suppose you have your pie chart data as given below (with the color included along with the data as you mentioned)

const pieChartData = [
        {
            label: 'Label1',
            value: 120,
            itemStyle: {color: 'blue'},
        },
        {
            label: 'Label 2',
            value: 200,
            itemStyle: {color: 'red'},
        },
        {
            label: 'Label 3'
            value: 150,
            itemStyle: {color: 'green'},
        }
];

Now make use of this data inside the chart's "option[series]" as given below.

...series: [
    {
        data: pieChartData.map(pieData => { return {value: pieData.value, name: pieData.label}}),
        color: pieChartData.map(pieData => pieData.itemStyle.color)
    }

]

Hope this helps.

Custom Dynamic color for echarts

4 Answers4