React 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

Why

I always felt frustrated with the libraries out there which aim to implement this simple visualization. Many would lack basic features (such as adding multi lines or changing line colors) or would be extremely low-level (think d3). Built on top of d3, react-linechart provides necessary customization without losing simplicity.

Installation

``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 (



);
}
}
`

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