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

npm install react-chartkick chart.js

And add

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

<LineChart data={{"2021-01-01": 11, "2021-01-02": 6}} />

Pie chart

<PieChart data={[["Blueberry", 44], ["Strawberry", 23]]} />

Column chart

<ColumnChart data={[["Sun", 32], ["Mon", 46], ["Tue", 28]]} />

Bar chart

<BarChart data={[["Work", 32], ["Play", 1492]]} />

Area chart

<AreaChart data={{"2021-01-01": 11, "2021-01-02": 6}} />

Scatter chart

<ScatterChart data={[[174.0, 80.0], [176.5, 82.3]]} xtitle="Size" ytitle="Population" />

Geo chart - Google Charts

<GeoChart data={[["United States", 44], ["Germany", 23], ["Brazil", 22]]} />

Timeline - Google Charts

<Timeline data={[["Washington", "1789-04-29", "1797-03-03"], ["Adams", "1797-03-03", "1801-03-03"]]} />

Multiple series

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

<LineChart data={data} />

Data

Data can be an array, object, callback, or URL.

Array

<LineChart data={[["2021-01-01", 2], ["2021-01-02", 3]]} />

Object

<LineChart data={{"2021-01-01": 2, "2021-01-02": 3}} />

Callback

function fetchData(success, fail) {
  success({"2021-01-01": 2, "2021-01-02": 3})
  // or fail("Data not available")
}

and

<LineChart data={fetchData} />

URL

Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

<LineChart data="/stocks" />

Options

Id, width, and height

<LineChart id="users-chart" width="800px" height="500px" />

Min and max values

<LineChart min={1000} max={5000} />

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

<LineChart xmin="2021-01-01" xmax="2022-01-01" />

Colors

<LineChart colors={["#b00", "#666"]} />

Stacked columns or bars

<ColumnChart stacked={true} />

Discrete axis

<LineChart discrete={true} />

Label (for single series)

<LineChart label="Value" />

Axis titles

<LineChart xtitle="Time" ytitle="Population" />

Straight lines between points instead of a curve

<LineChart curve={false} />

Show or hide legend

<LineChart legend={true} />

Specify legend position

<LineChart legend="bottom" />

Donut chart

<PieChart donut={true} />

Prefix, useful for currency - Chart.js, Highcharts

<LineChart prefix="$" />

Suffix, useful for percentages - Chart.js, Highcharts

<LineChart suffix="%" />

Set a thousands separator - Chart.js, Highcharts

<LineChart thousands="," />

Set a decimal separator - Chart.js, Highcharts

<LineChart decimal="," />

Set significant digits - Chart.js, Highcharts

<LineChart precision={3} />

Set rounding - Chart.js, Highcharts

<LineChart round={2} />

Show insignificant zeros, useful for currency - Chart.js, Highcharts

<LineChart round={2} zeros={true} />

Friendly byte sizes - Chart.js

<LineChart bytes={true} />

Specify the message when the chart is loading

<LineChart loading="Loading..." />

Specify the message when data is empty

<LineChart empty="No data" />

Refresh data from a remote source every n seconds

<LineChart refresh={60} />

You can pass options directly to the charting library with:

<LineChart library={{backgroundColor: "#eee"}} />

See the documentation for Google Charts, Highcharts, and Chart.js for more info.

To customize datasets in Chart.js, use:

<LineChart dataset={{borderWidth: 10}} />

You can pass this option to individual series as well.

Global Options

To set options for all of your charts, use:

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.

<LineChart download={true} />

Set the filename

<LineChart download="boom" />

Note: Safari will open the image in a new window instead of downloading.

Set the background color

<LineChart download={{background: "#fff"}} />

Installation

Chart.js

Run

npm install react-chartkick chart.js

And add

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

Google Charts

Run

npm install react-chartkick

And add

import Chartkick, { LineChart, PieChart } from 'react-chartkick'

And include on the page

<script src="https://www.gstatic.com/charts/loader.js"></script>

To specify a language or Google Maps API key, use:

Chartkick.configure({language: "de", mapsApiKey: "..."})

Highcharts

Run

npm install react-chartkick highcharts

And add

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

No Package Manager

Include the charting library and the Chartkick library

<script src="https://unpkg.com/[email protected]/dist/chart.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/chartjs-adapter-date-fns.bundle.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>

Charts are prefixed with ReactChartkick, like ReactChartkick.LineChart.

Multiple Libraries

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

<LineChart adapter="google" />

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:

git clone https://github.com/ankane/react-chartkick.git
cd react-chartkick
npm install
npm run build