D3 Bar Chart - Bars spills over x-axis scale line

1

The bars spills over the x-axis line. I don’t know why this is happening. I think its because of the padding that is causing this, but I’m not sure and I don’t know how the fix this. Also, if I get rid of padding, axes line would be cut out of the ‘svg’.

bar-chart
bar-chart845×466 13.6 KB

link: https://codepen.io/Ozubergs/pen/XoVxpQ?editors=0110

2 
  //BARS  
  svgContainer.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect') 
    .attr('x', (d) => xScale(new Date(d[0])))
    .attr('y', (d) => yScale(d[1]))
    .attr('width', width/dataset.length)
    **.attr('height', (d) => (height - padding) - yScale(d[1]))**
    .attr('fill', '#6bedff')
    .attr('class', 'bar')
    .attr('data-date', (d) => d[0])
    .attr('data-gdp', (d) => d[1]);
  
  //AXES GROUP
  var xAxis = d3.axisBottom(xScale);
  var yAxis = d3.axisLeft(yScale);
  
  svgContainer.append('g')
    .attr('id', 'x-axis')
    **.attr("transform", "translate(0, " + (height - padding) + ")")**
    .call(xAxis);

If you subtract the padding from the height in the xAxis transform, and in the height attribute for the svg it should line up

4 Likes
3

Thanks a lot. You helped greatly