How to get Plotly.js default colors list?

Question

I am plotting a plotly bubble chart on a webpage.. I want to get the list of default colors, plotly uses to draw the bubbles.

Answer 1

Plotly uses the same colors as in d3's scale.category10() function. After 10 colors the whole color scheme starts again from 0.

The colors codes can be found in KDD's answer. The snippet below gives the d3 colors and takes the Plotly colors dynamically from a plot, i.e. even if the Plotly changes the color codes will be correct.

var d3colors = Plotly.d3.scale.category10();
var color_div = document.getElementById('colors');
var data = [];

for (var i = 0; i < 11; i += 1) {
  data.push({
x: [i],
y: [i + 1],
name: i + ": Color: " + d3colors(i),
type: 'bar'
  });
}
Plotly.plot('colors', data);

var node;
var textnode;
for (var i = 0; i < 10; i += 1) {
  var color = d3colors(i);
  node = document.createElement("div");
  node.style.color = color;
  var text = "D3: " + color;
  textnode = document.createTextNode(text);
  node.appendChild(textnode);
  node.appendChild(document.createElement("br"));
  var rgb = Plotly.d3.selectAll('.point').selectAll('path')[i][0].style.fill;
  color = Plotly.d3.rgb(rgb).toString()
  var text = "Plotly: " + color + " ; " + rgb;
  textnode = document.createTextNode(text);
  node.appendChild(textnode);
  color_div.appendChild(node); 
}

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="colors"></div>

Answer 2

According to the source code of Plotly.js (src/components/color/attributes.js), the default color list is

    '#1f77b4',  // muted blue
    '#ff7f0e',  // safety orange
    '#2ca02c',  // cooked asparagus green
    '#d62728',  // brick red
    '#9467bd',  // muted purple
    '#8c564b',  // chestnut brown
    '#e377c2',  // raspberry yogurt pink
    '#7f7f7f',  // middle gray
    '#bcbd22',  // curry yellow-green
    '#17becf'   // blue-teal

If you have more than 10 series, you will go back to the first color.

Answer 3

While you're asking about bubble charts, I was asking the same question about Plotly.js pie charts. The search brought up your question for me.

Surprisingly it differs from how other charts work, so I'd like to post this information here, because I think it might be useful for someone who as myself is searching about how default colors work in pie charts. This question has "How to get Plotly.js default colors list?" as title and my answer is a special case for this question.

On August 3rd there was a commit in Plotly.js which introduced extended colors for pie charts which adds 20 more colors to the base category10 color scale.

There is now the extendpiecolors layout attribute for pie charts. Its description at the source code says:

If true, the pie slice colors (whether given by piecolorway or inherited from colorway) will be extended to three times its original length by first repeating every color 20% lighter then each color 20% darker. This is intended to reduce the likelihood of reusing the same color when you have many slices, but you can set false to disable. Colors provided in the trace, using marker.colors, are never extended.

I found no simple way of getting the actual color set out of Plotly.js data. However there is the source code of the function, which generates the extended colors and it is quite simple to copy it and use in your own source code to get the same color list as Plotly.js uses for pie charts by default. Plotly.js is MIT-licensed so it's allowed to use their code in your project.

I rewrote this function in the following way and now it simply generates the color range identical to what Plotly.js uses for piecharts by default. I used ES2015 notation. It also depends on tinycolor but this is a dependency of Plotly.js too so it shouldn't be a problem if you're already using Plotly.js

import Plotly from 'plotly.js/lib/core'
import tinycolor from 'tinycolor2'

function piechartExtendedColors() {
  var colorList = Plotly.d3.scale.category10().range();
  var pieColors = colorList.slice();

  colorList.forEach(color => {
      pieColors.push(tinycolor(color).lighten(20).toHexString());
  });

  colorList.forEach(color => {
      pieColors.push(tinycolor(color).darken(20).toHexString());
  });

  return pieColors;
}

Answer 4

For anyone looking for the default python color scale, this is what worked for me:

import plotly as px

px.colors.qualitative.Plotly

['#636EFA',
'#EF553B',
'#00CC96',
'#AB63FA',
'#FFA15A',
'#19D3F3',
'#FF6692',
'#B6E880',
'#FF97FF',
'#FECB52']

This is where I found it: https://plotly.com/python/discrete-color/

Answer 5

You can also use something like this to retrieve the colours used in your plot:

return.plot_ly.ColorsUsed <- function( plotlyObject ) {

      explorePlot = plotly_json(plotlyObject)
      explorePlot = jsonlite::fromJSON(explorePlot$x$data)

      # Extract colors, names and fillcolors
      colors = explorePlot$data$marker$color
      names = explorePlot$data$name
      fillcolors = explorePlot$data$marker$fillcolor



      # Returns a list with the names, colors and fillcolors used in the plot
      toReturn = list( "names" = names,
                       "colors" = colors,
                       "fillcolors" = fillcolors )

      return(toReturn)


} # End FUnction return.plot_ly.ColorsUsed

Answer 6

Note: as of Plotly v2, this no longer works, because Plotly.d3 is no longer exposed, therefore Plotly.d3.scale.category10() does not work. https://github.com/plotly/plotly.js/pull/5400

There's probably a better way, but for simplicity, I'm just hard-coding:

const D3Colors = [
  '#1f77b4',
  '#ff7f0e',
  '#2ca02c',
  '#d62728',
  '#9467bd',
  '#8c564b',
  '#e377c2',
  '#7f7f7f',
  '#bcbd22',
  '#17becf'
];