Chartify - simple and lightweight charts for React.js
Simple and lightweight React.js plugin for building charts. Bar chart, calendar view visualisation. Diagram, graph, pyramid visualisation of large datasets. Showreel. The source for this module is in the main repo. Please create issues and pull requests. Check angular-scale if you're using Angular.js. And jquery-linechart if you're using JQuery.
| Library | Size minified |
|---|---|
| Chartify | 19kb |
| D3.js | 116kb |
| Highcharts | 45kb |
Install
npm install chartify
Use
import Chartify from 'chartify';Options
<Chartify data = {this.items}
width = {50}
height = {10}
boxSize = {16}
line = {true}
theme = {"purple"} />- data is an array of objects [{value: 0}, ... , {value: 10}]. This is the dataset of the chart.
- width is the horizontal length of the data array. If width param is less than the length of the data array then user will see the last values of the data array.
- height is the vertical length.
- box-size is size of each box in pixels.
- line is param that determines if this is a line-chart.
- theme is color scheme of the chart.
Please check the DEMO and the example folder to see how it's going on practice.
Themes
- default
- purple
- grey
Inspired by kinopoisk.ru chart written using Adobe Flash. Feel free for contribute.
Contributing
Looking for co-maintainers.
License
The MIT License (MIT) Copyright (c) 2016 Kirill Stepkin