C3.js issue - x-axis labels are overlapping with legends text for IE11

[chetan4651]

I am facing this issue with only IE 11. For chrome and Firefox, its working fine. I am using c3.js for charts with IBM bpm tool ( March 2018 patch updated ).

I tried to transform with a stylesheet, but it won't work. Padding and margin are also not there for legends. I set position to bottom.

Does anyone know how to pull down legends so it will not overlap with x-axis labels?

• Browser - IE 11:
• OS - Win 7:

[alpeshv]

Use the following versions of d3 and c3. You may also need to use multiline:false and rotate to some angle.

<script src="http://c3js.org/js/d3-5.4.0.min-e9c75f0e.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-c6f0a732.js" type="text/javascript"></script>

These scripts will break pie chart tooltip. Workaround is to add the following css.

g.c3-chart g.c3-event-rects rect.c3-event-rect {
     pointer-events: none;
}