Star
  1. Basic

  2. In this example we are using the d2b svgArea, svgLine and svgScatter generators together. If the chart consisted of a large number of points it may be best to just use the svgArea and svgLine generator to avoid cluttering the plane.

    JS
    HTML
    CSS
  3. Using Curves

  4. Here we will interpolate the area chart using the d3 module curveBasis. You'll notice that the points no longer match up with the basis fit for each line.

    JS
    HTML
    CSS
  5. Stacking

  6. You can stack the area charts by using the stackBy property on the svg generators. In order to get the area, line, and scatter to be stacked to match each other they will all need to have the stackBy property set.

    JS
    HTML
    CSS
  7. Stacking Advanced

  8. The stackBy property can be passed an accessor function in order to stack only some of the area charts together. In the example below, the blue and orange area charts are stacked together as stack: 1 where as the green will be a separate stack as stack: 2.

    JS
    HTML
    CSS