Responsive Line Chart using High Charts & Bootstrap 3 - html

Question

Currently I have my HighChart Line Graph as follows:
<script language="javascript" type="text/javascript">
var highColors = [bgSystem, bgSuccess, bgWarning, bgPrimary];
// Chart data
var seriesData = [{
name: 'Total Accounts',
data: [5, 9, 12, 15, 17, 22, 28, 30, 34, 36, 38, 46]
}, {
name: 'Total Songs',
data: [2, 3, 4, 5, 8, 12, 17, 23, 30, 34, 44]
}, {
name: 'Total Recordings',
data: [15, 19, 22, 29, 32, 34, 36, 40, 42, 44, 45]
}, {
name: 'Total Writers',
data: [11, 13, 15, 18, 24, 28, 30, 34, 38, 40, 42, 45]
}];
var dashboardChart = $('#dashboard_chart');
if (dashboardChart.length) {
dashboardChart.highcharts({
credits: false,
colors: highColors,
chart: {
backgroundColor: 'white',
className: '',
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift',
marginTop: 45,
marginRight: 1,
},
title: {
text: null
},
xAxis: {
gridLineColor: '#EEE',
lineColor: '#EEE',
tickColor: '#EEE',
categories: ['Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
min: 0,
tickInterval: 5,
gridLineColor: '#EEE',
title: {
text: 'Total'
}
},
plotOptions: {
spline: {
lineWidth: 3,
},
area: {
fillOpacity: 0.2
}
},
exporting: {
enabled: false
},
legend: {
enabled: true,
floating: false,
align: 'right',
verticalAlign: 'top',
x: -5
},
series: seriesData
});
}
</script>
Here is how its displayed in my HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="dashboard_chart" style="height: 500px; width:100%;"></div>
</div>
</div>
The main issue is that the graph does not fit the whole container for the tablet in both portrait and landscape. Does anyone have any suggestions? As to how I could make it responsive without adding in-line styles?

Answer 1

You can set options for responsive charts in high charts initialization. It allows you to specify different widths and height and you can specify different values such as hiding labels or showing something.
dashboardChart.highcharts({
options:values,
options:values,
....
....
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
})
Here's the link to their official docs : https://www.highcharts.com/demo/responsive