ankane / react-chartkick

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

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

Upgrading

0.5.0

For the no package manager install, Chartkick.js is no longer bundled, allowing you to update them independently. Include it manually before React Chartkick.

<script src="https://unpkg.com/[email protected]"></script>

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

react-chartkick's Issues

[Idea] Scatter and Line

I was wondering if it is possible to add a scatter and a line to the same plot. I want to add the line of best fit to my scatter data (I can calculate this line myself), but I can't find anything that allows this in the documentation.

highcharts re-render every time when another component state change

thanks! for you create this library.

i have some problem when i use highcharts for adapter of react-chartkick. Issues occur when i changed state of another component
for example: state of dropdown component. chart is redraw data (data for chart is not change)

how to avoid it ?

thanks!

Accepting PRs for new chart types?

Hi @ankane, are you accepting PRs for new chart types? Was hoping to add the histogram one.

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: 

 	./~/react-chartkick/index.js:14 

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: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

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.

Is possible to customize tooltip?

Thanks for taking your time making this lib!

I was wondering if is possible to customize the tooltip on the Google charts.

I wanted to change 'Votes: 100' to 'Votes: 100%', is that possible?

https://gyazo.com/0fca315355cf32638df068b9690c4428

Thanks!

use persian date instead of gregorian date or show my custom Text

Hi,
I have a problem with Line Chart
I want to use persian date but I cant and It shows me gregorian date . what should I do ?
if it is impossible please let me know how can I show data with this sample : 1399/05/19
now it shows me 19 May
and if I remove 1399 it works but I want to show the year also!
please help me
thanks alot

react-chartkick Error Loading Chart: No adapter found

The below is my code which produces the error Error Loading Chart: No adapter found. I have seen lots of posts about this issue for Rails and earlier ones for Chart.js. My friends got this to work immediately but it will not load anything in mine besides the error.

Any help would be appreciated.

import React, { Component } from 'react';
import { Button } from 'react-materialize';
import { AreaChart } from 'react-chartkick';
import '../styles/App.css'

class ProgressBar extends Component {
render() {
return (

<AreaChart data={{"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6}} />

);
}
}

export default ProgressBar;

example of usage with chart.js

It's not clear to me how to implement a chart.js chart such as Radar with react-chartkick.

Do I import ReactChartkick from 'react-chartkick' and Chart from 'chart.js' and use them together somehow?

Add documentation for chart events

Awesome library! Could you add some examples on how to catch chart events?

As an example, how do I get select events from a Google chart?

[Question] Dataset Properties?

Hello, is it possible to set any chart js dataset properties? (http://www.chartjs.org/docs/latest/charts/line.html#dataset-properties). It seems like you can only set label(name) and data.

For example:

data = [
  {
  	"name":"Workout", 
  	"data": {"2017-01-01": 3, "2017-01-02": 4}},
  	"backgroundColor": "#00ff00",
  	"borderWidth": "5",
  }, {
  	...
  }
];

<LineChart data={data} />

Can't get this working in CodeSandbox

Complains: 'No adapter found'

https://codesandbox.io/s/l26p4r5qjq

Donut chart no labels

Hi, I created a donut chart in react, but I noticed that the values don't display when you hover over a section of the chart.
Meanwhile, in the doc examples the labels appear. What could be wrong?

`<PieChart

    data={[["Allocated", 45], ["Distributed", 20], ["Undistributed/Intransit", 25], ["In Store", 10]]} 
    donut={true}  legend={false} colors={["#9ACA3D", "#2A91CB", "#EAFF00", "#C4C4C4"]} messages={{empty: "Fetching data..."}}
    library={{cutoutPercentage: 30}} dataset={{borderWidth: 0}} width="80px" height="80px" label="Value" />`

Click event on each column in column chart

I have successfully created a column chart in React with 4 columns. I need to be able to click each column and execute a specific function for each one. Is this possible?

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)

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!

[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"
      };

Line Chart with Dual Axis?

Hello. I'm hoping to use the dual-axis feature of chart.js. This is what I've tried but it's not working, I can't figure out how to assign a yAxisID to each dataset. How to I use the dual-axis feature with chartkick?

<LineChart
    data={[
        {
            name: "A",
            yAxisID: "A",
            data: [100, 96, 84, 76, 69]
        },
        {
            name: "B",
            yAxisID: "B",
            data: [1, 1, 1, 1, 0]
        }
    ]}
    library={{
        scales: {
            yAxes: [
                {
                    id: "A",
                    type: "linear",
                    position: "left"
                },
                {
                    id: "B",
                    type: "linear",
                    position: "right",
                    ticks: {
                        max: 1,
                        min: 0
                    }
                }
            ]
        }
    }}
/>

For reference, this is the example I'm trying to copy.

Labeling Pie/Donut pieces and accessing chart.js config

Hi,

I'm trying to add labels to pieces of a pie or donut chart similar to what's acheived here. It doesn't seem like that is supported through react-chartkick. Is there any way to access the chart.js config object in order to do this manually?

Thanks

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

"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.

[ERROR] Uncaught Error: No adapter found

Hi,

I am doing following steps:

npx create-react-app my-app
npm install chartkick react-chartkick --save

Then I added codes like the below;

./my-app/src/App.js

import React, { Component } from 'react';
import { LineChart, PieChart } from 'react-chartkick';

class App extends Component {
  render() {
    return (
      <div className="App">
        <LineChart data={{"2017-01-01": 11, "2017-01-02": 6}} />
      </div>
    );
  }
}

export default App;

./my-app/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Then I am getting this error, Why I am getting this error:

Download as jpg instead of png

Download-charts feature is awesome!

https://github.com/ankane/react-chartkick#download-charts

But how can I configure the download format? I would like to be able to download the chart image in jpg format.

Example AreaChart Options

Hi, thanks for this great library!

I'm looking at the AreaChart in the React examples here https://chartkick.com/react and trying to figure out the configuration to set the area fill color (different from the color of the line and data points) but I can't find any documentation or the source code for the example anywhere, and any options I've tried haven't worked.

Could you help point me in the right direction to figure out how to setup these options for the AreaChart?

Thank you -

[Idea] Set id attribute

Hi,

Thanks for your work.

I'm currently trying to implement this lib in Gutenberg (WordPress) to create some nice charts. All is OK except a little thing. Guntenberg find a difference between markup of the save function and the front end returning markup. This difference is about the chart "id" attribute which they're not equal for back and front.
Is it possible to add a config param to set the ID ? The ID could be choose from the back end and use for id attribute.

Thanks for your help and for your work!

[Idea] text inside donut chart

Hi,

I was wondering if I can add text inside the donut chart. For eg, If I'm showing counts in partitions and want to show sum inside the donut chart at centre.
Currently I could not find anything in documentation.

Thanks!

library property does nothing (chart.js)

It makes no difference, even when I try to change colors, nothing changes:

import React from 'react';
import { PieChart as PieChartComp } from 'react-chartkick'
// eslint-disable-next-line import/no-extraneous-dependencies
import 'chartkick/chart.js'

const PieChart = () => (
    <PieChartComp
        data={[["test", 44], ["test2", 23]]}
        library={{backgroundColor: ['rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)']}}
        legend={false}
    />
)


export default PieChart;

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?

Line Chart Step Size

Hello,

I am using the Chart JS line chart with ChartKick. I would like to know how to implement the step size to view multiple data points at the same time? Thanks.

<LineChart data={data} curve={false} />

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?

Multiple series line charts not plotting correctly for dynamic data points

Hi,

I am rendering multiple series line charts.

The data structure is as such -

const data = [
{ name:'Workout', data: { MAR19: 3, APR19: 4, MAY19:4.7, JUN19: 5.1 } },
{ name:'Call parents', data: { JAN19: 3.4, FEB19: 5, MAR19: 3, APR19: 3.5, MAY19: 4.3 } },
];

To give some context, the data that I'm receiving is dynamic, and I don't know beforehand what the data points would be.

The expected behaviour is that the second line will display the JAN19 and FEB19 points at the beginning of the x-asis, but it isn't. It ends up rendering the 2 points at the end of the x-asis.

How can I resolve this?

Remove deprecated React.createClass

For React 16

Donut chart data structure

I'm trying to replicate this example with 2 datasets. I have set the correct adapter, and my data is currently as follows:

<PieChart
  stacked
  donut={true}
  data={[{
    name: 'US',
    data: [
      ['Demand', usDemand],
      ['Spares', usSpares],
      ['Backups', usBackups]
    ]
  }, {
    name: 'CA',
    data: [
      ['Demand', caDemand],
      ['Spares', caSpares],
      ['Backups', caBackups]
    ]
  }, {
    name: 'ROW',
    data: [
      ['Demand', rowDemand],
      ['Spares', rowSpares],
      ['Backups', rowBackups]
    ]
  }]}
  colors={['#305994', '#69CA7E', '#8B59C8', '#AAAAAA']}
/>

and I'm already getting a blank chart. When I inspect the React component with dev tools the data prop looks like this:

I have tried with and without the stacked prop. Can you explain how to do this please?

Google Charts props

How can I props like data "type", visualization, background color? What are the supported props?

Issue with dates and timezones

Hello!

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:
https://prnt.sc/q6oqrs
Chartjs:
https://prnt.sc/q6ork4

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.

[QUESTION] Supported browsers versions

Hello.
May be I was not attentive enough, but could not find any browser compatibility information in the repo.
Are the minimal versions of most popular browsers known for the lib? If yes, it would be great to have them listed in the documentation.
Thanks!

Viewport resize - React app

When resizing the viewport (tested on chrome, firefox, and safari) the PieChart will resize correctly as it gets smaller, but will not resize when the viewport gets larger. Once I refresh the page, it will render the correct size. However, users that will be using this won't want to refresh the window every time they adjust the viewport larger in order for the chart to properly resize.

Original Size

Shrink window

Resize to be larger

Donut chart changing pieHole

Hi,

I am trying to make a donut chart with a thin donut. So like in Google Charts, I tried to change the 'pieHole' attribute to 0.8. Also i tried to change it within the react-chartkick.js file so when donut is set to true the value would be 0.8 instead of 0.5. Sadly this also did not work. Am I forgetting something?

Thanks!

Cant Use chart wit "chart.js": "^1.1.1" version

Cant Use these charts with "chart.js": "^1.1.1" version what can i do?

extraneous-dependencies error (eslint)

The eslint rule import/no-extraneous-dependencies throws an error because chartkick is not listed in package.json when you follow the setup steps.

can't find module react node_modules/react-chartkick

I use this library with create-react-app, when I installed this library ,I can't use yarn start ,because react-scripts was deleted, and then I reinstalled to start my app ,but there's a error with node_modules/react-chartkick : index.css?f255:26 Uncaught Error: Cannot find module "react"

[Error] No charting library found for GeoChart

I am using react-charkick for analytics purpose in my project, Thanks for the awesome library.
Everything is smooth except for the GeoChart

I am unable to get the GeoChart rendered - I didn't customize anything just imported and rendered with sample data from docs.

Here is an error reproduced codesandbox

import React from "react";
import { GeoChart } from 'react-chartkick'
import 'chart.js'

export default function App() {
  return (
    <div className="App">
      <h1>React Chartkick Geo Chart Error Reproduce</h1>


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

    </div>
  );
}

Here is complete stack trace,

callAdapter
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:1917:13
renderChart
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:1891:7
GeoChart.__render
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:2178:5
errorCatcher
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:1726:13
fetchDataSource
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:1754:7
GeoChart.Chart
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:2043:5
new GeoChart
https://xfxm1.csb.app/node_modules/chartkick/dist/chartkick.js:2287:13
ChartComponent.newChartType
https://xfxm1.csb.app/node_modules/react-chartkick/dist/react-chartkick.esm.js:90:22
ChartComponent.componentDidMount
https://xfxm1.csb.app/node_modules/react-chartkick/dist/react-chartkick.esm.js:95:10
commitLifeCycles
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22101:22
commitLayoutEffects
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25344:7
HTMLUnknownElement.callCallback
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:336:14
Object.invokeGuardedCallbackDev
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:385:16
invokeGuardedCallback
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:440:31
commitRootImpl
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25082:9
unstable_runWithPriority
https://xfxm1.csb.app/node_modules/scheduler/cjs/scheduler.development.js:697:12
runWithPriority$2
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12149:10
commitRoot
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24922:3
finishSyncRender
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24329:3
performSyncWorkOnRoot
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24307:9
scheduleUpdateOnFiber
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23698:7
updateContainer
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27103:3
eval
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27528:7
unbatchedUpdates
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24433:12
legacyRenderSubtreeIntoContainer
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27527:5
Object.render
https://xfxm1.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27608:10

Any help would be appreciated!

Thank you!

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.

Chart doesn't work with "Uncaught TypeError: Cannot read property 'config' of undefined" error

I'm having hard time running chartkick in rails app with webpacker and react installed through webpacker - all in their default configurations.

Error:
This line:

let config = window.Chartkick.config;

Produces this error:

Uncaught TypeError: Cannot read property 'config' of undefined

Backtrace:

Uncaught TypeError: Cannot read property 'config' of undefined
    at waitForLoaded (google.js:37)
    at Object.renderLineChart (google.js:228)
    at callAdapter (chartkick.js:175)
    at renderChart (chartkick.js:155)
    at LineChart.__render (chartkick.js:403)
    at errorCatcher (chartkick.js:36)
    at fetchDataSource (chartkick.js:53)
    at new Chart (chartkick.js:306)
    at new LineChart (chartkick.js:407)
    at ChartComponent.newChartType (react-chartkick.js:141)

Versions of chartkick and react-chartkick I'm using

chartkick - 2.2.4
react-chartkick - 0.1.5

I've tried latest version they also doesn't work

Code to reproduce:

import React, { Component } from 'react';
import { LineChart } from 'react-chartkick';

class Board extends Component {
	render() {
		return(
			<div>			
				<LineChart legend="bottom" series={{"0":{"type":"line","targetAxisIndex":0},"1":{"type":"column","targetAxisIndex":1}}} data={[{"name":"Clicks","data":[["Nov 15, 2017",13400],["Nov 16, 2017",11917],["Nov 17, 2017",8611],["Nov 18, 2017",8831],["Nov 19, 2017",10557],["Nov 20, 2017",11348],["Nov 21, 2017",11043]]},{"name":"Revenue", "data":[["Nov 15, 2017",7938.03],["Nov 16, 2017",912.4],["Nov 17, 2017",83.0],["Nov 18, 2017",447.0],["Nov 19, 2017",201.9],["Nov 20, 2017",65.0],["Nov 21, 2017",0.0]]}]} library={{"series":{"0":{"type":"line","targetAxisIndex":0},"1":{"type":"column","targetAxisIndex":1}},"vAxes":[{"textStyle":{"fontSize":13}},{"format":"$###,###,###","textStyle":{"fontSize":13},"textPosition":"out"}],"hAxis":{"showTextEvery":1,"format":"MMM d, y"},"focusTarget":"category","chartArea":{"width":"100%","left":100,"right":100,"height":"100%","top":10,"bottom":60}}} colors={["#00B7B7","#E6E7E8"]}/>
			</div>
		);
	}
}

export default Board;

Error happening when trying to render this component

Any clues what can be wrong or what can be checked?

make it dynamic

how do i use updateData in here ?

Multiple series column stacked chart

Whenever i try to put 2 series of the in the same component (ColumnChart or BarChart) the the isn't displaying.
i follow the schema on the readme.md:
data = [
{"name":"Workout", "data": {"2013-02-10 00:00:00 -0800": 3, "2013-02-17 00:00:00 -0800": 4}},
{"name":"Call parents", "data": {"2013-02-10 00:00:00 -0800": 5, "2013-02-17 00:00:00 -0800": 3}}
];