Highly customizable line chart with React
npm install react-linechartReact Linechart
===============
Highly customizable line charts using React! Check the Live Demo and follow along the tutorial.
1. Why
2. Installation
3. Usage
4. Properties Table
5. Tooltips
6. Derived Charts
7. Parsers
8. isDate
9. Improvements
react-linechart provides necessary customization without losing simplicity.javascript
npm install react-linechart --save
`Usage
Add Line Charts with minimum configuration:
`javascript
import React, { Component } from 'react';
import LineChart from 'react-linechart';
import '../node_modules/react-linechart/dist/styles.css';export default class App extends Component {
render() {
const data = [
{
color: "steelblue",
points: [{x: 1, y: 2}, {x: 3, y: 5}, {x: 7, y: -3}]
}
];
return (
My First LineChart
width={600}
height={400}
data={data}
/>
);
}
}
`This component is an attempt to simplify the rendering of a basic Line Chart by exposing many props that are commonly used. I realize it is very hard to encompass every use case, so I put an effort in making this especially pleasant to work with continuous values of numbers and dates.
The only mandatory prop is
data - an array of objects describing the lines that will be rendered on screen. The typical line object follows this structure:`javascript
{
id,
name,
color,
points: [ { x, y } ]
}
`Where
id is an identificator for the line, name is a name for the line, color is a color for the line and points are an array of { x, y } objects representing the data. It would be particularly annoying if we need to parse our data to this format, so I provided a handful of parser functions that hopefully will meet most data formats commonly out there.Properties Table
Property | Type | Default | Description
--- | --- | --- | ---
id |
String | none | Unique ID for the visualization
data | Array