D3.js Chart: Labels ( Tags) Not Showing On Ie11

I have a stacked bar chart whose labels will not show on IE, but will on Chrome and Firefox. The labels I have on the stacked bar charts are part of the axes and the l

Solution 1:

This may be a dumb work around, but have considered running a function that "clicks" the graph or gives it attention?

I once needed a base state class of an object to be inactive, however I also wanted the first instance to be active. It was sort of annoying, so I just made a small function that was used just once to click and change to active on load, but instance after that the base was set to inactive.

I would consider doing a similar thing to the graph, it shouldn't effect any of the other browsers since they are loading in the right format anyway.

Solution 2:

In case anyone is still suffering with this issue, I've come across a solution that works in many cases.

If the width of the svg element changes, IE will repaint the SVG element, which will correct a misplaced element. If the svg is set to 100% of its container div's width through the style attribute, a negligible change to the svg's width will not be visibly obvious, but is enough to repaint.

The width (and height) of the enclosing element can be used to set the svg's desired dimensions.

// HTML
<div class="container">
  <svgid="mySVG"></svg>
</div>

// JSvar svgEl = document.getElementById( 'mySVG' )
svgEl.style.width = '99.9%'// can be any % other than that initially set on the svg