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

[dimitrypo]

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?

[dimitrypo]

Actually, I was able to fix that by adding those 2 lines in the root component:

import Chartkick from "chartkick";
window.Chartkick = Chartkick;

Is it OK way to fix the error and if it's suppose to work this way perhaps we can update readme file to state that?

[ankane]

Hey @dutgcom, thanks for reporting 👍 This error is fixed on Chartkick.js master. https://github.com/ankane/chartkick.js/commit/e9fb33cd91f6f75857af668152c1edcd5e978390