Victory: Charts do not correctly size on IE 11

[kkerr1]

Experienced on Internet Explorer 11 on Windows 10. Charts are not expanding to fill up their responsive width. A quick look around signals that this might have something to do with IE buggyness related to the svg viewBox attribute.

[paulathevalley]

@boygirl @kkerr1 Yes, this was a risk in setting an auto height for inline SVGs. I was hopeful that by setting width: 100%; we might have gotten around this issue, but it appears not. :(

_Many_ browsers—IE, Safari, and versions of Opera and Chrome released prior to summer 2014—will not auto-size inline SVG. If you don't specify both height and width, these browsers will apply their usual default sizes, which as mentioned previously will be different for different browsers. The image will scale to fit inside that height or width, again leaving extra whitespace around it. Again, there are also inconsistencies in what happens if you leave both height _and_ width auto.

IE 11 was released in October 2013.

There are other workarounds listed in this article, including a padding-bottom hack on a container that might do the trick: https://css-tricks.com/scale-svg/#article-header-id-10

[wwarme]

Is there any way of accessing the css-styling of the Victory-generated svg-Element? Most workarounds target the css-styles, including the padding-bottom hack.

[boygirl]

@wwarme victory is all inline styled, so you can apply styles via style={{parent: {...}}} on the outermost component. Or you can set standalone={false} on the outermost component and it will render an <g> tag instead of an <svg> so you can nest it in whatever svg you like

[wwarme]

Thanks for the help, standalone on false did the trick for me so far.

[laurence-hudson-tessella]

To make this nice and easy for others, I workaround this bug using this component:

import React from 'react';
import { VictoryChart } from 'victory';

const IEFriendlyVictoryChart = (props) => (
  <div style={{ position: 'relative', height: 0, width: '100%', padding: 0, paddingBottom: `${100 * (props.height / props.width)}%` }}>
    <VictoryChart {...props} style={{ ...props.style, parent: { position: 'absolute', height: '100%', width: '100%', left: 0, top: 0 } }} />
  </div>
);
IEFriendlyVictoryChart.propTypes = VictoryChart.propTypes;

export default IEFriendlyVictoryChart;

So that when the bug is fixed I can just delete IEFriendlyVictoryChart.js & update the import of VictoryChart.

import React from 'react';
import VictoryChart from './IEFriendlyVictoryChart';
import { VictoryScatter } from 'victory';

const SineWave = () => (
  <VictoryChart height={500} width={1000}>
    <VictoryScatter y={(data) => Math.sin(2 * Math.PI * data.x)} />
  </VictoryChart>
);

https://jsfiddle.net/L21adxr9/

[ssuvorov]

@laurence-hudson-tessella works! Thank you!

[AmauryLiet]

Note for people stumbling across this solution:
The IEFriendlyVictoryChart is unfortunately not really a EdgeFriendlyVictoryChart :)
(the graph doesn't display in my case)

I would recommand using the ie-version lib to determine if the user is using IE:

import ie from 'ie-version';

...

export default ie.version ? IEFriendlyVictoryChart : VictoryChart;

[pcclarke]

I just used the solution by @laurence-hudson-tessella and had no issues in Edge 17 with a VictoryBar.

[andreas-eberle]

I also just tried the solution of @laurence-hudson-tessella and it seems to work in Firefox, Edge, IE, Chrome and Samsung Mobile Browser. @boygirl: Maybe consider adding this to the normal code so it is compatible with IE.