CODEWITHSUNDEEP
echarts
Varun Nair
Varun Nair

Reputation: 349

Changing the color in heatmap in eCharts

Is there any way to change the default colors in a calendar-based heatmap? The default heatmap runs from shades of 'yellow' to 'red', based on the value. I want to change the colors so that the color runs from 'red' to 'green'.

This is the default color scheme enter image description here

Upvotes: 2

Views: 6707

Answers (2)

stats con chris
stats con chris

Reputation: 337

You can also use in visualMap

  pieces: [
    {min: 0, max: 0.5, color: 'red'},        
    {min: 0.5, max: 1, color: 'green'},        
    ],

to customize even more

Upvotes: 2

Dani Santos
Dani Santos

Reputation: 136

With the propriety "inRange" you can change the color variation of the values.

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate(year + '-12-31');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time <= end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 1000)
        ]);
    }
    return data;
}

option = {
    visualMap: {
        min: 0,
        max: 1000,
        inRange : {   
            color: ['#DD2000', '#009000' ] //From smaller to bigger value ->
        }
    },
    calendar: {
        range: '2017'
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: getVirtulData(2017)
    }
};

Upvotes: 12

Related Questions