动态字体大小和宽度的响应式图表

Question

Im trying to make my Pie Chart fully responsive so it can be viewed on smaller devices. Im using the latest Highcharts version (Version 5) to draw the charts.

I have used the below code to give the chart a maximum and minimum width so the chart doest expand or shrink too too much

JS Code

responsive: {
  rules: [{
    condition: {
      maxWidth: 500,
      minWidth: 100
    },
    chartOptions: {
      legend: {
        enabled: true
      }
    }
  }]
},

But unfortunately this doesnt seems to be working. The max and minimum width is not being applied to the chart.

Also how can i set the font size in the legend and chart (both percentage and the center text) dynamically (smaller) when its viewed on small screens. Now the font size remains the same on smaller screens which takes up lots of space and breaks the chart

I have setuped a demo over here https://jsfiddle.net/livewirerules/6wu282fu/11/

Any help will be appreciated

Answer 1

I answer this for upcoming referee

as of Highcharts 5, you have an ability to change font size with a dynamic value with em numbers eg: 1em

you can see it in action here :

 [http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/em/][1]