React Chartkick

Create beautiful JavaScript charts with one line of React

See it in action

Supports Chart.js, Google Charts, and Highcharts


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.

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: {"2025-01-01": 3, "2025-01-02": 4}},
{name: "Call parents", data: {"2025-01-01": 5, "2025-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({"2025-01-01": 2, "2025-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, Highcharts, and Chart.js for more info.

To customize datasets in Chart.js, use:

`jsx

`

You can pass this option to individual series as well.

$3

To set options for all of your charts, use:

`javascript
Chartkick.options = {
colors: ["#b00", "#666"]
}
`

$3

You can pass a few options with a series:

- name
- data
- color
- dataset - Chart.js only
- points - Chart.js only
- curve - Chart.js only

$3

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

$3

Run

`sh
npm install react-chartkick chart.js
`

And add

`javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/chart.js'
`

$3

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: "..."})
`

$3

Run

`sh
npm install react-chartkick highcharts
`

And add

`javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/highcharts'
`

$3

Include the charting library and the Chartkick library

`html




`

Charts are prefixed with ReactChartkick, like ReactChartkick.LineChart.

$3

If more than one charting library is loaded, choose between them with:

`jsx

`

Options are google, highcharts, and chartjs

History

View the changelog

Contributing

Everyone is encouraged to help improve this project. Here are a few ways you can help:

- Report bugs
- Fix bugs and submit pull requests
- 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
``