Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ankane/react-chartkick
Create beautiful JavaScript charts with one line of React
https://github.com/ankane/react-chartkick
Last synced: 19 days ago
JSON representation
Create beautiful JavaScript charts with one line of React
- Host: GitHub
- URL: https://github.com/ankane/react-chartkick
- Owner: ankane
- License: mit
- Created: 2016-08-22T02:41:54.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-29T02:55:07.000Z (10 months ago)
- Last Synced: 2024-05-17T03:43:46.615Z (6 months ago)
- Language: JavaScript
- Homepage: https://chartkick.com/react
- Size: 93.8 KB
- Stars: 1,195
- Watchers: 16
- Forks: 58
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Chartkick
Create beautiful JavaScript charts with one line of React
[See it in action](https://www.chartkick.com/react)
Supports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)
[](https://github.com/ankane/react-chartkick/actions)
## Quick Start
Run
```sh
npm install react-chartkick chart.js
```
And add
```javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/chart.js'
```
This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
## Charts
Line chart
```jsx
```
Pie chart
```jsx
```
Column chart
```jsx
```
Bar chart
```jsx
```
Area chart
```jsx
```
Scatter chart
```jsx
```
Geo chart - *Google Charts*
```jsx
```
Timeline - *Google Charts*
```jsx
```
Multiple series
```javascript
data = [
{name: "Workout", data: {"2021-01-01": 3, "2021-01-02": 4}},
{name: "Call parents", data: {"2021-01-01": 5, "2021-01-02": 3}}
];
```
and
```jsx
```
## Data
Data can be an array, object, callback, or URL.
#### Array
```jsx
```
#### Object
```jsx
```
#### Callback
```javascript
function fetchData(success, fail) {
success({"2021-01-01": 2, "2021-01-02": 3})
// or fail("Data not available")
}
```
and
```jsx
```
#### URL
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
```jsx
```
## Options
Id, width, and height
```jsx
```
Min and max values
```jsx
```
`min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.
Min and max for x-axis - *Chart.js*
```jsx
```
Colors
```jsx
```
Stacked columns or bars
```jsx
```
Discrete axis
```jsx
```
Label (for single series)
```jsx
```
Axis titles
```jsx
```
Straight lines between points instead of a curve
```jsx
```
Show or hide legend
```jsx
```
Specify legend position
```jsx
```
Donut chart
```jsx
```
Prefix, useful for currency - *Chart.js, Highcharts*
```jsx
```
Suffix, useful for percentages - *Chart.js, Highcharts*
```jsx
```
Set a thousands separator - *Chart.js, Highcharts*
```jsx
```
Set a decimal separator - *Chart.js, Highcharts*
```jsx
```
Set significant digits - *Chart.js, Highcharts*
```jsx
```
Set rounding - *Chart.js, Highcharts*
```jsx
```
Show insignificant zeros, useful for currency - *Chart.js, Highcharts*
```jsx
```
Friendly byte sizes - *Chart.js*
```jsx
```
Specify the message when the chart is loading
```jsx
```
Specify the message when data is empty
```jsx
```
Refresh data from a remote source every `n` seconds
```jsx
```
You can pass options directly to the charting library with:
```jsx
```
See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), [Highcharts](https://api.highcharts.com/highcharts), and [Chart.js](https://www.chartjs.org/docs/) for more info.
To customize datasets in Chart.js, use:
```jsx
```
You can pass this option to individual series as well.
### Global Options
To set options for all of your charts, use:
```javascript
Chartkick.options = {
colors: ["#b00", "#666"]
}
```
### Multiple Series
You can pass a few options with a series:
- `name`
- `data`
- `color`
- `dataset` - *Chart.js only*
- `points` - *Chart.js only*
- `curve` - *Chart.js only*
### Download Charts
*Chart.js only*
Give users the ability to download charts. It all happens in the browser - no server-side code needed.
```jsx
```
Set the filename
```jsx
```
**Note:** Safari will open the image in a new window instead of downloading.
Set the background color
```jsx
```
## Installation
### Chart.js
Run
```sh
npm install react-chartkick chart.js
```
And add
```javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/chart.js'
```
### Google Charts
Run
```sh
npm install react-chartkick
```
And add
```javascript
import Chartkick, { LineChart, PieChart } from 'react-chartkick'
```
And include on the page
```html
```
To specify a language or Google Maps API key, use:
```js
Chartkick.configure({language: "de", mapsApiKey: "..."})
```
### Highcharts
Run
```sh
npm install react-chartkick highcharts
```
And add
```javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/highcharts'
```
### No Package Manager
Include the charting library and the Chartkick library
```html
```
Charts are prefixed with `ReactChartkick`, like `ReactChartkick.LineChart`.
### Multiple Libraries
If more than one charting library is loaded, choose between them with:
```jsx
```
Options are `google`, `highcharts`, and `chartjs`
## History
View the [changelog](https://github.com/ankane/react-chartkick/blob/master/CHANGELOG.md)
## Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- [Report bugs](https://github.com/ankane/react-chartkick/issues)
- Fix bugs and [submit pull requests](https://github.com/ankane/react-chartkick/pulls)
- Write, clarify, or fix documentation
- Suggest or add new features
To get started with development, run:
```sh
git clone https://github.com/ankane/react-chartkick.git
cd react-chartkick
npm install
npm run build
```