LineChart draws a line for each series across the rows of data, with the area under it filled. It sits on a bordered card with an optional title and description, a legend and axis labels, and draws with react-native-svg. It takes the same data and series as the web LineChart. Tap a row to see its values.
Each row of data is an object. The x value is the first key that is not a series, here date. Each entry in series names a key that holds a number and gives it a color. A color can be a data color ("blue", "emerald" and the other schemes), any theme color token, or a raw #hex value. If you leave out color, the series gets a distinct scheme, as on the web. Rows without a number for a series are skipped, and the line joins their neighbours.
curve sets how the line runs between points. It takes the names of d3's curves: natural (the default), monotone, linear, step, stepBefore, stepAfter, bump and basis. monotone never overshoots the data, which suits values that can't go below zero.
variant fills the area under the line with a fading gradient (the default), a solid flat color or nothing (outline). data-viz-style="sequential" draws every series in shades of the brand color, and divergent uses core's diverging palette.
date.start and date.end keep only the rows between them. date.format writes date x values, given as a Date or an ISO string, with the common date-fns tokens: yyyy, yy, MMMM, MMM, MM, M, dd, d, EEEE, EEE, HH and mm.
By default the rows are spread evenly, the first on the left edge and the last on the right. Set xAxisType="number" to place each row by its x value instead, over xDomain or the values' range.
Tap a row to show a line through it, a dot on each series and a tooltip with the values. Tap the same row again to hide it, or another row to move it. tooltip={false} turns tapping off. Screen readers read each row as a button labelled with its values.
loading shows a spinner instead of the plot. With no rows, the chart shows emptyState, and with error it shows errorState. Both take a string or your own element.
The chart fills its parent's width, measured with onLayout, so the plot redraws when the screen rotates. The card is 24 rem tall by default. Set height (a number of rem, a spacing token or a percentage, as on Flex) to change it. The header and legend take their own height and the plot takes the rest.
- Tapping a row shows the tooltip and the dots, instead of hovering.
- The legend sits above or below the plot, instead of over it.
- There is no date range picker. date.selector, presets, dual, min, max and onChange are not taken, and date.format knows the tokens listed above.
- There is no DataThemeProvider. variant is a prop (gradient by default), and data-viz-style sets the color mode per chart.
- The chart doesn't animate in, so animation, animationBegin, animationDuration and animationEasing are not taken.
- reverseX and reverseY are not taken. The x labels are always below and the y labels on the left.
- The *Closed, *Open and *Y curves draw as their plain form (basisClosed as basis, monotoneY as monotone).
- Rows without a value are joined over, instead of leaving a gap.
- The y labels take only the width they need, instead of a fixed 64px column. When x labels would overlap, only every second (or third, and so on) label is shown.
- Without series, only the keys that hold numbers become series.
