LineChart
A component to draw line charts.
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`}
/>
)
}

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
import { LineChart, springs } from '@aragon/ui'
function App() {
return <LineChart values={[0.2, 0.3, 0.2]} springConfig={spring.slow} />
}
TYPE | DEFAULT VALUE |
---|---|
Number | -1 |
The expected total (x axis of the chart). When not provided, the length of
values
is used instead.TYPE | DEFAULT VALUE |
---|---|
Number | None |
The width of the chart. When not set, the SVG takes the width of its parent.
TYPE | DEFAULT VALUE |
---|---|
Number | 200 |
- Type:
Number
- Default:
200
The height of the chart.
TYPE | DEFAULT VALUE |
---|---|
Number | 7 / 2 |
The radius of every dot in the chart.
TYPE | DEFAULT VALUE |
---|---|
Number | 500 |
The delay before displaying the chart the first time it gets rendered.
TYPE | DEFAULT VALUE |
---|---|
String | rgba(209, 209, 209, 0.5) |
The border color.
TYPE | DEFAULT VALUE |
---|---|
String | #6d777b |
The label color.
TYPE | DEFAULT VALUE |
---|---|
Boolean | false |
Can be used to restart the transition. Set to
true
, then to false
again.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) | [] |
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.
TYPE |
---|
Function |
<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.
Last modified 6mo ago