Graph

Graphs provide visual presentation for data.

Examples

Curve graph

Line graph

Bar graph

Pie graph

import React from 'react';
import ReactDOM from 'react-dom';
import { Graph } from 'furl-components';

ReactDOM.render(
  <Graph 
    width={300} 
    height={260} 
    type='line' 
    data={[1, 2, 3, 1, 1, 2, 1, 2, 4, 1, 2]} 
    withCaption 
    alt='Line graph'
  />, 
  document.getElementById('root')
);

API

Graph props
Property	Description	Type	Default
data	graph data source	array(number)
type	graph type	string	'curve'
max	scale maximum value	string/number	'auto'
min	scale minimum value	string/number	0
displayPoints	display data points	boolean	true
alt	graph alternate text	string	'A graph'
withCaption	render captioned figure	boolean	false
width	graph with	int/string	400
height	graph height	int/string	300

Notes

data only accepts an array of numeric values.
type can be one of the following: 'curve', 'line', 'bar' or 'pie'.
min and max accept any numeric value as well as 'auto'.
displayDataPoints only applies to type equal to 'curve' or 'line' and will display the data points on top of the graph curve or line.
It is highly recommended you specify a descriptive value for alt to make your graph accessible to screen-readers. This is why we already provide a default value instead of using an empty string or undefined.
If you provide withCaption, the component will render a <figure> and a <figcaption> accompanying the <canvas> element. The value of alt will be used for the <figcaption>.
width and height accept any valid CSS value, including CSS variables.