Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

How to set scatter marker color based on value?


I have a scatter chart and I want to change the colour of the markers based on a value.

If value is between 0 and 1 use color x, if between 1 and 2 use color y etc.

How do I do this?

Have tried the following and various iterations but I’m getting some random white / orange / red color scale which is nothing to do with the colours I’ve set.

var trace = {
      type: "scatter",
      mode: "markers",
      x: x,
      y: y2,
      yaxis: 'y2',
      marker: {
        size: 4,
        colorscale: [
          ['3.0', 'rgb(33,211,163)'],
          ['2.5', 'rgb(78,209,128)'],
          ['2.0', 'rgb(145,207,76)'],
          ['1.5', 'rgb(210,200,27)'],
          ['1.0', 'rgb(255,186,0)'],
          ['0.5', 'rgb(255,158,7)'],
          ['0.0', 'rgb(255,120,36)'],
          ['-0.5', 'rgb(254,83,70)'],
          ['-1.0', 'rgb(247,57,93)'],


Anyone have any thoughts? Feels like this should be something that is easy to do but I just can’t get it to work.

Or do I simply need to 9 individual traces and colour them individually? Feels a bit inefficient.