Create beautiful JavaScript charts with one line of React


React Chartkick

Create beautiful JavaScript charts with one line of React

See it in action

Supports Chart.js, Google Charts, and Highcharts

Quick Start


npm install react-chartkick chart.js

And add

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

This sets up Chartkick with Chart.js. For other charting libraries, see detailed instructions.


Line chart

<LineChart data={{"2017-01-01": 11, "2017-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={{"2017-01-01": 11, "2017-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": {"2017-01-01": 3, "2017-01-02": 4}},
  {"name":"Call parents", "data": {"2017-01-01": 5, "2017-01-02": 3}}

// and
<LineChart data={data} />

Say Goodbye To Timeouts

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

<LineChart data="/stocks" />


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="2018-01-01" xmax="2019-01-01" />


<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 2.8+

<LineChart bytes={true} />

Show a message when data is empty

<LineChart messages={{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"]


Pass data as an array or object

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

Times can be a Date or a string (strings are parsed)

<LineChart data={[[new Date(), 5], ["2017-01-01 00:00:00 UTC", 7]]} />

Data can also be a callback

function fetchData(success, fail) {
  success({"Blueberry": 44, "Strawberry": 23})
  // or fail("Data not available")

<PieChart data={fetchData} />

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"}} />




npm install react-chartkick chart.js

And add

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

Google Charts


npm install react-chartkick

And add

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

And include on the page

<script src=""></script>

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

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



npm install react-chartkick highcharts

And add

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


No Package Manager

Include the charting library and the Chartkick library

<script src="[email protected]/dist/Chart.bundle.js"></script>
<script src="[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


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

To get started with development, run:

git clone
cd react-chartkick
npm install
npm run build
  • Webpack Build Issue

    Webpack Build Issue

    Hi I am getting following issue while building webpack

    ERROR in bundle.js from UglifyJs Unexpected token: name (key) [./node_modules/chartkick/src/helpers.js:15,0][bundle.js:257776,6]

    Thanks Dinakaran S

    help wanted awaiting response 
    opened by DinakaranS 11
  • [Idea] Customize axis label color / fonts

    [Idea] Customize axis label color / fonts

    Thanks for the work on this project, wondering if you could add the options to change in axis labels via the options, like you have set the height option, for example:

          var props = this.props;
          var style = {
            height: props.height || "300px",
            lineHeight: props.height || "300px",
            width: props.width || "100%",
            textAlign: "center",
            color: props.axisColor || "#999",
            fontSize: "14px",
            fontFamily: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif"
    opened by slangdog 9
  • Tooltip missing when you hover mouse over a datapoint

    Tooltip missing when you hover mouse over a datapoint

    When a mouse pointer hovers over any of the data points in a graph, it fails to display a tooltip. It's a weird issue consistent throughout all graphs I am using in my web app - piecharts, line charts, bar graphs, etc. Using React 16.

    Also, there is a slight offset on where the hover occurs and where the tooltip displays (refer to image - the highlighted area was the position of the mouse when the tooltip showed up)

    Screen Shot 2019-09-22 at 8 12 56 PM

    Works fine on mobile - when you click on a data point the tooltip shows up correctly.

    Thanks for the help and making an awesome library otherwise!

    opened by hrixhi 7
  • Fails jest tests

    Fails jest tests

    I'm using a create-react-app based code base, and when I run tests I have the following errors:

    Storyshots › Dashboard / ToDo List [Test] › standard
        TypeError: Cannot read property 'id' of null
          at createChart (node_modules/chartkick/chartkick.js:1751:30)
          at new BarChart (node_modules/chartkick/chartkick.js:1775:7)
          at ChartComponent.newChartType (node_modules/react-chartkick/dist/react-chartkick.js:141:7)
          at ChartComponent.componentDidMount (node_modules/react-chartkick/dist/react-chartkick.js:146:12)
          at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4553:24)
          at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5729:9)
          at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1610:14)
          at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
          at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
          at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
          at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
          at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
          at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1649:16)
          at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1506:29)
          at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5833:9)
          at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6800:42)
          at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6750:7)
          at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6661:7)
          at scheduleWorkImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6515:11)
          at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6472:12)
          at scheduleTopLevelUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6976:5)
          at Object.updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7014:7)
          at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7637:18)
          at Object.renderOnly [as test] (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:47:31)
          at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/index.js:146:28)
              at new Promise (<anonymous>)
          at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
              at <anonymous>
          at process._tickCallback (internal/process/next_tick.js:188:7)

    The issue is somewhere in chartkick.

    opened by MOZGIII 7
  • Create-React-App Fails to Minify

    Create-React-App Fails to Minify

    The aforementioned toolset for spinning up React apps fails to compile for production this package.

    The exact message:

    Creating an optimized production build...
    Failed to compile.
    Failed to minify the code from this file: 

    Looking at the code, it seems to throw an err at the first arrow function:

    var createComponent = (chartType) => {

    It's referenced in the README to this issue:

    Basically the package is published and the "main" of package.json references the non-babel transpiled code. This package won't work unless an ES5 version is the main export.

    opened by ilrein 7
  • Create forward ref to make Chartkick API accessible

    Create forward ref to make Chartkick API accessible

    This PR does 2 things:

    • Creates a forward ref to make Chartkick API accessible outside the component. This is important for updating data easily from a parent component.
    • Adds a displayName that is set dynamically based on the chart type. This makes debugging in React DevTools easier because instead of showing up as <Unknown> the component will show up as <LineChart> or whatever the chart type is.
    opened by btorresgil 6
  • Fixed

    Fixed "Loading..." message on update

    This is a possible solution to the problem in #12

    The "Loading…" message that appears seems to be hanging around from earlier loads. As the actual React component (rather than the Chartkick object) only needs to update when changes, creating the new Chartkick object in shouldComponentUpdate instead of componentWillUpdate prevents the erroneous loading message from appearing.

    awaiting response 
    opened by oncomouse 6
  • "Loading text" isn't being removed

    For whatever reason when using Highcharts and react-chartkick, the chart is loaded but the "Loading..." text remains causing the graph to be pushed out of the parent element.


    opened by Sexual 5
  • Y-axis values get changed

    Y-axis values get changed

    I apologise in advance if this ends up being blatant user error, but it's been driving me mad.

    The data seems to load and then jump around, which results in the y-axis values being out of order. I've attached a gif to show what happens.


    All data passed to the chart is actually in the correct order, so I have no idea why it's switching.

    Any idea why this would happen?

    awaiting response 
    opened by chrise86 4
  • A way to add extra data to points in Highcharts

    A way to add extra data to points in Highcharts

    In Highcharts, you can load extra data to the points in a series.

        series: [ {
            name: 'Foo',
            data: [
                    y : 3,
                    myData : 'firstPoint'
                    y : 7,
                    myData : 'secondPoint'
                    y : 1,
                    myData : 'thirdPoint'
        } ]

    This is very useful to customize tooltips:

    tooltip: {
        formatter: function() {
            return 'Extra data: <b>' + this.point.myData + '</b>';

    I can't find a way to do this using react-chartkick. Any suggestions?

    opened by alarrosa14 4
  • Issue with dates and timezones

    Issue with dates and timezones


    I have an issue with dates and I suppose timezones. Everything is ok when I use chartjs, but when I use highcharts all dates shiffted to 1 day back and label shows date with time.

    See examples for same data:

    Highcharts: Chartjs:

    I suppose there is an issue with timezone, because my local timezone is GMT+3. And as you can see on highcharts it shows 21:00.

    opened by DemidenkoAndrey 3
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts Installat

Valor Software 2.2k Jan 4, 2023
Progressive pie, donut, bar and line charts

Peity Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini <svg> pie, donut, line or bar chart. Basic Usage HTM

Ben Pickles 4.2k Jan 1, 2023
Chart.js plugin to create charts with a hand-drawn, sketchy, appearance

chartjs-plugin-rough Chart.js plugin to create charts with a hand-drawn, sketchy, appearance Version 0.2 requires Chart.js 2.7.0 or later, and Rough.j

Akihiko Kusanagi 73 Dec 1, 2022
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.6k Dec 30, 2022
Attractive JavaScript charts for jQuery

flot About flot is a JavaScript plotting library for engineering and scientific applications derived from Flot: Take a look

Flot 5.9k Dec 22, 2022
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser

jQuery Sparklines This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line

Gareth Watts 1.2k Jan 4, 2023
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Jan 4, 2023
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12.1k Jan 3, 2023
Emprise Javascript Charts

EJSChart 100% Powerful, Clean & Functional Javascript Charts Whether at home, a medium sized or enterprise venture, EJSCharts will seamlessly help you

Emprise Corporation 34 Jun 3, 2021
A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: Circle charts To insert a chart all

Marcus Kirschen 6 Dec 14, 2022
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Dec 29, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at Checkout this lightning talk that gives you

Gion Kunz 26 Dec 30, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023