I am trying since some days to make a pie chart from highcharts responsive. I am working on a medium size project and sometimes it is easy to lose the overview.
I already checked this : http://www.angulartutorial.net/2014/03/responsive-highchart.html but no success.
Problem: The highchart looks good when the width is 1920px.
When it is 900px then the description of the pie (series -> data) is outside the browser and one can not read it, moreover, the pie is for me to small.
Question: How can I avoid this behaviour? I would like a bigger pie and be able to read the (series-> data).
I provide the following code:
My HTML code is:
Title plot
Bla blablabla blab bl % blabla =
% blablabla blablabla
The CSS code:
#container-independency{
width: 90%;
max-width: 1620px;
background-color: #b8860b;
clear: both;
padding: 1%;
display: none;
box-sizing: border-box;
}
#independency{
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #ffb6c1;
box-sizing: border-box;
}
#highcharts_container{
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
Highcharts:
('#highcharts_container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title:{
text:''
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
pointFormat: '{point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.2f} %',
style: {
color: '#58585a',
fontFamily: 'klavika-web, sans-serif', fontSize: '12px'
}
}
}
},
series: [{
name: '',
data: [
['Property1aaa/Property2aaa/Property3aaaaaa', independency],
['More blablabla blablabla', 100-independency],
]
}]
});//highcharts_container
Update:
android