Chart not rendering initially, only after chart updates

[stevewillard]

Anyone have any idea why my chart doesn't render initially, but if I update the component using the react-hot-loader (webpack), things redraw. This is my component:

I tried throwing on the "redraw" prop but it doesn't seem to help.

import React from "react";
import { Line } from "react-chartjs";

var chartOptions = {
    bezierCurve : false,
    datasetFill : false,
    pointDotStrokeWidth: 4,
    scaleShowVerticalLines: false,
    responsive: true
};

var styles = {
    "graphContainer" : {
        "backgroundColor" : "#fff",
        "height" : "235px",
        "width" : "1150px",
        "marginTop" : "15px",
        "padding" : "20px"
    }
};

export default class Histogram extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            chartData: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        fillColor: "#25BDFF",
                        strokeColor: "#25BDFF",
                        pointColor: "#25BDFF",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "#25BDFF",
                        data: [28, 48, 40, 19, 86, 27, 90]
                    }
                ]
            }
        };
    }

    render() {
        return (
            <div>
                <div style={styles.graphContainer}>
                    <Line data={this.state.chartData} options={chartOptions} width="1100" height="150" />
                </div>
            </div>
        );
    }
};

[mnishiguchi]

One thing I noticed is that in your code responsive: true which is NOT a chart option. According to Chart.js documentation, we need to set it like: Chart.defaults.global.responsive = true; globally.

[mnishiguchi]

Also, according to React.js documentation, we are not allowed to directly set this.state. We should use getInitialState() instead. How about this?

1. Provide data through props from parent component
2. Store the this.props.data in the component's state using getInitialState() like getInitialState: function() { return {{chartData: this.props.data}}; }

[stevewillard]

I tried setting global.responsive = true, but that doesn't seem to change anything.

I like the idea of providing data through props -- I assume that'll require a pull request?

[mnishiguchi]

Please take it easy. You do not need a pull request for that. It is about your implementation. In your code, you place the data using this.state, which is the source of the problem. We cannot directly control state ourselves, React does on our behalf. You have props in your constructor you can pass data by using that props, then inside your component, set it as default state using getInitialState. I'm outside now, I'll try to think of a concrete example later.

[stevewillard]

Hmm ok, I think I misunderstood what you were originally saying.

I tried passing in some props to this component, and then passing down these props to my react-chartjs component, but I still have the same behavior: it doesn't render based on the props until I re-render (hot load) or change the state.

[mnishiguchi]

Hey Steve, I just realized rules are a bit different for ES6 from other scripts. I was reading this. My apologies, you were not entirely wrong! I use CoffeeScript so I was just trying to directly translate word by word. Having said that, I wrote something similar to what you were trying to do, selfishly converting everything into CoffeeScript. Then, it works perfectly at the very first rendering. Here is my code with my home made chartjs wrapper:

• InteractiveChartComponent
• example/LineChart

My code is like a pseudo-code. I hope it will give you some ideas to solve your issues.

[stevewillard]

Ugh I still can't seem to get this to work. I think this must be a bug with react-chartjs. I'll try to do something similar to your home made chartjs wrapper, I think.

[mnishiguchi]

I wish I could look into it further with you but I need to learn the new syntax first ;) I implemented it from scratch but working perfectly on my Rails app. Trust me. Try to translate it in your language. Let me know how it goes, because I want to improve it if necessary. Good luck!

[qustavo]

It happened the same here, did you try with?

<Line data={this.state.chartData} options={chartOptions} redraw width="1100" height="150" />

[joshhornby]

Any update to this? seems a common issue.

[usergit]

oh man I wish I saw this thread earlier, any updates

[rowinf]

This should get you up and running

https://gist.github.com/rowinf/583fcbafe28d24eae323

[yocontra]

Still an issue, not sure why this was closed

[huozhi]

@contra chart.js current version is v2.4.0, react-chartjs peer dependency chart.js is v1.1.1. Downgrade chart.js to version v1.1.1 works well.