CODEWITHSUNDEEP
javascriptjqueryhighcharts
Psychedelic Wizard
Psychedelic Wizard

Reputation: 123

HighCharts graphics not working on Internet Explorer

I have built a website that includes a number of graphics and maps from HighCharts. All of them work great on Firefox, Safari, Chrome, Opera, Microsoft Edge and on cell phones, but for some reason none of them will render on any version of Internet Explorer. I am actually hoping to just get it to render on IE 11 and not worry about the rest as they are no longer supported by Microsoft, but so far, I am unable to find the problem. I have attached the code for one of the simpler graphics I'm using for folks to review.

I have tried some of the common recommendations I have found online; namely, I have set it up so that there are no duplicates of the required HighCharts and jQuery scripts for any given page, and I have the following meta tag in the head of each page on the site.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

I would be grateful for any help figuring out how to resolve this problem. Here's a link to the site in question: http://165.22.82.145

Here are the scripts I'm using for this particular example, which are located on each page under Header Scripts (this is a WordPress site):

<script src="https://code.highcharts.com/highcharts.src.js"></script>

<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Here is the code for the graphic:

Highcharts.chart('container-2', {
  chart: {
    backgroundColor: '#f3f7fa',
    type: 'column'
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    categories: ['ciudadanos', 'instituciones', 'social', 'económica', ],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 1,
    title: {
      text: 'Total'
    },
    max: 10,
    endOnTick: false,
    labels: {
      overflow: 'justify'
    }
  },

  tooltip: {
    valueSuffix: ''
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },

  credits: {
    enabled: false
  },

  exporting: {
    buttons: {
      contextButton: {
        align: 'center',
        x: 0
      }
    },
    chartOptions: {
      chart: {
        events: {
          load: function() {
            this.renderer.image('#',
              275, // x
              20, // y
              75, // width
              40, // height
            ).add();
          }
        }
      }
    }
  },

  series: [{
    name: '2019',
    showInLegend: false,
    color: '#6497b1',
    data: [5.512, 7.592, 0.628, 0.894]
  }, {
    name: '2018',
    showInLegend: false,
    color: '#dc005a',
    data: [6.553, 5.319, 0.499, 1.495]
  }]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
<h2 class="doubletab">Title here <br>2018 - 2019</h2>

<div class="ranking-graphic-wrapper">

  <div id="container-2" style="width:100%; height:450px">

  </div>
</div>

Upvotes: 0

Views: 104

Answers (1)

Joffrey Schmitz
Joffrey Schmitz

Reputation: 2438

I tested the issue on Internet Explorer, and the console shows an error in this bit of code :

load: function() {
    this.renderer.image('#',
    275, // x
    20, // y
    75, // width
    40, // height
).add();

The error can come from the last trailing comma after 40, which is a syntax that is not supported by Internet Explorer : Trailing commas

Upvotes: 1

Related Questions