mk-react-graph

Create Wonderfull, lightweight, and responsive graph with react.

How to install

yarn add mk-react-graph

or

npm install --save mk-react-graph

Features

• multilines graph with labels
• custom colors
• canvas HD
• responsive
• mouse hover with data

How to use

import Graph from 'mk-react-graph'
...
render(){
    return (
	    <Graph
          height={220}
	      linesColors={[
	        {
	          border : '#E5C7FF',
	          gradient : {start:'rgba(156, 92, 232, 0.5)',stop:'rgba(110,92,231,0)'}
	        },
	        {
	          border : '#FF9F00',
	          gradient : {start:'rgba(232,151,92,0.5)',stop:'rgba(110,92,231,0)'}
	        }
	      ]}
	      labelsColor="rgba(255, 255, 255, 0.7)"
	      horizontalSegmentColor="rgba(255, 255, 255, 0.09)"
	      horizontalSegmentHoverColor="rgba(255, 255, 255, 0.7)"
          graphs={[
	        {
	          datas : [120, 56, 67, 198],
	          label : "registred",
	          labelColor : "#E5C7FF"
	        },
	        {
	          datas : [61, 38, 91, 111],
	          label : "confirmed",
	          labelColor : "#FF9F00"
	        }
	      ]}
          labels={['12/01', '13/01', '14/01', '15/01']}
          />
    )
}
...