react-redux-chart

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)