On window resize, chart is falling back to in-build css , Any pattern or css applied is classes are not appearing

[soniya31]

Please do not submit support requests or "How to" questions here. For that, go to StackOverflow.

What you were expecting:

On window resize or inspect element, It should render the custom css or pattern applied
like below.
var defs = d3.select("defs").append("pattern").attr("id", "enrollment").attr("height","26") .attr("width","26").append("image").attr("height",26)

d3.selectAll(".line-label").attr("x", 0 ).attr("stroke","none").attr("fill","#000")

What happened instead:

On window resize or inspect element, It's failing back to inbuild css. I m trying this code in Angular 6
Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Environment

• EventDrops version
• Browser: Chrome
• Stack trace (in case of a JS error):

[Busteren]

Have you tried adding that code to the window size event listener?
So the way the chart works is that for each time the window size changes, the chart is redrawn (so your code needs to be run after the chart redraws).
If the only thing you want is to change the CSS, you might be better off not using D3 to do the styling and just a normal stylesheet.

Let me know if either of these ideas solves your problem.

Edit*
You can also just fork the chart and add those changes yourself. I have done that for the chart I was creating when I wanted to control the zoom more or dynamically change things.

Edit3:
Another idea is to create an extra argument to take into config, which is a method will be called each time at the end of the draw function, which ensures that what you do is called after the chart draw