TypeError: Cannot read property 'table' of undefined

[jvkiran]

import React from 'react'
import ReactDOM from 'react-dom'
import anychart from 'anychart'
import AnyChart from 'anychart-react'

export default class SimpleChart extends React.Component {
    constructor(){
        super();
    }

    render() {
        const table = anychart.data.table();
        table.addData([
            ['2015-12-24', 511.53, 514.98, 505.79, 506.40],
            ['2015-12-25', 512.53, 514.88, 505.69, 507.34],
            ['2015-12-26', 511.83, 514.98, 505.59, 506.23],
            ['2015-12-27', 511.22, 515.30, 505.49, 506.47],
            ['2015-12-28', 510.35, 515.72, 505.23, 505.80],
            ['2015-12-29', 510.53, 515.86, 505.38, 508.25],
            ['2015-12-30', 511.43, 515.98, 505.66, 507.45],
            ['2015-12-31', 511.50, 515.33, 505.99, 507.98],
            ['2016-01-01', 511.32, 514.29, 505.99, 506.37],
            ['2016-01-02', 511.70, 514.87, 506.18, 506.75],
            ['2016-01-03', 512.30, 514.78, 505.87, 508.67],
            ['2016-01-04', 512.50, 514.77, 505.83, 508.35],
            ['2016-01-05', 511.53, 516.18, 505.91, 509.42],
            ['2016-01-06', 511.13, 516.01, 506.00, 509.26],
            ['2016-01-07', 510.93, 516.07, 506.00, 510.99],
            ['2016-01-08', 510.88, 515.93, 505.22, 509.95],
            ['2016-01-09', 509.12, 515.97, 505.15, 510.12],
            ['2016-01-10', 508.53, 516.13, 505.66, 510.42],
            ['2016-01-11', 508.90, 516.24, 505.73, 510.40]  
        ]);

        const mapping = table.mapAs();
        mapping.addField('open', 1, 'first');
        mapping.addField('high', 2, 'max');
        mapping.addField('low', 3, 'min');
        mapping.addField('close', 4, 'last');
        mapping.addField('value', 4, 'last');

        const chart = anychart.stock();
        chart.plot(0).ohlc(mapping).name('ACME Corp.');
        chart.title('AnyStock Basic Sample');
        chart.container('container');
        chart.draw();

    let json = {
        type: 'stock', // pie column bar
        title: 'Stock Chart',
        width: 800,
        height: 600,

        // PIE
        instance: chart,

        // fill: '#0066cc',
        // hoverFill: '#0066cc',
        // hatchFill: 'backwarddiagonal',
        // stroke: '#808080',
        // hoverStroke: '#0066cc',

        // COLUMN / BAR

    }

    return (
      <div className="App">
        <AnyChart
          {...json}
        />
      </div>
    );
  }
}

"anychart-react": "^1.4.1", Error after npm start. TypeError: Cannot read property 'table' of undefined at new SimpleChart (/home/gtcoder/Sites/stock-predition/client/modules/Chart/pages/Simple/Simple.js:9:17) at processChild (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2095:14) at resolve (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2061:5) at ReactDOMServerRenderer.render (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2380:22) at ReactDOMServerRenderer.read (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19) at renderToString (/home/gtcoder/Sites/stock-predition/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25) at /home/gtcoder/Sites/stock-predition/server/server.js:140:29

[Shestac92]

@jvkiran It seems that anychart or anychart-react.min.js is not included properly (wrong path). Please, check the following paths:

import anychart from 'anychart'
import AnyChart from 'anychart-react'

Below you can find a react sample based on your code, the sample is added to the React plugin examples from this repo. The js chart config:

import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'

        const table = anychart.data.table();
        table.addData([
            ['2015-12-24', 511.53, 514.98, 505.79, 506.40],
            ['2015-12-25', 512.53, 514.88, 505.69, 507.34],
            ['2015-12-26', 511.83, 514.98, 505.59, 506.23],
            ['2015-12-27', 511.22, 515.30, 505.49, 506.47],
            ['2015-12-28', 510.35, 515.72, 505.23, 505.80],
            ['2015-12-29', 510.53, 515.86, 505.38, 508.25],
            ['2015-12-30', 511.43, 515.98, 505.66, 507.45],
            ['2015-12-31', 511.50, 515.33, 505.99, 507.98],
            ['2016-01-01', 511.32, 514.29, 505.99, 506.37],
            ['2016-01-02', 511.70, 514.87, 506.18, 506.75],
            ['2016-01-03', 512.30, 514.78, 505.87, 508.67],
            ['2016-01-04', 512.50, 514.77, 505.83, 508.35],
            ['2016-01-05', 511.53, 516.18, 505.91, 509.42],
            ['2016-01-06', 511.13, 516.01, 506.00, 509.26],
            ['2016-01-07', 510.93, 516.07, 506.00, 510.99],
            ['2016-01-08', 510.88, 515.93, 505.22, 509.95],
            ['2016-01-09', 509.12, 515.97, 505.15, 510.12],
            ['2016-01-10', 508.53, 516.13, 505.66, 510.42],
            ['2016-01-11', 508.90, 516.24, 505.73, 510.40]  
        ]);

        const mapping = table.mapAs();
        mapping.addField('open', 1, 'first');
        mapping.addField('high', 2, 'max');
        mapping.addField('low', 3, 'min');
        mapping.addField('close', 4, 'last');
        mapping.addField('value', 4, 'last');

        const chart = anychart.stock();
        chart.plot(0).ohlc(mapping).name('ACME Corp.');
        chart.title('AnyStock Basic Sample');

ReactDOM.render(
  <AnyChart
    width='100%'
    height='100%' 
    id='bar-chart'
        instance={chart}
  />, document.getElementById('root'));

HTML page for the sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anychart React plugin demo</title>
</head>
<style>
html, body, #bar-chart{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#root {
float: left;
     height: 100%;
    width: 100%;
}
</style>

<body>
<!-- Mount node for application -->
<div id="root"></div>
<script src="test2.min.js"></script>
</body>
</html>

Here is a result:

[jvkiran]

@Shestac92 I've install anychart-react in react app, how do i import? the error is about anychart.

Please help.

[Shestac92]

@jvkiran Please, try to download this repo, go to the downloaded directory and execute these steps. This will build react demo applications with AnyChart. In examples directory you can find source files which describe how to import AnyChart library and AnyChart-React plugin. Use the same approach in your projects, but always be sure that all paths are ok.

[jvkiran]

@Shestac92 , please check this repo https://github.com/jvkiran/mern I've tried, it's working eratically, in production mode, error is TypeError: Cannot read property 'table' of undefined at Chart.render (/home/gtcoder/Sites/predition/dist/server.bundle.js:785:43) at d (/home/gtcoder/Sites/predition/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:28:211) at wa (/home/gtcoder/Sites/predition/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:28:493) at a.render (/home/gtcoder/Sites/predition/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:48) at a.read (/home/gtcoder/Sites/predition/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:32:288) at renderToString (/home/gtcoder/Sites/predition/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:43:6) at /home/gtcoder/Sites/predition/dist/server.bundle.js:1020:52 at

[jvkiran]

@Shestac92 Sorry nothing wrong with this plugin, I've installed with create-reat-app and tested, working absolutely fine.

The problem is with mern boilerplate, which is not compiling while npm start.