lineType Advanced Settings

As with other data visualization types in the various frames, XYFrame will let you send the following strings to lineType: "line", "linepercent", "difference", "stackedarea", "stackedpercent", "bumpline", "bumparea". If you want more control over the line data visualization being rendered, each of these types have additional settings you can adjust based on your use case and which typically expose settings associated with the data transformation method associated with the line type. To do this, you need to send an object instead of a string, and that object should have a type attribute set to the string, so this uses stackedarea with the default method:

<XYFrame
   lineType={"stackedarea"}
/>

...while this sends custom settings to render a stacked area chart with a curve preserving monotonicity:

import { curveMonotoneX } from 'd3-shape'

<XYFrame
   areaType={{ type: "stackedarea", interpolator: curveMonotoneX  }}
/>

Custom Settings by Type

Shared

• interpolator: Takes a d3 style curve, like those found in d3-shape.

line Settings

• y1: Allows you to set the y1 accessor to create "area lines" such as filled areas that grow from the zero baseline or ribbons.

stackedarea Settings

• sort: the sorting function by which to order the shapes vertically. Defaults to largest shapes on the bottom and you can send null to prevent sorting.

stackedpercent Settings

• sort: the sorting function by which to order the shapes vertically. Defaults to largest shapes on the bottom and you can send null to prevent sorting.