# react-chartkick, one component per chart with the backend left to you
> react-chartkick is a thin React wrapper around Chartkick that turns a data object into a chart component for Chart.js, Google Charts or Highcharts. It handles the rendering and the data plumbing, but it deliberately does not ship a data layer, so where the numbers come from stays your decision.
**ankane/react-chartkick** — Create beautiful JavaScript charts with one line of React
- Repository: https://github.com/ankane/react-chartkick
- Website: https://chartkick.com/react
- Stars: 1,195 · Forks: 45
- Language: JavaScript
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/ankane-react-chartkick
## A React binding over Chartkick, not a charting engine
react-chartkick is one of two layers. The lower layer is Chartkick, the JavaScript library that does the actual chart work, and the upper layer is this package, which exposes that library as React components. The dependency list in package.json makes the split explicit: chartkick at version 4.0.0 or later is the only runtime dependency, while react and react-dom are declared as peer dependencies at a wildcard version, so the host application supplies React and the package never bundles a second copy.
The consequence is that the API surface you learn is Chartkick's, not React Chartkick's. A chart is one component with a data prop, and the chart types map onto familiar names: LineChart, PieChart, ColumnChart, BarChart, AreaChart and ScatterChart, plus GeoChart and Timeline, which the README marks as Google Charts only. The same options are spelled the same way whether they came from this wrapper or from the underlying library, so a page built with Google Charts and a page built with Chart.js can share option names.
The package is small and the build is simple. package.json names the version 0.5.4, marks the package as an ES module with a separate CommonJS entry, and ships only a dist directory. The build script is a single rollup invocation, and the rollup configuration sits at the repository root next to the src and test directories. MIT is the declared licence.
## The data prop accepts four shapes, including a plain URL
The most useful decision in the library is that the data prop is not tied to one format. The README lists four options: an array, an object, a callback, or a URL. That flexibility is what lets the same component sit in a page that loads static fixtures and in a page that polls a live endpoint.
The array and object forms are the ones you will use most, and the difference is only how the label and the value are paired. An object uses the key as the category or date:
```jsx
```
An array pairs label and value positionally, which is also the form the pie and column charts use:
```jsx
```
The callback form is the one that carries error handling, and the shape of the callback is worth noting because it is not a promise. You get a success function and a fail function:
```javascript
function fetchData(success, fail) {
success({"2026-01-01": 2, "2026-01-02": 3})
// or fail("Data not available")
}
```
The URL form is the simplest of all, and the README frames it in terms of page load time rather than functionality. Give each chart its own endpoint and the component fetches it:
```jsx
```
For repeated polling there is a refresh prop in seconds:
```jsx
```
None of this touches a data store, a query builder or a cache. Whatever you use to hold application state stays in charge, and Chartkick only renders what it is handed.
## Installing against Chart.js, Google Charts or Highcharts
The library is deliberately neutral about the underlying charting engine, and the README gives a separate installation path for each. The quickest path is Chart.js, where you install both packages and add an import that pulls in the right adapter:
```sh
npm install react-chartkick chart.js
```
```javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/chart.js'
```
Google Charts works differently, because the engine itself is loaded from a script tag rather than from npm. You install only react-chartkick, import the default export alongside the components, and include the loader on the page:
```javascript
import Chartkick, { LineChart, PieChart } from 'react-chartkick'
```
```html
```
The default export is what carries the configuration, and the README shows it taking a language and a Google Maps API key:
```js
Chartkick.configure({language: "de", mapsApiKey: "..."})
```
Highcharts follows the Chart.js pattern with its own adapter import:
```sh
npm install react-chartkick highcharts
```
```javascript
import { LineChart, PieChart } from 'react-chartkick'
import 'chartkick/highcharts'
```
If more than one engine ends up in the bundle, an adapter prop picks per chart, with the values google, highcharts and chartjs:
```jsx
```
There is also a no-package-manager route that loads four scripts directly from unpkg, including chart.js at version 4.4.6, a date-fns adapter at 3.0.0, chartkick at 5.0.1 and react-chartkick at 0.5.4. In that setup the components are prefixed, so you write ReactChartkick.LineChart instead of LineChart.
## Options are one library's options, and some of them are engine specific
The option list is long enough that it is worth separating into layers. Some options work everywhere: id, width and height, colors, stacked, discrete, label, axis titles, curve, legend, and the loading and empty messages that decide what the user sees before or instead of a chart.
```jsx
```
Then there are options the README labels as belonging to a particular engine, and this is where the abstraction starts to leak. xmin and xmax for the horizontal axis are marked as Chart.js. The number formatting options, meaning prefix, suffix, thousands, decimal, precision, round and zeros, are marked as Chart.js and Highcharts but not Google Charts. The bytes option for friendly byte sizes is marked as Chart.js only, and the download option for saving the chart as an image is Chart.js only as well, where the README notes the work happens in the browser with no server side code, and that Safari opens the image in a new window instead of downloading it.
Two escape hatches keep the wrapper from being a wall. The library prop passes options straight through to the charting engine:
```jsx
```
And the dataset prop customises datasets in Chart.js, including per series:
```jsx
```
Global defaults are set once on the Chartkick object rather than repeated on every component:
```javascript
Chartkick.options = {
colors: ["#b00", "#666"]
}
```
## Multiple series use an array of named data objects
A single series chart takes a flat data structure. Several series take an array of objects, each with a name and its own data, and the README gives the shape as a plain JavaScript assignment:
```javascript
data = [
{name: "Workout", data: {"2026-01-01": 3, "2026-01-02": 4}},
{name: "Call parents", data: {"2026-01-01": 5, "2026-01-02": 3}}
];
```
The same array then goes into the component as before:
```jsx
```
The per series keys are limited, and the README lists them exactly: name, data, color, and then three that are marked as Chart.js only, dataset, points and curve. That list is a useful summary of what the wrapper actually understands, because anything else has to travel through the dataset or library passthrough to reach the engine.
Two of the Chart.js only per series keys are worth a note. points is the mechanism for marking individual data points, and dataset lets one series override what the global options set. Neither of those has an equivalent in the other engines, so a chart that relies on them locks you to Chart.js.
## Where the wrapper stops, and what to reach for instead
The limits of react-chartkick follow from what it is not. It does not fetch from a database, transform records into series, or schedule updates; the URL and callback forms hand you the fetching and the shaping. It does not render server side, since the components mount a client side engine into the DOM, which means a page using it needs client side rendering for those charts. It does not give you the chart instance either, so custom plugins, annotation layers and event handlers have to go through the options passthrough rather than through a chart reference, and how far that passthrough reaches depends on the engine.
The realistic alternative to compare against is the underlying engine used directly. Using an engine directly means giving up the uniform component names and the shared option vocabulary, but gaining direct access to the chart object and the full plugin surface of the engine. The other comparison is the analytics side of the market, where charting and metrics reporting ship in one package with event tracking attached. React Chartkick is neither of those things, and choosing it means keeping the measurement layer in your own code.
For maintenance, the repository carries a CHANGELOG.md and a CONTRIBUTING.md, the last push was on 2026-06-29, and the project has no GitHub releases, so the changelog in the repository is the record of what changed and when. The version in package.json is 0.5.4, and the library dependency is pinned loosely at 4.0.0 or later, so a Chartkick upgrade can change behaviour without any change on this side.
## Conclusion
react-chartkick fits teams that already own their data layer and want charts without hand-writing a renderer or a resize listener, and it suits dashboards where the same component needs to work across Chart.js and Highcharts. It is the wrong choice if you want charting and analytics in one package, since the library renders and stops there, and it is the wrong choice for a design system that needs full control of the underlying chart instance, since the wrapper exposes an options passthrough rather than the chart object itself. Before adopting, check the peer dependency situation, because package.json declares react and react-dom as peer dependencies with a wildcard version, and verify which adapter you ship by testing the chart type you need against the library you have chosen.
## FAQ
### How do I install react-chartkick with Chart.js?
Run npm install react-chartkick chart.js, then add the component import and the adapter import: import { LineChart, PieChart } from 'react-chartkick' followed by import 'chartkick/chart.js'. The README gives separate installation steps for Google Charts and Highcharts as well.
### What kinds of data can the data prop accept?
The README lists four: an array, an object, a callback, or a URL. The callback receives a success and a fail function, and a URL such as /stocks lets the component fetch its own endpoint, with a refresh prop in seconds for repeated polling.
### Can I render a chart with more than one data series?
Yes, by passing an array of objects, each with a name and its own data, for example {name: "Workout", data: {"2026-01-01": 3}}. Per series you can set name, data, color, and the Chart.js only keys dataset, points and curve.
### Which chart options only work with Chart.js?
The README marks xmin and xmax for the x-axis, the bytes option for friendly byte sizes, and the download option as Chart.js only. The number formatting options such as prefix, suffix, thousands, decimal, precision, round and zeros are marked as Chart.js and Highcharts.
### How do I set chart options globally across all charts?
Assign them to Chartkick.options, for example Chartkick.options = { colors: ["#b00", "#666"] }. Options for a single chart can also be passed straight to the underlying engine with the library prop, and Chart.js datasets with the dataset prop.
## Sources
- [ankane/react-chartkick on GitHub](https://github.com/ankane/react-chartkick)
- [Issues](https://github.com/ankane/react-chartkick/issues)
- [License: MIT](https://github.com/ankane/react-chartkick/blob/master/LICENSE)
- [Project website](https://chartkick.com/react)
- [README](https://github.com/ankane/react-chartkick/blob/master/README.md)
---
Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ankane-react-chartkick