alexdesign1 / chartify

React.js plugin for building animated draggable and customizable charts

Chartify

React.js plugin for building animated draggable and customizable charts.

The source for this module is in the main repo. Please contribute.

Check the EXAMPLE

Install

npm install chartify

Getting started

import Chartify from 'chartify';

let data = [{
	x_value: '20.11.2016',
	y_value: 5,				
	title: '007 Spectre'	
}];

let config = {
	theme: 'blue',	
	width: 50,			      
	height: 10,			
	box_size: 20,	
	box_radius: 8,	
	line: false,	
	line_only: false,
	bordered: false,
	blink: false	
};

<Chartify data={data} container="films-container" config={config} />

Data

Dataset should be an array of objects [{ x_value: '12.03.2016', y_value: 8, title: 'men in black' }]. Keys are required and types are { x_value: string, y_value: number, title: string }.

Config

theme:string - is color scheme of the chart, "default", "blue", "grey", "white" etc.
width:number - is the length of the data array by X-axis.
height:number - is the length of the data by Y-axis.
box_size:number - is size of each box in pixels.
box_radius:number - is border radius of each box in pixels.
line:boolean - is param that determines if this is a line-chart.
line_only:boolean - is param that determines if we show only line on white background.
bordered:boolean - is param that determines if each box has white borders.
blink:boolean - is param that determines if the chart is blinking.

Container

Class that will be added to the chart container element. This is important in case you have more than one chart on your page.

Heavily inspired by kinopoisk.ru chart written using Adobe Flash.

License

The MIT License (MIT) Copyright (c) 2017
Author: Kirill Stepkin