Overlapping charts server-side d3

[françois Manley]

https://jsfiddle.net/fjzjnc6m/

Hello everybody,
I'm having some trouble rendering those 3 charts on top of each other server-side.

The result is perfect "locally", but as soon as i throw the directory server-side, the first two charts overlaps (while still displaying).
Does anybody have some insight about what could cause this ?

I've notived that feeding each chart's div with an individual linkrel stylesheet CSS does solve the trick in local but i doubt it is a very consistent solution.

Thank you very much in advance.
F.

[françois Manley]

Just solved it.

Had to change my Height variables names for each chart's div individually.

Hasardly, the X axis was at the bottom of the page, merging with the last div's height parameter...

var marginc = {top: 30, right: 20, bottom: 20, left: 60},
    //width = +chart1.attr("width") - margin.left - margin.right,
    //height = +chart1.attr("height") - margin.top - margin.bottom;
    width1 = 700 - marginc.left - marginc.right,
    heigh = 200 - marginc.top - marginc.bottom;

p.append("g")
      .attr("class", "axis axis--x")
            .attr("transform", "rotate(-45)")
      .attr("transform", "translate(0," + (heigh / 2)*2 + ")")
      .call(d3.axisBottom(x))
      .selectAll("text")
      .attr("x", x(data[0].date))
      .attr("y", "300")
      .style("text-anchor", "middle")
      .attr("dy", ".9em")
      .attr("dx", "-2em")
      .attr("y", "1em")
      .attr("transform", "rotate(-45)" );