React Linechart =============== Highly customizable line charts using React! Check the [Live Demo](http://rafaelquintanilha.com/apps/linechart/) and follow along the [tutorial](http://rafaelquintanilha.com/introducing-react-line-chart/). 1. [Why](#why) 2. [Installation](#installation) 3. [Usage](#usage) 4. [Properties Table](#properties-table) 5. [Tooltips](#tooltips) 6. [Derived Charts](#derived-charts) 7. [Parsers](#parsers) 8. [isDate](#isdate) 9. [Improvements](#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 (

My First LineChart

); } } ``` 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](#parsers) 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

	Stars	Issues	Version	Updated	Created
react-annotation	393	33	2.2.1	5 years ago	7 years ago
react-linechart	24	9	1.1.12	7 years ago	8 years ago
react-lineto	228	23	3.3.0	3 years ago	7 years ago
recharts	22,736	493	2.12.6	12 days ago	9 years ago

react-annotation vs react-linechart vs react-lineto vs recharts

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past