Reputation: 23
Here I have attached my code. I want to make above graph responsive on window resize. Please give me a solution as early as possible.
Highcharts.chart('containerChart', {
chart: {
type: 'bar',
marginLeft: 0,
marginTop: 100
},
title: {
text: 'Reject Category',
align: 'left',
x: 30,
y: 35,
style: {
color: '#666666',
fontWeight: 'normal',
fontSize: 12,
fontFamily: 'Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif',
}
},
tooltip: {
enabled: false,
valueSuffix: ' %',
}
},
exporting: {
enabled: false,
},
credits: {
enabled: false,
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
},
},
series: {
pointWidth: 25,
}, states: {
hover: {
enabled: false
}
}
},
},
xAxis: [{
categories: arrcategory,
width: 100,
left: 140,
height: 34 * ctglength,
lineWidth: 0,
minorGridLineWidth: 0,
minorTickLength: 0,
// tickLength: 0,
title: {
text: null,
},
labels: {
overflow: 'justify',
enabled: true,
style: {
fontWeight: 'bold',
}
},
gridLineWidth: 0
}, {
categories: true,
linkedTo: 0,
width: 100,
height: 34 * ctglength,
left: 358,
visible: false
}],
yAxis: [{
min: 0,
max: 100,
width: 400,
left: 140,
//gridLineWidth: 0,
labels: {
overflow: 'justify',
enabled: false
},
title: {
text: '# of Transactions',
"textAlign": 'right',
"rotation": 0,
x: 15,
y: -310
},
}, {
min: 0,
max: 100,
left: 700,
width: 400,
// gridLineWidth: 0,
labels: {
overflow: 'justify',
enabled: false
},
title: {
text: '$ in Premium',
"textAlign": 'right',
"rotation": 0,
x: 10,
y: -330
},
}],
series: [{
data: arrdata1,
color: '#E95E4F',
showInLegend: false,
//enableMouseTracking: false,
dataLabels: {
overflow: false,
enabled: true,
crop: false,
}, {
data: arrdata2,
color: '#E95E4F',
showInLegend: false,
//enableMouseTracking: false,
dataLabels: {
overflow: false,
enabled: true,
crop: false,
},
yAxis: 1,
xAxis: 1
}]
});
Upvotes: 2
Views: 243
Reputation: 727
try to setSize the Chart in window.onresize , set ur chart in a var and set the height and width getting the input values
myChart= Highcharts.chart....your chart config function
window.onresize = function () {
var w = window.innerWidth;
var h = window.innerHeight;
myChart.setSize(w, h);
}
Upvotes: 1