Creating our bounding box
We create our bounding box, and shift it to respect our margins.
Creating our bounding box#
Our SVG element is the size we wanted, but we want our chart to respect the margins we specified.
Let's create a group that shifts its contents to respect the top and left margins so we can deal with those in one place.
Any elements inside of an
<svg> have to be SVG elements (with the exception of
<foreignObject> which is fiddly to work with). Since we'll be inserting new chart elements inside of our
<svg>, we'll need to use SVG elements for the rest of the chart.
<g> SVG element is not visible on its own, but is used to group other elements. Think of it as the
<div> of SVG — a wrapper for other elements. We can draw our chart inside of a
<g> element and shift it all at once using the CSS