AragonAN DAO
Search…
⌃K
Links

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.
Previous
CircleGraph
Next
Distribution
Last modified 6mo ago