IE 11 Issue - Not able to Render SVG map and line chart

plotly.js
1

I’m having some issue in IE 11 where the browser is not able to render the svg. I’m getting a console error “Tag Cannot Be Self Closing. Use explicit closing tag.” I’m currently using Vue in conjunction with Plotly.js. I’m trying to gracefully handle this by not displaying either Map and Line Graph online in IE11 but would really like to show IE11 users Plotly and associated data. Does anyone know of a fix for this or could help me trouble shoot the issue ?

The live example is here at genealogybank.com/last-name-meaning?last_name=Stone

I’ve put up a more bare bones example of my code below along with a link to a JS FIDDLE.

HTML:

<div id="app">
 <h1>Map Not Displaying In IE 11</h1>
 <div id="map-container" style="width: 700px; height:700px; border:5px solid red;">

 </div>
</div>

JS:

plotmap1840();

function plotmap1840() {
Plotly.d3.csv('', function(err, rows) {
var mapContainer = document.getElementById('map-container');
var data = [{
  type: 'choropleth',
  showlegend: 'false',
  locationmode: 'USA-states',
  locations: ["AL", "IL", "IN", "MD"],
  z: [4, 12, 8, 4, 2, 9, 7, 65, 1, 5],
  hoverlabel: {
    font: {
      size: 18
    }
  },
  colorscale: [
    [0, 'rgba(186,226,249,0.8)'],
    [0.1, 'rgb(186,226,249)'],
    [0.4, 'rgb(108,206,245)'],
    [0.6, 'rgb(42,168,223)'],
    [1, 'rgb(26,140,204)']
  ]

}];
var layout = {
  height: "700",
  paper_bgcolor: 'rgb(221,241,252)',
  autosize: true,
  geo: {
    scope: 'usa',
    showlakes: true,
    bgcolor: 'rgb(221,241,252)',
    lakecolor: 'rgb(221,241,252)',
    showframe: false
  },
  projection: {
    type: "albers usa"
  }
};
Plotly.plot(document.getElementById('map-container'), data, layout, {
  showLink: false,
  responsive: true,
  scrollZoom: false,
  displayModeBar: false
  });
});

}
2

Thanks for reporting!

Have you tried rendering the same chart on a minimal page with just plotly.js on it?

3

Those are my next iterative steps and I’ll reply with my findings.

4

I’ve updated my question with a more bare bones example. I’m still getting the same issue with IE 11