Q: Pie chart of High-Chart is not Responsive in mobile I am using Pie Chart of HighCharts, It is responding to Desktop. But while I check in mobile it is coming like a dot[small round],and font size is not visible when see in mobile browser,How to make font size small while in Mobile view,Here is my complete code Please help me how to make Pie chart in Mobile view.
 <html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "jquery.min.js">
      </script>
      <script src = "highcharts.js"></script>  
   </head>
 <body>
 <div id = "container" style = "width: 80%; height: 400px; margin: 0 auto"></div>
 <script language = "JavaScript">
 $(document).ready(function() {
var chart = {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
};
var title = {
    text: 'Browser market shares at a specific website, 2014'   
};
var tooltip = {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions= {
 pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    showInLegend: true,
    dataLabels: {
    enabled: false,                        
    formatter: function() {
        return this.percentage.toFixed(2) + '';
    }
    }                                   
}
};

var  legend={
    enabled: true,
    layout: 'vertical',
    align: 'middle',
    width:165,
    //height:100,
    verticalAlign: 'middle',
    useHTML: true,
    labelFormatter: function() {
    return '<table style="border:0"><tr><td style="font-size:19px;"> ' + this.name + ' - </td> <td style="font-size:19px;"> ' + this.y + ' </td></tr></table> <br />';
                }
    };
var series = [{
       type: 'pie',
       name: 'Browser share',
       data: [
          ['Firefox',   45.0],
          ['IE',       26.8],
          {
             name: 'Chrome',
             y: 12.8,
             sliced: true,
             selected: true
          },

          ['Safari',    8.5],
          ['Opera',     6.2],
          ['Others',   0.7]
       ]
    }];

 var responsive= {
    rules: [{
        condition: {
        maxWidth: 500
        },
        chartOptions: {
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            layout: 'horizontal'
        },
        yAxis: {
            labels: {
                align: 'centre',
                x: 0,
                y: -5
            },
            title: {
                 text: 'Browser market shares at a specific website, 2015' 
            }
        },
        subtitle: {
            text: null
        },
        credits: {
            enabled: true
        }
        }
    }]
    };
            var json = {};   
            json.chart = chart; 
            json.title = title;  
        json.responsive = responsive;     
            json.tooltip = tooltip;  
        json.legend = legend;  
            json.series = series;
            json.plotOptions = plotOptions;
            $('#container').highcharts(json);  
         });
      </script>
   </body>
</html>

