How to get Plotly.js default colors list?

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

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>

According to the source code, 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.