Highcharts Rendering Issues in all broswers

Question

This seems to be a common issue, but the last thread is over 5 years old.

For some reason my HighCharts container is not rendering properly unless the browser is resized. This problem emerged less than a week ago, and I didn't change any of the code. Frustrating!

Several threads suggest it is an issue with the Highcharts library being incompatible with the JQuery library, and I've made sure both are up to date. I've even gone back through all the available old versions of JQuery to make sure this wasn't the issue.

I'm not very well versed in JS, so if you have a recommendation (such as inserting lines that resize the container) can you please be specific about where to put it / syntax? Thanks!

Here's a link to my JSfiddle (where it actually renders properly)
https://jsfiddle.net/a62f7z4z/

And a link to my website where it shows distortion on all browsers.
https://reliance.investechs.com

Answer 1

You mentioned that this problem appeared not so long ago. Could you tell me which Highcharts version do you use? Try to use older one (e.g. code.highcharts.com/5.0.12/highcharts.js) and see if issue still occurs.

Answer 2

Try this fiddle, this will automatically resize the highchart on browser resize

/*

    Notice the height is NOT set

*/

$(function() {

  Highcharts.Chart.prototype.is3d = function() {
    return this.options.chart.options3d && this.options.chart.options3d.enabled; // #4280
  };


  $('#ChartContainer2').highcharts({

    chart: {
      type: 'bar',
      options3d: {
        enabled: true,
        alpha: 15,
        beta: 15,
        viewDistance: 0,
        depth: 70
      },
      marginTop: 120,
      marginBottom: 120
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        pointWidth: 30 //width of the column bars irrespective of the chart size
      },
      bar: {
        depth: 50,
        height: 50,
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              var drilldown = this.drilldown;
              if (drilldown) { // drill down
                //alert(drilldown.TaskID + ' ' + drilldown.name);
                $("#PacingModal").modal('show');
              }
            }
          }
        },
        dataLabels: {
          enabled: true,
          //rotation: -90,
          inside: true,
          color: '#FFFFFF',
          //align: 'right',
          x: 40,
          y: 15,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif',
            textShadow: '0 0 3px black'
          },
          formatter: function() {
            return this.y + '%';
          }
        }
      }
    },
    series: [{
      name: 'Not Complete',
      data: [{
        y: 5,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }

      }, {
        y: 3,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }, {
        y: 4,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }, {
        y: 7,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }, {
        y: 2,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }]
    }, {
      name: 'Clean Up',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Complete',
      data: [3, 4, 4, 2, 5]
    }]




  });

});

#ChartContainer2 {
  height: 100%;
  width: 100%;
  position: absolute;
}

<div id="ChartContainer2">

</div>

Fiddle link

Answer 3

The problem here seems to be the min-width attribute in the container <div> element. If you remove that attribute, the chart's legend displays as expected (see the screenshot below, where I used the inspect tool to remove it).

Highcharts is natively responsive, so it will normally fill whatever element in which it's placed to 100%. It seems placing a minimum width constraint told the legend item to be no wider than what you set (310 pixels).

As you noticed, whenever you resize the browser, the responsive code takes over and manages the chart's dimensions based on the window resize trigger. I think it's that initial on load setting that's causing your issue.

I hope this is helpful for you.