Sunburst Chart Edit Text

plotly.js
1

Hello,

I’m very new to plotly which is great btw! I have been playing with the Sunburst chart.

Apologies if this is a repost but I can’t find a similar topic in the forums.

I seem to be having issues with the text alignments.

When I set “insidetextorientation”: ‘horizontal’

  • Some texts are not in the center but rather in the top

When I set “insidetextorientation”: ‘radial’

  • I notice that the most left left will be horizontal and not follow the rest (radial)

Also, I would like to keep my font color uniform but I can’t seem to figure out how to modify the texts inside the sunburst chart.

Language: Javascript

Code Snippet:

<script>
            Plotly.d3.csv("./dom.csv", function(err, rows){
              function unpack(rows, key) {
              return rows.map(function(row) {return row[key]})
            }
            
            var data = [
            {
              "type": "sunburst",
              "maxdepth": 2,
              //"ids": unpack(rows, 'ids'),
              "labels": unpack(rows, 'labels'),
              "parents": unpack(rows, 'parents'),
              "values":  unpack(rows, 'values'),
              //"leaf": {"opacity": 0.4},
              //"marker": {"line": {"width": 2}},
              "branchvalues": 'total',
              //"textposition": 'inside',
              "insidetextorientation": 'radial' //tried changing to horizontal but some text aren't centered
            }]
            
            var layout = {
              margin: {l: 0, r: 0, b: 0, t:0}
            }
            
            Plotly.newPlot('myDiv', data, layout, {displaylogo: false})
            });
            
                
         </script>

Thanks,
Dom

2

Thanks for using plotly.
To set a color you could use textfont.color


And in regard with the text position, just opened this issue: https://github.com/plotly/plotly.js/issues/4607

3

Thanks archmoj! I’ll go ahead and try.

4

Are you able to provide an example of how this should be configured with the code I have above?

5

Here is a demo.

6

Thanks archmoj! It’s working for me now, however, the data on hover is still black, is there a separate config for that?

7

Could you please share a screenshot?

8

I seem to be having issues with attaching a screenshot.

On the demo you have provided, if you hover over on “Seth” the label is in black text. The rest has a white text when you hover over the rest.

9

One could set layout.bordercolor and layout.hoverlabel.color similar to this demo.

10

Perfect! I got it working as intented now! Thank you very much.

I have other queries but this will do for now. You’ve opened another case for my other question so we can probably close this topic?

11

Let’s keep this open regarding the opened plotly.js issue to center the text.