responsive highcharts with dynamic font size and widths

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

Did you set the options correctly? You have enabled legend and then in the responsive rules you are configuring it to have enabled legend if the chart has width > 100 and < 500 - so there will be no visible effect. jsfiddle.net/6wu282fu/12 As for the font, you can detect your browser window size/device and then use chart.update() for the elements which should have changed font size jsfiddle.net/uwz3aya0 or you can use responsive rules to change the chart's font size as in my first fiddle — morganfree
@morganfree Actually i want to show the legend on my left hand side and give a min and max width for the chart.If u see now when i resize the screen small the complete chart looks messed up.. Thats y need to give a minimum width so it doesnt go below that — LiveEn
The first can be achieved with responsive rules, set condition as in your example in the question and set legend with align: left. The second, set css for the container - min-width and max-width - and it will do the job. — morganfree

Nasser Hadjloo Nasser Hadjloo · Accepted Answer · 2018-01-06T14:51:07

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]

responsive highcharts with dynamic font size and widths

1 Answers