Gary Sieling

D3: Fixing clipped charts

If you make a chart in D3, you can get issues like this, where the axes get clipped:

To fix the spacing between the charts, I would add space to the HTML element surrounding the chart. To fix the clipping inside, you need margin inside the chart – this is why all the D3 examples define a bounding box like so:

let margin = {top: 0, right: 0, bottom: 25, left: 0},
    width = 200 - margin.left - margin.right,
    height = 60 - margin.top - margin.bottom;

If you’ve done what most people have done, and copied existing examples, you should be able to just make this change:
let margin = {top: 0, right: 5, bottom: 25, left: 5},
width = 200 – margin.left – margin.right,
height = 60 – margin.top – margin.bottom;

And you’ll get a working chart:

Exit mobile version