The flot pie chart is working fine in normal desktop view but it is broken in responsive view and in mobile devices. Please check the images below
Desktop view[
^]
In mobile device and responsive view[
^]
What I have tried:
I tried applying CSS, updated plugin from GitHub but didn't help. Below is the code
define(function(){
return {
init: function(selector, data)
{
require(['thirdparty/jquery.flot.pie', 'thirdparty/jquery.flot.tooltip.min'], function()
{
$.plot($(selector), data,
{
series:
{
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
formatter: function(label, series) {
return '<div style="font-size:10pt;text-align:center;padding:2px;color:white;">'.concat(label).concat('<br/>').concat(series.data[0][1]).concat('</div>');
},
background: { opacity: 0.8 }
}
}
},
legend: {
show: false
},
grid: {
hoverable: true,
},
tooltip: true,
tooltipOpts: {
cssClass: "flotTip",
content: function(label, x, y){
return y.toString().concat(" ").concat(label);
},
shifts: {
x: 20,
y: 0
},
defaultTheme: true
}
});
});
}
}
});