I am currently working with plotly js, trying to generate a chart within a parent div. There are 2 divs on the same raw in order to build some card design. I also have a toggling sidebar on the left side.
The issue is that when I first make the sidebar appear, the chart is going out of its parent div, it looks like it isn’t detecting the resizing correctly. It also looks like the bug is coming from the svg width not resizing correctly however, when I resize the window, the chart is correctly resizing,
I already tried to fix the svg width to 100% and adding overflow property set to hidden to parent div: it fixes the problem but my data are being cut-off.
has anyone already got this issue before and now how to fix this bug?
Please see images and code below,
Thanks in advance.
js :
`var config = {
modeBarButtonsToRemove: [
'zoom2d','select2d','lasso2d','autoScale2d','resetScale2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','pan2d','hoverCompareCartesian', 'toggleSpikelines'
],
modeBarButtonsToAdd: [
{
name: displayInfo,
icon: iconeInfo,
direction: 'up',
click: function (gd) {
console.log('information button');
}
}],
responsive: true,
displaylogo: false,
displayModeBar:true
}
if(stacked){
config.modeBarButtonsToRemove = ['zoom2d','select2d','lasso2d','autoScale2d','resetScale2d','zoomIn2d','zoomOut2d','pan2d','hoverCompareCartesian', 'toggleSpikelines'];
layout.legend = {"orientation": "h","x" : 1.3, "y" : 0.8};
layout.colorway = getListRandomColors();
layout.barmode = 'stack';
}
//construct plots dynamically
Plotly.newPlot(div,datas, layout, config);
spinner_off('loader-position');
}
html / css :
.card-resources{
width: 100%;
background-color: white;
display: flex;
flex-direction: column;
border:1px solid rgb(248, 248, 248);
padding:10px 30px 10px 30px;
border-style: none!important;
/* overflow: hidden; */
}
<div class="row text-center">
<div class="col-lg-6">
<div class="card-resources">
<h3 class="resources_title">Cores allocations</h3>
<div class="loader-position">
</div>
<div id="cpualloc_div"></div>
</div>
</div>
<div class="col-lg-6 row_bg">
<div class="card-resources">
<h3 class="resources_title" id="cores_description">Core allocations description</h3>
<div id="table_cpu_alloc_description"></div>
</div>
</div>
</div>
