While I am able to accomplish these, I have not been able to make the background canvas/div of the chart fit to the width of the content. As a result. the canvas/div is a lot wider than the content (see the screenshot on the bottom), hence taking up a lot of space. I tried setting the width of the div, and also tried justify-content, to no avail, I wonder what can be done to get rid of the excess left and right margins of the chart. My code is below, and a runnable snippet is here. Thanks!
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div class='container'>
<div id='sunBurst'><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="rightbox"> </div>
</div>
</body>
.container {
display: flex;
width: auto;
height: 100%;
background-color: gray;
display: flex;
}
#sunBurst {
display: ;
background: pink;
resize: both;
}
#rightbox {
}
var data = [{
type: "sunburst",
labels: ["Skills", "Machine learning", "Optimization", "Organizational",
"Python", "Cplex", "AWS", "Team work", "Git"],
parents: ["", "Skills", "Skills", "Skills", "Machine learning", "Optimization", "Machine learning", "Organizational", "Machine learning" ],
values: [1, 1, 1, 1, 1, 1, 1, 1, 1],
outsidetextfont: {size: 20, color: "#377eb8"},
leaf: {opacity: 0.4},
marker: {line: {width: 2}},
}];
var layout = {
margin: {l: 0, r: 0, b: 0, t: 0},
paper_bgcolor:"rgba(0,0,0,0)",
plot_bgcolor:"rgba(0,0,0,0)",
};
var config = {responsive: false};
Plotly.newPlot('sunBurst', data, layout, config);
I have a sunburst chart embedded in a HTML page in a div set to
display:flow. The chart itself is essentially a circle, so the height and the width are the same. I want the chart content to fill the container div's height, and I also want it to resize automatically based on the browser size and zoom level.While I am able to accomplish these, I have not been able to make the background canvas/div of the chart fit to the width of the content. As a result. the canvas/div is a lot wider than the content (see the screenshot on the bottom), hence taking up a lot of space. I tried setting the
widthof the div, and also triedjustify-content, to no avail, I wonder what can be done to get rid of the excess left and right margins of the chart. My code is below, and a runnable snippet is here. Thanks!HTML
CSS
JS