<head>
<script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>
<body>
<div id='myDiv'></div>
<script>
var data = [{
type: "sunburst",
labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
leaf: {opacity: 0.4},
marker: {line: {width: 2}},
}];
var layout = {
margin: {l: 0, r: 0, b: 0, t: 0},
width: 500,
height: 500,
font: {
color: 'red',
family:'Times New Roman'
},
paper_bgcolor:'rgba(0,0,0,0)',
plot_bgcolor:'rgba(0,0,0,0)'
}
Plotly.newPlot('myDiv', data, layout);
</script>
</body>I'm trying to style my sunburst diagram using Plotly 2.8.3. and Javascript. I want to change the colour and font family of each section to red and Times New Roman.
The font family seems to change, but the font colour seems to stay the same and only the middle section changes? Is there a workaround to this?
You can use the insidetextfont property of the sunburst Trace :
insidetextfont: {
color: "red",
}
<head>
<script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>
<body>
<div id='myDiv'></div>
<script>
var data = [{
type: "sunburst",
labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
leaf: {opacity: 0.4},
marker: {line: {width: 2}},
insidetextfont: {
color: "red",
}
}];
var layout = {
margin: {l: 0, r: 0, b: 0, t: 0},
width: 500,
height: 500,
font: {
color: 'red',
family:'Times New Roman'
},
paper_bgcolor:'rgba(0,0,0,0)',
plot_bgcolor:'rgba(0,0,0,0)'
}
Plotly.newPlot('myDiv', data, layout);
</script>
</body>