🚨 This documentation is for Version 3.0.0, which is currently in beta and is a work-in-progress. For now, please refer to the examples for any missing documentation.
The React Charts
<Chart> component has a few options that need to be stable or memoized using either
React.useCallback. Using an unstable option incorrectly shouldn't severly break any basic functionality, but could results in infinite change-detection loops in your app or at the very least, your charts will be severly non-performant. If an option says it needs to be stable, it's not kidding around!
React Charts uses a data shape based on arrays of series and nested arrays of datums in those series.
Visualization data can come in practically any shape and size, so memoization of data into this shape is almost always necessary.
The individual datums in a series'
data array can be anything you want! Just remember that most of the types for React Charts will require you to pass the type of your
Datums as the first generic type to work correctly.
React Charts use axes to configure a fair amount of the charts. Axes handle many things like:
To date, we have the following scale types available:
linear- A continuous axis used for plotting numerical data on an evenly distributed scale. Works well both as a primary and secondary axis.
band- A banded axis commonly used to plot categories or ordinal information. Works well as the primary axis for bar charts with ordinal domains.
time- A continuous axis used for plotting UTC
Dates on an evenly distributed scale. Works well as a primary axis.
timeLocal- Similar to the
timescale, but uses localized
Dateobjects instead of UTC. Works well as a primary axis.
log- A continuous axis used for plotting numerical data on a logarithmically distributed scale. Works well as a secondary axis
Axes are a required component of a React Chart. Both a
primaryAxis and at least one axis vis
secondaryAxes must be configured.
Secondary axes for the most part are automatic, but can be optionally configured to render their respective series using 3 different element types using the
The Chart component props can be passed in its options property object:
The data property should be an array of series, each series should be an array of objects. Each object should have two properties, by convention called primary and secondary, but it can be named as you want. One of these properties will be used as the primary axis and the other as the secondary axes.
The primaryAxis and secondaryAxes options, should have a prop called getValue, which is a getter function that returns the axis value for the datum. Example:
initialHeight and initialWidth expect a number, a default value is applied for each of those, 300 and 200 respectively. It's important to mention that these options are available SSR onoly. If you'd like to have a custom height and width in the client side you may have a wrapper div that sets the width and height CSS attributes
interactionMode expect an string wich can be "primary" or "closest". It's been using for the tooltip position. By default, primary is being set.
showVoronoi expect a boolean, it's a debug option to visualize the interaction click-map that sits on top of the chart.
getSeriesOrder expect a function, this option will allows you to reorder the series if you want.
primaryCursor and secundaryCursor take the options that configure the line/rectangle that is drawn underneath your cursor when you hover over the chart. When both are used, it produces a kind of cross-hair. Both are set to true by default.
All element types that support lines or curves can be configured by passing any
curve generator function as the
AxisOptions<TDatum>['curve'] option. By default, horizontal and vertical series default to using
monotoneY curves, respectively. More information can be found at
Coming Soon! Feel free to consult the examples or refer to the exported types in your favorite IDE for now.