Supporting Internet Explorer

Vega version 4.3.0 and earlier is compatible with Internet Explorer versions 10 and 11, but with some notable caveats and limitations, described below. Later versions of Vega assume ES6 support. To use more recent versions of Vega with older browsers, use a JavaScript compiler such as Babel to generate ES5-compliant code.

Enabling Internet Explorer Support

Vega is compatible with Internet Explorer versions 10 and 11, but with caveats: Internet Explorer does not natively support Symbols, Promises, or the Fetch API. Vega uses Symbols to add unique identifiers to data objects, uses Promises for asynchronous tasks such as data and image loading, and uses Fetch to load external files.

For Vega to work correctly, deployments intended to support Internet Explorer should include polyfills that add Symbol, Promise, and Fetch support. For example, one can use the es6-promise and the github/fetch libraries. Web pages should first import any polyfill scripts, then import Vega:

<head>
  <script src="https://vega.github.io/vega/assets/promise.min.js"></script>
  <script src="https://vega.github.io/vega/assets/symbol.min.js"></script>
  <script src="https://vega.github.io/vega/assets/fetch.min.js"></script>
  <script src="https://vega.github.io/vega/vega.min.js"></script>
</head>

Note that a polyfill is necessary only for Internet Explorer support. Recent versions of other browsers – including Edge (Internet Explorer’s successor), Chrome, Safari, Firefox and Opera – all have native Symbol, Promise, and Fetch support.

Limitations

Input event handling issues on Internet Explorer may arise when using stroked marks (such as line marks) with a Canvas renderer. Some versions of Internet Explorer do not support the Canvas Context2D method isPointInStroke. Vega depends on this method to determine when the mouse cursor is within a stroke. Without it, Vega can only tell when a point lies within a filled (rather than stroked) region, causing interactions such as mouse hover over line marks to fail. Possible solutions include using SVG rather than Canvas (Vega then uses browser element event listeners to determine hover), or encouraging users to upgrade to a more modern standards-compliant browser.