'bars' is undefined when creating grouped bar chart

[reggie3]

Using the following dataset to create a grouped bar chart results in a "Cannot read property 'bars' of undefined" error in core.js line 132.

var correctSet = {
            labels: ["Chocolate", "Vanilla", "Strawberry"],
            datasets: [
                {
                    label: "Blue",
                    fillColor: "blue",
                    data: [3, 7, 4]
                },
                {
                    label: "Red",
                    fillColor: "red",
                    data: [4, 3, 5]
                },
                {
                    label: "Green",
                    fillColor: "green",
                    data: [7, 2, 6]
                }
            ]
        };

I use the following code in the render function:

render() {

        return (
            <div>
                <h3 className="chartTitle">{this.props.graphName}</h3>
                <BarChart
                    width={500}
                    height={300}
                    offset={20}
                    data = {this.state.data}
                    />
            </div>
        )
    }

The dataset was obtained from a StackOverflow question ([http://stackoverflow.com/questions/28180871/grouped-bar-charts-in-chart-js]) and results in the grouped bar chart seen in the jsfiddle here: http://jsfiddle.net/11of5ysf/

[Jareechang]

This is working fine for me.

Are you sure you are requiring the lib correctly ?

something like this:

var ReactChart = require('react-chartjs');
var BarChart = ReactChart.Bar;

Also, it looks like you are using this.state.data, please check if that is defined as well.