intermediate value)[chartType] is not a function

[SylarRuby]

What am I doing wrong, guys?

var LineChart = require("react-chartjs");

var MyComponent = React.createClass({
  render() {
   var chartData = {

  };
    return <LineChart.Line data={chartData} width="600" height="250"/>
  }
});

Only to get:

intermediate value)[chartType] is not a function

Which is at:

 classData.initializeChart = function(nextProps) {
      var Chart = require('chart.js');
      var el = ReactDOM.findDOMNode(this);
      var ctx = el.getContext("2d");
      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
      this.state.chart = chart;
    };

[dougmolineux]

I think that you're chartType variable there might be defined incorrectly.

I suggest you change it to look something like this:

        var chart = new Chart(ctx, {
          type: chartType.toLowerCase(),
          data: nextProps.data,
          options: nextProps.options
        });

EDIT / UDPATE: Sorry I took a look at the original source code I think you need to do:

return <Line data={chartData} width="600" height="250"/>

or this

return <line data={chartData} width="600" height="250"/>

[SylarRuby]

@dougmolineux Not sure I follow. I can't change anything as that's the npm's code.

Documentation is very poor with this module. I've installed chart.js module but not required it. If I required it, same problem. This alone should just work:

var LineChart = require("react-chartjs");

var MyComponent = React.createClass({
  render() {
   var chartData = {

  };
    return <LineChart.Line data={chartData} width="600" height="250"/>
  }
});

[yaoquan]

I faced a similar issue with chart.js@2.0.0. Downgraded to chart.js@^1.1.1 and the things worked according to instructions.

[SylarRuby]

Guess I'll use rd3 instead

[dougmolineux]

@SylarRuby it looks like the example usage in the Readme is:

var LineChart = require("react-chartjs").Line;

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

Sorry I'm not familiar with the "LineChart.Line" chart type in your example code there:

return <LineChart.Line data={chartData} width="600" height="250"/>

[SylarRuby]

@dougmolineux I know that way but it's the same issue I'm having.

[MatthewHerbst]

@dougmolineux suggested fix in #114 allows the package to work again for me:

In your package.json:

"react-chartjs": "git://github.com/venari/react-chartjs.git#chartjs-v2"

[SylarRuby]

Actually, you don't need this module. I don't see the need. The chart.js npm or the CDN on it's own just work fine so I'm no longer using this module.

[dougmolineux]

Please close the issue @SylarRuby :)

[MatthewHerbst]

@SylarRuby doesn't this module provide animation and redraw capabilities in the React way? Technically using just Chartjs will drop you out of React, which could be undesirable

[SylarRuby]

@MatthewHerbst I have not used "redraw" as of yet but I am sure it works as is. All I need is to display a chart, that is it, nothing too technical. Nothing breaks in React for me. I may do a Medium post on this for you more experienced dev to compare with.

[MatthewHerbst]

@SylarRuby I gave this more though, and I actually am starting to agree with you. Chartjs uses the canvas. Unlike SVG, changes to the canvas does not mean DOM changes. So, there isn't really a big need to worry about affects to React since your are keeping the DOM consistent.

[SylarRuby]

@MatthewHerbst Yes. Wrap your var myChart({...}) inside componentDidMount() then render <canvas id="myChart" height="400" width="600"></canvas> and that's it.

[MatthewHerbst]

Yes, although I would recommend grabbing the element (to pass the chart) via a ref instead of directly searching for the id.