Sunburst graph color issue

plotly.js
1

Hello,

I am trying to create a symmetric sunburst graph:
sunburst_plotly

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?

Thanks

2

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 https://plotly.com/javascript/reference/#sunburst-marker-colors).

3

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,
            x:1.1,
            y:0.5,
            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.

4

Have you ever managed to implement this behavior ?

Also, do you by any change remember what was inside this array: colors: sunburstgraphRates,
The documentation states that colorscale : “Sets the colorscale. Has an effect only if colors is set to a numerical array.”
What values should be inside colors array ?
How are they link with the actual values that get represented on the chart ?

5

I managed, at least in my particular case. I am comparing different countries - they are in the middle of the graph (C1, C2) and I have values 0-100 (percentage). In some cases, I have no data. This is my code at the moment:

                marker: {line: {width: 2},
                    colors: sunburstgraphRates,
                    cmin: -100,
                    cmax: 100,
                    colorscale: [
                        [0, '#ebebeb'], [0.25, '#d8d8d8'],
                        [0.50, '#19c8aa'], [0.55, '#17ce4a'],
                        [0.60, '#8cd914'], [0.65, '#dcdd13'],
                        [0.70, '#dfc813'], [0.75, '#e0af12'],
                        [0.80, '#e29712'], [0.85, '#e37e11'],
                        [0.90, '#e56411'], [0.95, '#e64a11'],
                        [1, '#e92210']
                    ],
                    showscale: false, 
                    autocolorscale: false,
                    colorbar: {
                        title: 'Rate',
                        thickness: 25,
                        len: 0.9,
                        outlinewidth: 0,
                        x:1.1,
                        y:0.5,
                        tickmode: 'auto',
                        nticks: 10
                    },
                }

To C1/C2 I assign value “-100” - it will be colored #ebebeb. When I have no data, I assign value “-50” - the color will be #d8d8d8. The rest of the values are always 0-100 and they will be assigned colors like in the colorscale above (0.50-1).

In my case the array you mention has values: -100 for each country in the middle, and then the actual percentage (0-100) for each element P, except when there is no data, then that element gets -50.

I hope you can figure out how to apply this to your case.