currently I am developing chart in my React. I am using Highchart. My problem is when my chart first loaded, the size is not following the container size, when i resize the window then only the chart display correct size.
many solution suggested to use
chart.reflow();
but how to use this in react code?
i have tried
.highcharts-container, .highcharts-container svg {
width: 100% !important;
}
not working
the chart always when initial will look like this
I need the chart fully to the yellow line
My chart code
this.setState({
chartDrawSector: {
chart: {
type: 'column',
height: '600',
events: {
load: function(event) {
event.target.reflow();// i tried this not working also..
}
}
},
title: {
text: 'Sector All'
},
// subtitle: {
// text: 'Source: WorldClimate.com'
// },
xAxis: {
categories: sectorName[0],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: displayMode == 'f' ? 'Figures' : 'Percentage %'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Ultimate Negative',
data: n30Data[0],
color: 'rgb(100, 30, 22 )'
},
{
name: 'Ultimate Positive',
data: gt30Data[0],
color: 'rgb(27, 79, 114)'
},
]
}
})
