LineChart

A component to draw line charts.

Usage

import { LineChart } from '@aragon/ui'

function App() {
  return (
    <LineChart
      lines={[values]}
      springConfig={{ mass: 1, tension: 120, friction: 80 }}
      label={index => labels[index]}
      height={90}
      color={() => `#21aae7`}
    />
  )
}

Demonstration

Props

springConfig

This prop will define the motion of the chart.

TYPE	DEFAULT VALUE
Spring	springs.lazy

spring Presets

There are presets to use for springConfig with different combinations of mass, tension and friction. More information can be found here. See the following example to see how to use them.

• Presets: springs.lazy, springs.smooth, springs.swift, springs.instant

Example:

import { LineChart, springs } from '@aragon/ui'

function App() {
  return <LineChart values={[0.2, 0.3, 0.2]} springConfig={spring.slow} />
}

total

TYPE	DEFAULT VALUE
Number	-1

The expected total (x axis of the chart). When not provided, the length of values is used instead.

width

TYPE	DEFAULT VALUE
Number	None

The width of the chart. When not set, the SVG takes the width of its parent.

height

TYPE	DEFAULT VALUE
Number	200

• Type: Number

• Default: 200

The height of the chart.

dotRadius

TYPE	DEFAULT VALUE
Number	7 / 2

The radius of every dot in the chart.

animDelay

TYPE	DEFAULT VALUE
Number	500

The delay before displaying the chart the first time it gets rendered.

borderColor

TYPE	DEFAULT VALUE
String	rgba(209, 209, 209, 0.5)

The border color.

labelColor

TYPE	DEFAULT VALUE
String	#6d777b

The label color.

reset

TYPE	DEFAULT VALUE
Boolean	false

Can be used to restart the transition. Set to true, then to false again.

lines

Pass the values that will be used to draw the lines. The color atribute in Subtypes overrides the color prop.

TYPE	SUBTYPES	DEFAULT VALUE
Array of Subtypes	id(Number), values(Array of Numbers from 0 to 1 - Required), color(String) or values(Array of Numbers from 0 to 1 - Required)	[]

label

TYPE
Function or null

Example:

<LineChart label={index => ((index % 26) + 10).toString(36)} />

This function gets called to render a label on the x axis.

color

TYPE
Function

Example:

<LineChart
  color={(index, { lines }) => {
    return `hsl(${(index * (360 / lines.length) + 40) % 360}, 60%, 70%)`
  }}
/>

This function gets called to render the color of a line.