d3-chart

Legends Outside of Charts

It is sometimes desirable to place the legend outside of the chart area, for example, when there is not enough whitespace in the chart or the page layout requires the legend to be in a specific location. Call legend.container(), which accepts a D3 selection of a DOM element, to place the legend somewhere else on the page. When the chart is drawn, an SVG containing the legend will be added to the specified container. Note that the SVG will be sized to fit the bounding box of the legend (i.e. calls to legend.margin() will not have any effect on this legend). Additionally, the horizontal alignment (east/west) will be honored, but the vertical alignment (north/south) has no effect.