plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Heatmap and Contour Colorscales in plotly.js

How to set colorscales and heatmap colorscales in D3.js-based JavaScript charts in Plotly.js. Divergent, sequential, and qualitative colorscales.

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: [
    ['0.0', 'rgb(165,0,38)'],
    ['0.111111111111', 'rgb(215,48,39)'],
    ['0.222222222222', 'rgb(244,109,67)'],
    ['0.333333333333', 'rgb(253,174,97)'],
    ['0.444444444444', 'rgb(254,224,144)'],
    ['0.555555555556', 'rgb(224,243,248)'],
    ['0.666666666667', 'rgb(171,217,233)'],
    ['0.777777777778', 'rgb(116,173,209)'],
    ['0.888888888889', 'rgb(69,117,180)'],
    ['1.0', 'rgb(49,54,149)']
  ],
  type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
   });
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
    colorscale: 'RdBu',
    type: 'heatmap'
  }
];
var layout = {title: 'RdBu'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: 'Earth',
  type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
   });
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Blackbody',
    type: 'heatmap'
  }
];
var layout = {title: 'Blackbody'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
    colorscale: 'YIOrRd',
    type: 'heatmap'
  }
];
var layout = {title: 'YIOrRd'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'YIGnBu',
    type: 'heatmap'
  }
];
var layout = {title: 'YIGnBu'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: 'Bluered',
  type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
   });
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: 'Portland',
  type: 'heatmap'
 }
];
var layout = {title: 'Portland'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: 'Electric',
  type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
   });
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Jet',
    type: 'heatmap'
  }
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
  z: figure.z,
  colorscale: 'Hot',
  type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
   });
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Greys',
    type: 'heatmap'
  }
];
var layout = {title: 'Greys'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Greens',
    type: 'heatmap'
  }
];
var layout = {title: 'Greens'};
Plotly.newPlot('myDiv', data, layout);
});
Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Picnic',
    type: 'heatmap'
  }
];
var layout = {title: 'Picnic'};
Plotly.newPlot('myDiv', data, layout);
});
var data = [ {
  z: [[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
  type: 'contour',
  colorscale: 'Jet'
}
];

var layout = {
  title: 'Colorscale for Contour Plot'
};

Plotly.newPlot('myDiv', data, layout);
var data = [ {
  z: [[10, 10.625, 12.5, 15.625, 20],
       [5.625, 6.25, 8.125, 11.25, 15.625],
       [2.5, 3.125, 5., 8.125, 12.5],
       [0.625, 1.25, 3.125, 6.25, 10.625],
       [0, 0.625, 2.5, 5.625, 10]],
  type: 'contour',
  colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
}
];

var layout = {
  title: 'Custom Contour Plot Colorscale'
};

Plotly.newPlot('myDiv', data, layout);
var data = [
  {
    z: [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]],
    colorscale: [

// Let first 10% (0.1) of the values have color rgb(0, 0, 0)

        [0, 'rgb(0, 0, 0)'],
        [0.1, 'rgb(0, 0, 0)'],

// Let values between 10-20% of the min and max of z
// have color rgb(20, 20, 20)

        [0.1, 'rgb(20, 20, 20)'],
        [0.2, 'rgb(20, 20, 20)'],

// Values between 20-30% of the min and max of z
//have color rgb(40, 40, 40)

        [0.2, 'rgb(40, 40, 40)'],
        [0.3, 'rgb(40, 40, 40)'],

        [0.3, 'rgb(60, 60, 60)'],
        [0.4, 'rgb(60, 60, 60)'],

        [0.4, 'rgb(80, 80, 80)'],
        [0.5, 'rgb(80, 80, 80)'],

        [0.5, 'rgb(100, 100, 100)'],
        [0.6, 'rgb(100, 100, 100)'],

        [0.6, 'rgb(120, 120, 120)'],
        [0.7, 'rgb(120, 120, 120)'],

        [0.7, 'rgb(140, 140, 140)'],
        [0.8, 'rgb(140, 140, 140)'],

        [0.8, 'rgb(160, 160, 160)'],
        [0.9, 'rgb(160, 160, 160)'],

        [0.9, 'rgb(180, 180, 180)'],
        [1.0, 'rgb(180, 180, 180)']
    ],
    type: 'heatmap',
    colorbar:{
      autotick: false,
      tick0: 0,
      dtick: 1
    }
  }
];

var layout = {title: 'CUSTOM DISCRETIZED HEATMAP COLORSCALE'};

Plotly.newPlot('myDiv', data, layout);

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.