Plotly.js default colors list

Question

How do I obtain the default colors list / palette for plots with multiple series? (e.g. bubble chart)

Omission

Got the function which generates the color, you have to pass an integer to the getColor function. var getColor = Plotly.d3.scale.category20(); – Omission

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>

Kaka

Note: as of v2, Plotly no longer exposes .d3 so you'll need to separately-load the d3 library if you want to call methods on it. – Beaut

...and the incantation is: d3.schemeCategory10[...]. Also, a link to the minified version of d3 (7.x). – Atlantis

You can find the gist of it here. – Atlantis

Answer 2

For Plotly.js, the default color list is given in the source code:

'#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

For Plotly Python, see this answer.

If a plot has more than 10 series, it will cycle back to the first color.

Hafiz

In Python, this list can be retrieved directly as plotly.colors.DEFAULT_PLOTLY_COLORS – Asdic

Other, comparable lists of pre-made colors can be retrieved from plotly.colors.qualitative – Asdic

Plotly.d3.scale.category10().range() – Thick

But @sarah-messer these are not the default colors used :-( – Behr

Answer 3

For Plotly Python, the default color palette can be determined via:

>>> import plotly as px
>>> px.colors.qualitative.Plotly
[
    '#636EFA',
    '#EF553B',
    '#00CC96',
    '#AB63FA',
    '#FFA15A',
    '#19D3F3',
    '#FF6692',
    '#B6E880',
    '#FF97FF',
    '#FECB52',
]

...as described in the documentation.

Rimola

The default blue color is "#636EFA". Adding here so people don't have to try each color manually. – Wensleydale

Answer 4

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

Lahdidah

Answer 5

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'
];

Rowell

Answer 6

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

Intone

Answer 7

See also https://github.com/d3/d3-scale-chromatic

E.g.: https://github.com/d3/d3-scale-chromatic/blob/main/src/categorical/category10.js specifies the string 1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf. Splitting this string yields

colors = "1f77b4ff7f0e2ca02cd627289467bd8c564be377c27f7f7fbcbd2217becf".match(/.{1,6}/g)

for (c of colors) {
    div = document.createElement('div')
    div.style.backgroundColor = "#" + c
    div.innerHTML = "#" + c
    document.getElementsByTagName("body")[0].append(div)
}

Edit: The colors array could previously be retrieved from Plotly.d3.scale.category10().range(), whereas now it seems to retrievable from Plotly.PlotSchema.get().layout.layoutAttributes.colorway.dflt.

Spadix

Answer 8

There is an attribute colorway. But is it available only after creating a plot (graph._fullLayout.colorway).

The colorway can be modified (https://plotly.com/javascript/colorway).

Spadix

Answer 9

Using D3 Color Schemes with Plotly

Plotly does not support D3 color schemes directly anymore. This has been explained in comments before but might be hard to read. Hence, I’m putting this as a separate post to make it clearer.

If you want to use D3 color schemes with Plotly, you have two options:

1. Manually add the colors as a JavaScript array.
2. Include D3 and access the color schemes through D3.

Option 1: Manually Add Colors as a JavaScript Array

You can define a color palette manually and use it in your Plotly charts. Here is an example:

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

// Use this colorPalette in your Plotly traces

Option 2: Include D3 and Access Color Schemes

You can include the D3.js library in your project and use its color schemes. Here’s how to do it:

1. Include D3.js: Add the D3.js script to your HTML:

   <script src="https://d3js.org/d3.v5.min.js"></script>
   

2. Access D3 Color Schemes: Use D3’s color schemes in your Plotly charts. For example, using d3.schemeCategory10:

   const colorPalette = d3.schemeCategory10;
   
   // Use this colorPalette in your Plotly traces
   

Example

Here’s an example of how to use D3 color schemes in a Plotly chart:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plotly with D3 Color Schemes</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <div id="plotly-div"></div>
    <script>
        const colorPalette = d3.schemeCategory10;

        const data = [
            {
                x: [1, 2, 3, 4, 5],
                y: [1, 2, 4, 8, 16],
                type: 'scatter',
                mode: 'lines+markers',
                line: {color: colorPalette[0]}
            },
            {
                x: [1, 2, 3, 4, 5],
                y: [1, 4, 9, 16, 25],
                type: 'scatter',
                mode: 'lines+markers',
                line: {color: colorPalette[1]}
            }
        ];

        Plotly.newPlot('plotly-div', data);
    </script>
</body>
</html>

Lundt