highstocks responsive styling not working in different devices - highcharts

Question

I'm trying to give my chart responsive styling in three different devices. i created rules iPad pro (max width 2048), iPad (max width 1024) and mobile (max width 480) but its not rendering properly. for iPad pro its rendering iPads styling and for iPad its showing mobile styling.
responsive: {
rules: [
{
condition: {
maxWidth:2048
},
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: '25px',
color: 'red'
},
}
},
{
dataLabels: {
style: {
fontSize: '15px',
},
}
}
]
}
},
{
condition: {
maxWidth: 1024
},
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: '35px',
color: 'green'
},
}
},
{
dataLabels: {
style: {
fontSize: '8px',
},
}
}
]
}
},
{
condition: {
maxWidth: 480
},
chartOptions: {
series: [{
dataLabels: {
style: {
fontSize: '20px',
},
}
},
{
dataLabels: {
style: {
fontSize: '8px',
},
}
}
]
}
}]
} `

Answer 1

Have you noticed that responsive rules like maxWidth and minWidth are applied to a chart width? This is not always equal to screen width.
Highcharts api description of maxWidth:
The responsive rule applies if the chart width is less than this.
So your code is probably working correctly. Check title on several screen widths in this example: https://jsfiddle.net/BlackLabel/3stawvum/.
responsive: {
rules: [{
condition: {
maxWidth: 2048,
minWidth: 931
},
chartOptions: {
title: {
text: '2048 title'
},
}
}, {
condition: {
maxWidth: 930,
minWidth: 401
},
chartOptions: {
title: {
text: '1024 title'
},
}
}, {
condition: {
maxWidth: 400
},
chartOptions: {
title: {
text: '480 title'
},
}
}]
}
API reference:
https://api.highcharts.com/highcharts/responsive.rules.condition.maxWidth