react-redux-chart v0.0.5

Simple chart for react-redux developing.

Just call the component:

import Chart from 'react-redux-chart'

const MyComponent = ( { data } ) => (
	<div className="myComponent">
		<div className="chart">
			<Chart data={data} />
		</div>
	</div>
)

MyComponent.propTypes = {
	data: PropTypes.object.isRequired
}

####Data structure

Data passed to component has the following structure:

let data = {
	//title
	title : "react-redux-chart",
	//x-axis labels*
	xAxisValues : ["Jan", "Feb", "Mar"],
	//number of y-axis steps
	yAxisPoints : 4,
	//show grid		
	showGrid : true,
	//show circle points
	showPoints : true,
	//show circle points
	showOuterPoints : true,
	//show lines between points
	showLines : true,
	//show chart title
	showTitle : true,
	//show chart info
	showInfo : true,
	//hover on/off
	showHover : true,
	//allow filtering of lines
	allowFilters : true,
	//values of chart*
	values : {
		'dataset1' : [1, 2, 2],
		'dataset2' : [2, 5, -5]
	},
	//chart dimensions
	chartDimensions : {
		//all values are in percentage
		//start of x-axis
		xAxisMinimum : 10,
		//end of x-axis
		xAxisMaximum : 95,
		//start of y-axis
		yAxisMinimum : 5,
		//end of x-axis
		yAxisMaximum : 90,
		//gap of text of x-axis from x-axis line
		xAxisTextGap : 2,
		//gap of text of y-axis from y-axis line
		yAxisTextGap : 3
	},
	//chart style
	chartStyle : {
		gridColor : "#ccc",
		xAxisTextColor : "#242428",
		yAxisTextColor : "#242428",
		xAxisTextSize : "10",
		yAxisTextSize : "10",
		colors : ["#e74c3c", "#3498db", "#2ecc71", "#e67e22", "#9b59b6"]
	}
}

####Default values and restrictions

All the keys have the default values as shown above except:

xAxisValues: These are the values of the x-axis. It has to be an array.

values: These are the data of the chart. It has to be an object of arrays.

xAxisValues array and each dataset array of the values object must have the same length

chartStyle.colors should have one color for each dataset of the chart. If not the default would be #ccc for all the additionals

####Mandatory fields

Only 2 fields are mandatory

xAxisValues and values

	let data = {
		xAxisValues : ["Jan", "Feb", "Mar"],
		values : {
			'my dataset 1' : [1, 2, 2],
			'my dataset 2' : [2, 5, -5],
			'my dataset 3' : [3, 2, 21]
		}
	}

####Additional info

The chart takes the full width and height of the div that it will be placed in. It uses 3 divs:

• The title div at the top (can be hidden) | (40px height)
• The chart div
• The info div at the bottom (can be hidden) | (40px height)