LineChart

Search…

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.

CircleGraph

Distribution

Last modified 2mo ago

Copy link

On this page

Usage

Demonstration

Props

Usage

Demonstration

Props

`springConfig`

Example:

`total`

`width`

`height`

`dotRadius`

`animDelay`

`borderColor`

`labelColor`

`reset`

`lines`

`label`

`color`

Example: