reactjs-charts
v1.1.0
Published
<div align=center> <h1>ReactJS with Chart.js</h1> <p>Use Chart.js as a React Component<p> </div>
Downloads
5
Readme
A library of React components created using create-react-app
npm install reactjs-charts
How it Works
Chart.js is a open source library to render charts in HTML canvas. Therefore each React Component returns a canvas with its chart rendered. It uses useEffect
React Hook to listen to props for automatic changes and manage its life cycle. So when a change happens, the old chart will be deleted a new will be created with the changed props.
Documentation
| Charts | Props |
|--|--|
| LineChart | label [String], labels [Array], data [Array], line [Boolean, default is true], backgroundColor [Array or String for unique color], borderColor [String]
|
| ScatterChart | label [String], data [Array with Objects. Ex: { x: 10, y: 5 }], line [Boolean, default is false], backgroundColor [String], borderColor [String]
|
| RadarChart | label [String], labels [Array], data [Array], backgroundColor [Array or String for unique color], borderColor [String]
|
| BarChart | label [String], labels [Array], data [Array], backgroundColor [Array or String for unique color]
|
| PolarArea | label [String], labels [Array], data [Array], backgroundColor [Array or String for unique color], borderColor [Array or String fro a unique color]
|
| DoughnutChart | label [String], labels [Array], data [Array], backgroundColor [Array or String for unique color] borderColor [Array or String fro a unique color]
|
import React, { useState } from 'react'
import { ScatterChart } from 'reactjs-charts'
export default function Example() {
const [ data, setData ] = useState([
{ x: Math.random() * 10, y: Math.random() * 10 },
{ x: Math.random() * 10, y: Math.random() * 10 },
{ x: Math.random() * 10, y: Math.random() * 10 },
])
function InsertNewDatapoints() {
setData(lastState => [...lastState, { x: Math.random() * 10, y: Math.random() * 10 }])
}
return (
<>
<ScatterChart
label="My chart"
data={data}
backgroundColor='tomato'
/>
<button onClick={InsertNewDatapoints}>Change me!</button>
</>
)
}
import React, { useState } from 'react'
import { DoughnutChart } from 'reactjs-charts'
export default function Example() {
const [ data, setData ] = useState([
Math.random() * 10, Math.random() * 10
])
function ChangeDataValue() {
setData([ Math.random() * 10, Math.random() * 10 ])
}
return (
<>
<DoughnutChart
label="My chart",
labels={['January', 'February']}
data={data}
backgroundColor={['tomato', '#c4c4c4']}
/>
<button onClick={ChangeDataValue}>Change me!</button>
</>
)
}