A simple way to make D3.js charts responsive

Louise Moxy

·

Follow

2 min read

·

Oct 31, 2018

--

4

Listen

Share

This post will be a quick way to make any SVG or D3.js chart responsive. This will be looking at making the SVG grow/shrink in size depending on the SVG container. We won’t be covering how to improve the chart at smaller sizes as this depends on the chart and how much information is included.

So taking a basic D3 area chart:

Here the size of the chart is set with height 300 and width 600, because we haven’t given it any units it uses pixels.

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("height", 300)
  .attr("width", 600);

Now to make the chart responsive, we can replace the set height and width of the chart, with a viewBox attribute using the same height and width values.

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("viewBox", `0 0 300 600`)

The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, for more information you can look at the MDN.

The min-x and min-y can be used as an offset for the SVG element, but it can get very confusing when calculating positions, so I would recommend leaving them at 0.

Now as long as the container or SVG isn’t a floating element or has some height and width set on it, the SVG will now scale correctly to fit the container.

Here is the finished chart, which will fit the full width of the container, while keeping the aspect ratio the same for the SVG.

Super easy and simple, if you do find some issues with your chart not fitting correctly in the container, then usually it means some calculation are off, and some of your SVG elements are outside the view. If you are working on something which needs to be partially out of the view, then the attribute preserveAspectRatio sets how the SVG should align within the viewBox.

Thanks for reading 👋