The inner chart is the plotting area left after removing the SVG container’s top, right, bottom, and left margins. Axes, labels, and legends occupy the surrounding space. section 4.1.1
Calculate and position the inner chart from shared dimensions:
- Declare a margin object with top, right, bottom, and left values. section 4.1.1
- Calculate innerWidth by subtracting the left and right margins from the SVG width. section 4.1.1
- Calculate innerHeight by subtracting the top and bottom margins from the SVG height. section 4.1.1
- Append an SVG group and translate it by the left and top margins, creating the inner chart’s coordinate system. section 4.1.1
A 1,000-by-500-pixel chart
With margins of 40 pixels left, 170 right, 40 top, and 25 bottom, the inner chart measures 790 by 435 pixels. Using shared margins across multiple SVG containers keeps donut charts, streamgraphs, and stacked bar charts horizontally aligned. section 4.1.1 section 5.1.1
const margin = {top: 40, right: 170, bottom: 25, left: 40};
const width = 1000;
const height = 500;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
See the margin object and the proportional innerWidth and innerHeight calculations. section 4.1.1
