Click here to Skip to main content
15,890,527 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
                    }
                });
            });
        }
    }
});
Posted
Updated 19-Nov-19 23:05pm
v5
Comments
Richard MacCutchan 20-Nov-19 11:19am    
The code most likely needs adjusting to take account of different screen sizes. Go back to the person who wrote that code for assistance.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900