react-chart-js/README.md

74 lines
1.9 KiB
Markdown
Raw Permalink Normal View History

2020-10-15 09:05:56 +07:00
# React Chart.js Component
**Install**
Using NPM
```shell
2020-10-15 12:19:10 +07:00
npm install @cubetiq/react-chart-js
2020-10-15 09:05:56 +07:00
```
OR using Yarn
```shell
yarn add @cubetiq/react-chart-js
```
2020-10-15 12:21:03 +07:00
### View a [Demo](https://cubetiq.github.io/chartjs-demos)
2020-10-15 09:48:32 +07:00
### Line Chart Example
```typescript
import React from 'react';
import { ReactChartJs } from '@cubetiq/react-chart-js';
function LineChartExample(props) {
return (
<ReactChartJs
chartConfig={{
type: 'line',
options: {
responsive: true,
title: {
display: true,
text: 'Monthly Payments',
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true,
},
},
data: {
datasets: [
{
label: 'Part-time',
data: [5, 10, 30],
fill: false,
borderColor: '#ff6384',
},
{
label: 'Full-time',
data: [10, 15, 45],
fill: false,
borderColor: '#36a2eb',
},
],
labels: ['Jan', 'Feb', 'Mar'],
},
}}
/>
);
}
export default LineChartExample;
```
2020-10-15 09:05:56 +07:00
### Contributors
Project's repository: [React Countdown](https://git.cubetiqs.com/CUBETIQ/react-chart-js.git)
- [@s.long](https://git.cubetiqs.com/s.long)
- [@sombochea](https://git.cubetiqs.com/sombochea)
- [@cubetiq](https://git.cubetiqs.com/CUBETIQ)