highcharts, mobile responsive, chart not fitting inside container

Question

I have a donut chart and a bar chart on a page which is mobile responsive. On desktop, they are side-by-side. On mobile, the donut is above the bar chart. On desktop, the donut sometimes gets cut off to one side. The element with class highcharts-container defaults to 600px wide.

I have read reflow (API link) but it doesn't work in my case. For example, described here.

Code samples:

  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -40,
        style: {
          fontWeight: 'bold',
          color: 'white',
        }
      },
      startAngle: 0,
      endAngle: 360,
    }
  },


  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false,
  },

Here's a Codepen, but the problem comes and goes. I've removed irrelevant code.

score 1 · Accepted Answer · answered Aug 13 '18 at 16:01

You need to define the #container and #container2 width's in your CSS file, then it should works correct. Here is the code, and example:

#container {
  width: 100%
}
#container2 {
  width: 100%
}

Live example: https://codepen.io/anon/pen/XBGOgK

Kind regards!

highcharts, mobile responsive, chart not fitting inside container

1 Answers1