|
| 1 | +### [@coreui/react-chartjs](https://coreui.io/) for [CoreUI for React](https://coreui.io/react/) |
| 2 | + |
| 3 | +[![npm package][npm-badge]][npm] |
| 4 | +[![NPM downloads][npm-download]][npm] |
| 5 | + |
| 6 | +[npm-badge]: https://img.shields.io/npm/v/@coreui/react-chartjs/latest?style=flat-square |
| 7 | +[npm]: https://www.npmjs.com/package/@coreui/react-chartjs |
| 8 | +[npm-download]: https://img.shields.io/npm/dm/@coreui/react-chartjs.svg?style=flat-square |
| 9 | + |
| 10 | +##### install: |
| 11 | +```bash |
| 12 | +npm install @coreui/react |
| 13 | +npm install @coreui/react-chartjs |
| 14 | +``` |
| 15 | + |
| 16 | +##### import: |
| 17 | +```jsx |
| 18 | +import { CCharts } from '@coreui/react-chartjs'; |
| 19 | +``` |
| 20 | + |
| 21 | +##### usage: |
| 22 | +```jsx |
| 23 | +... |
| 24 | +class CoreUICharts extends Component { |
| 25 | +... |
| 26 | +render() { |
| 27 | + return ( |
| 28 | + <CCharts |
| 29 | + type="radar" |
| 30 | + datasets={[ |
| 31 | + { |
| 32 | + label: '2019', |
| 33 | + backgroundColor: 'rgba(179,181,198,0.2)', |
| 34 | + borderColor: 'rgba(179,181,198,1)', |
| 35 | + pointBackgroundColor: 'rgba(179,181,198,1)', |
| 36 | + pointBorderColor: '#fff', |
| 37 | + pointHoverBackgroundColor: '#fff', |
| 38 | + pointHoverBorderColor: 'rgba(179,181,198,1)', |
| 39 | + tooltipLabelColor: 'rgba(179,181,198,1)', |
| 40 | + data: [65, 59, 90, 81, 56, 55, 40] |
| 41 | + }, |
| 42 | + { |
| 43 | + label: '2020', |
| 44 | + backgroundColor: 'rgba(255,99,132,0.2)', |
| 45 | + borderColor: 'rgba(255,99,132,1)', |
| 46 | + pointBackgroundColor: 'rgba(255,99,132,1)', |
| 47 | + pointBorderColor: '#fff', |
| 48 | + pointHoverBackgroundColor: '#fff', |
| 49 | + pointHoverBorderColor: 'rgba(255,99,132,1)', |
| 50 | + tooltipLabelColor: 'rgba(255,99,132,1)', |
| 51 | + data: [28, 48, 40, 19, 96, 27, 100] |
| 52 | + } |
| 53 | + ]} |
| 54 | + options={{ |
| 55 | + aspectRatio: 1.5, |
| 56 | + tooltips: { |
| 57 | + enabled: true |
| 58 | + } |
| 59 | + }} |
| 60 | + labels={[ |
| 61 | + 'Eating', 'Drinking', 'Sleeping', 'Designing', |
| 62 | + 'Coding', 'Cycling', 'Running' |
| 63 | + ]} |
| 64 | + /> |
| 65 | + ) |
| 66 | +} |
| 67 | +... |
| 68 | +``` |
| 69 | +
|
| 70 | +--- |
| 71 | +
|
| 72 | +- bootstrapped with [nwb](https://github.com/insin/nwb) toolkit |
| 73 | +
|
| 74 | +##### `npm run` scripts |
| 75 | +
|
| 76 | +`package.json` is configured with `"scripts"` we can use with `npm run` while developing the project. |
| 77 | +
|
| 78 | +Command | Description | |
| 79 | +--- | --- |
| 80 | +`npm start` | start a development server for the demo app |
| 81 | +`npm test` | run tests |
| 82 | +`npm run test:coverage` | run tests and produce a code coverage report in `coverage/` |
| 83 | +`npm run test:watch` | start a test server and re-run tests on every change |
| 84 | +`npm run build` | prepare for publishing to npm |
| 85 | +`npm run clean` | delete built resources |
| 86 | +
|
| 87 | +#### see also: |
| 88 | +- [Developing React Components and Libraries with nwb](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb) |
0 commit comments