Black Lives Matter. Please consider donating to Black Girls Code today.

Sunburst graph color issue


I am trying to create a symmetric sunburst graph:

The graph depicts values from 0-100 and works nice. I have only one issue and was wondering if someone has an idea for a workaround.

In order to keep symmetry, when data for P1-P6 is not available I assign the value -1 and display text on hover stating data is not available. However, the colour is still the same as 0 in the colour scale. Does someone know if it is possible to define a different colour for values below 0, or to somehow define the colour scale in a way that -1 would be one colour, and 0-100 a gradient?


Hi @apiljic you can pass any colors to a sunburst using its markers.colors attribute as well as its markers.colorscale to change the colorscale (see

Hi Emanuelle,

Thank you for your comment.
Currently the marker is defined like this:

marker: {line: {width: 2},
        colors: sunburstgraphRates,
        cmin: 0,
        cmax: 100,
        colorscale: [
            [0, '#19c8aa'], [0.1, '#17ce4a'],
            [0.2, '#8cd914'], [0.3, '#dcdd13'],
            [0.4, '#dfc813'], [0.5, '#e0af12'],
            [0.6, '#e29712'], [0.7, '#e37e11'],
            [0.8, '#e56411'], [0.9, '#e64a11'],
            [1, '#e92210']
        showscale: true,
        autocolorscale: false,
        colorbar: {
            title: 'Resistance rate',
            thickness: 25,
            len: 0.9,
            outlinewidth: 0,
            tickmode: 'auto',
            nticks: 10

Everything with a value between 0 and 100 is colored fine. My question now is, if there is a way to assign a separate color (for example grey), when the value falls out of that range. For example, when there is no data, I could assign value -1 and define a specific color for -1. I was wondering if something like that is possible.