React Chartkick
Create beautiful JavaScript charts with one line of React
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={{"2025-01-01": 11, "2025-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={{"2025-01-01": 11, "2025-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: {"2025-01-01": 3, "2025-01-02": 4}},
{name: "Call parents", data: {"2025-01-01": 5, "2025-01-02": 3}}
];
and
<LineChart data={data} />
Data
Data can be an array, object, callback, or URL.
Array
<LineChart data={[["2025-01-01", 2], ["2025-01-02", 3]]} />
Object
<LineChart data={{"2025-01-01": 2, "2025-01-02": 3}} />
Callback
function fetchData(success, fail) {
success({"2025-01-01": 2, "2025-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="2025-01-01" xmax="2025-02-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 onlypoints
- Chart.js onlycurve
- 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/chart.js@4.4.6/dist/chart.umd.js"></script>
<script src="https://unpkg.com/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
<script src="https://unpkg.com/chartkick@5.0.1"></script>
<script src="https://unpkg.com/react-chartkick@0.5.4"></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