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

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 2

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>