react-charts
Advanced tools
Simple, immersive and interactive charts for React
Enjoy this library? Try them all! React Table, React Query, React Form
React Charts is currently in beta! This means:
$ yarn add react-charts
# or
$ npm i react-charts --save
React
This will render a very basic line chart:
import React from 'react'
import { Chart } from 'react-charts'
function MyChart() {
const data = React.useMemo(
() => [
{
label: 'Series 1',
data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
},
{
label: 'Series 2',
data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
}
],
[]
)
const axes = React.useMemo(
() => [
{ primary: true, type: 'linear', position: 'bottom' },
{ type: 'linear', position: 'left' }
],
[]
)
const lineChart = (
// A react-chart hyper-responsively and continuously fills the available
// space of its parent element automatically
<div
style={{
width: '400px',
height: '300px'
}}
>
<Chart data={data} axes={axes} />
</div>
)
}
Complete documentation is coming soon. The most detailed usage examples are visible by browsing the website's examples.
Any sparse documentation available in this Readme is being progressively improved as the API evolves.
React Charts exposes these top-level exports:
Chart - The Chart component used to render chartsLineBarBubbleAreacurveBasisClosedcurveBasisOpencurveBasiscurveBundlecurveCardinalClosedcurveCardinalOpencurveCardinalcurveCatmullRomClosedcurveCatmullRomOpencurveCatmullRomcurveLinearClosedcurveLinearcurveMonotoneXcurveMonotoneYcurveNaturalcurveStepcurveStepAftercurveStepBeforepositionToppositionRightpositionBottompositionLeftgroupingSinglegroupingSeriesgroupingPrimarygroupingSecondaryalignAutoalignRightalignTopRightalignBottomRightalignLeftalignTopLeftalignBottomLeftalignTopalignBottomaxisTypeOrdinalaxisTypeTimeaxisTypeUtcaxisTypeLinearaxisTypeLoganchorPointeranchorClosestanchorCenteranchorTopanchorBottomanchorLeftanchorRightanchorGridTopanchorGridBottomanchorGridLeftanchorGridRightfocusAutofocusClosestfocusElementAs you'll see in every example, the React Charts <Chart> component expects all props and options to be memoized using either React.useMemo or React.useCallback. While passing an unmemoized option/prop to the <Chart> component won't severly break any visible functionality, your charts will be severly non-performant. Internally, React Charts uses the immutable nature of thes options/props to detect changes to the configuration and update accordingly.
While this may feel heavy at first, it gives you, the dev, full control over when you want to update your charts. To trigger and update, simply trigger one of your React.useMemo or React.useCallback hooks on the part of the config that you would like to update!
React Charts uses a common and very flexible data model based on arrays of series and arrays of datums. You can either use the model defaults directly, or use data accessors to materialize this structure.
Typical visualization data can come in practically any shape and size. The following examples show data structures that are all reasonably equivalent at some level since they each contain an array of series[] and datums[]. They also show how to parse that data.
In the following example, there is no need to use any accessors. The default accessors are able to easily understand this format:
function MyChart() {
const data = React.useMemo(
() => [
{
label: 'Series 1',
data: [{ x: 1, y: 10 }, { x: 2, y: 10 }, { x: 3, y: 10 }]
},
{
label: 'Series 2',
data: [{ x: 1, y: 10 }, { x: 2, y: 10 }, { x: 3, y: 10 }]
},
{
label: 'Series 3',
data: [{ x: 1, y: 10 }, { x: 2, y: 10 }, { x: 3, y: 10 }]
}
],
[]
)
const axes = React.useMemo(
() => [
{ primary: true, type: 'linear', position: 'bottom' },
{ type: 'linear', position: 'left' }
],
[]
)
return (
<div
style={{
width: '400px',
height: '300px'
}}
>
<Chart data={data} axes={axes} />
</div>
)
}
In the following example, there is no need to use any accessors. The default accessors are able to easily understand this format, but please note that this format limits you from passing any meta data about your series and datums.
function MyChart() {
const data = React.useMemo(
() => [
[[1, 10], [2, 10], [3, 10]],
[[1, 10], [2, 10], [3, 10]],
[[1, 10], [2, 10], [3, 10]]
],
[]
)
const axes = React.useMemo(
() => [
{ primary: true, type: 'linear', position: 'bottom' },
{ type: 'linear', position: 'left' }
],
[]
)
return (
<div
style={{
width: '400px',
height: '300px'
}}
>
<Chart data={data} axes={axes} />
</div>
)
}
When data isn't in a convenient format for React Charts, your first instinct will be to transform your data into the above formats. Don't do that! There is an easier way 🎉 We can use the Chart components' accessor props to point things in the right direction. Accessor props pass the original data and the series/datums you return down the line to form a new data model. See the <Chart> component for all available accessors.
In the following example, the data is in a very funky format, but at it's core is the same as the previous examples.
function MyChart() {
// Use any data object you want
const originalData = React.useMemo(
() => ({
axis: [1, 2, 3],
lines: [
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] }
]
}),
[]
)
// Make data.lines represent the different series
const data = React.useMemo(data => originalData.lines, [originalData])
// Use data.lines[n].data to represent the different datums for each series
const getDatums = React.useCallback(series => series.data, [])
// Use the original data object and the datum index to reference the datum's primary value.
const getPrimary = React.useCallback(
(datum, i, series, seriesIndex, data) => originalData.axis[i],
[]
)
// Use data.lines[n].data[n].value as each datums secondary value
const getSecondary = React.useCallback(datum => datum.value, [])
return (
<div
style={{
width: '400px',
height: '300px'
}}
>
<Chart
data={data}
getSeries={getSeries}
getDatums={getDatums}
getPrimary={getPrimary}
getSecondary={getSecondary}
/>
</div>
)
}
Multiple series are often useless without labels. By default, React Charts looks for the label value on the series object you pass it. If not found, it will simply label your series as Series [n], where [n] is the zero-based index of the series, plus 1.
If the default label accessor doesn't suit your needs, then you can use the <Chart> component's getLabel accessor prop:
function MyChart() {
const data = React.useMemo(
() => [
{
specialLabel: 'Hello World!',
data: [
//...
]
}
],
[]
)
const getLabel = React.useCallback(series => series.specialLabel, [])
return (
<div
style={{
width: '400px',
height: '300px'
}}
>
<Chart data={data} getLabel={getLabel} />
</div>
)
}
React Charts supports an axes prop that handles both the underlying scale and visual rendering. These axes can be combined and configured to plot data in many ways. 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.ordinal - A banded axis commonly used to plot categories or ordinal information. Works well as the primary axis for bar charts.time - A continuous axis used for plotting localized times and dates on an evenly distributed scale. Works well as a primary axis.utc - Similar to the time scale, but supports UTC datetimes instead of localized datetimes. 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
pie - A standalone numerical axis used for plotting arc lengths on a pie chart. Use this as the only axis when plotting a Pie chart. -->Axes are a required component of a React Chart and can used like so:
import { Chart } from 'react-charts'
function MyChart() {
const axes = React.useMemo(
() => [
{ primary: true, type: 'time', position: 'bottom' },
{ type: 'linear', position: 'left' }
],
[]
)
return (
<div
style={{
width: '400px',
height: '300px'
}}
>
<Chart axes={axes} />
</div>
)
}
For more information on usage and API, see the axes prop
lineareabarbubblepieExample
function MyChart() {
const series = React.useMemo(() => ({ curve: 'cardinal' }), [])
return <Chart series={series} />
}
<Chart /> Props
getLabel - A memoized function that returns the series labelgetSeriesID - A memoized function that returns the series IDgetDatums - A memoized function that returns the series' datums arraygetPrimary - A memoized function that returns the datum's primary valuegetSecondary - A memoized function that returns the datum's secondary valuegetR - A memoized function that returns the datum's radius value (where applicable)series({} or function) - A memoized object (or function that returns an object) of series options that correspond to all or each of the series in the dataset.
type - string - The series type (Line, Bar, Bubble, Area, etc)
showPoints - bool - If true, will show points for datums where applicable
showOrphans - bool - If true, will show orphan datums where applicable
curve - func - The curve function to use for this series where applicable (see Curve Types)axes[] - An array of memoized axes
axis{} - An axis object
primary bool - Denotes whether this axis is the primary axistype oneOf, required - The type of scale for this axis
axisTypeOrdinalaxisTypeTimeaxisTypeUtcaxisTypeLinearaxisTypeLogposition oneOf, required - The cartesian position of this axis
positionToppositionRightpositionBottompositionLeftinvert bool - Whether this axis's scale should be invertedprimaryAxisID string - If multiple secondary axes are used, which primary axis ID does this axis refer to?min number - The suggested minimum for this axismax number - The suggested maximum for this axishardMin number - The hard/forced minimum for this axishardMax number - The hard/forced maximum for this axisbase number - The base value for this axis. Defaults to 0ticks function - The function used to generate ticks for the axisformat func - The function used to format values on this axis for displaytickValues any - The optional override for the tick values of the axistickSizeInner number - The size of inner tick lines for the axistickSizeOuter number - The size of the outer tick lines for the axistickPadding number - The padding amount between tick labelsmaxLabelRotation number - The max label rotation angle in degrees. Defaults to 50innerPadding number - The inner padding for the axisouterPadding number - The outer padding for the axisshowGrid bool - Whether or not the axis grid lines should be visibleshowTicks bool - Whether or not the tick and tick labels should be visibleshow bool - Whether or not the axis and scale are visiblestacked bool - If true, will use stacked modeid any - An optional ID to identify this axisprimaryCursor{} - An object of options for the primary cursor. If falsey, the cursor is disabled
render - func - The render function for this cursor. Returns JSXsnap - bool - If true, the cursor will snap to nearest values on the axisshowLine - bool - If true, will show the grid line for this cursorshowLabel - bool - If true, will show the label for this cursoraxisID - any - The ID of the axis that this cursor corresponds toonChange - func - When the cursor is updated, this function will be called with relevant informationtooltip{}
align - **
alignPriority**- arrayOf(alignPropType),padding- number,tooltipArrowPadding- number,anchor- oneOf([anchorPointer,anchorClosest,anchorCenter,anchorTop,anchorBottom,anchorLeft,anchorRight,anchorGridTop,anchorGridBottom,anchorGridLeft,anchorGridRight]),render- func.required,onChange - funcAll series types that support lines or curves can be configured to use any curve function from d3-shape by passing one of the following strings as the curve prop to a series component. You may also pass your own curve function directly from d3 or if you're feeling powerful, even create your own!
Note the following string correspond to their respective d3 curve functions but with the curve prefix removed.
basisClosedbasisOpenbasisbundlecardinalClosedcardinalOpencardinalcatmullRomClosedcatmullRomOpencatmullRomlinearClosedlinearmonotoneX (default)monotoneYnaturalstepstepAfterstepBeforeFAQs
Charts for React
The npm package react-charts receives a total of 17,968 weekly downloads. As such, react-charts popularity was classified as popular.
We found that react-charts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.