0

I am using react and chart.js together to plot bar chart. But in chart.js we have to use canvas tags and to find that tag and to place bar chart in it we use our normal document.getElementById() method. I tried lots of combinations like putting document.getElementById() at the beginning, or inside a $(document).ready(), even within react's componentDidMount() method. But Still I am getting "TypeError: document.getElementById(...) is null". If anyone know about it, please give me a suggestion. Thank You.

Here is the code which I am trying to execute:

var React = require("react");

var Chart = React.createClass({

    getDefaultProps: function() {
        barChartData = {
            labels : ["Option1", "Option2"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data : [65, 35]
                }
            ]
        }
    },

    onload: function() {
        console.log(document.getElementById('canvas_poll'));
        var ctx = document.getElementById("canvas_poll").getContext("2d");

        window.myBar = new Chart(ctx).HorizontalBar(this.props.barChartData, {
            responsive : true,
        });
    },

    componentDidMount: function() {
        this.onload();
    },

    render: function() {

        return (
            <div>
                <canvas classID="canvas_poll" height={100} width={600}></canvas>
            </div>
        );
    }

});

module.exports = Chart;
Swapnil Bhikule
  • 515
  • 7
  • 23
  • as @CallanHeard suggested, there is no such thing as `classID` attribute that I am aware of. you have to use `id` attribute. – Tahir Ahmed Sep 06 '15 at 13:40

2 Answers2

2

I had a similar problem with a react web app I was building. In addition to what was said in the previous solution, there are a few things I think you might find helpful based on what I read in the comments.

Script is ran before the element actually exists

One common problem is that the element does not exist at the time of rendering.

for example if your HTML looked like

    <script src="**your file **" type="text/babel"></script>
    <div id="canvas_poll"></div>

then your script would be ran before the div with the id you are looking for could get rendered. However, when switched, the script is ran after the div is formed. 

    <div id="canvas_poll"></div>
    <script src="**your file **" type="text/babel"></script>

That way, the element that the script is looking for actually exists and can be found.

Some solutions to this are listed in this link Why does jQuery or a DOM method such as getElementById not find the element?

Change <div /> to <div></div>

In my case, I was still getting null from my getElementById method after running the script after the div was formed. It ended up being how the target divs were set up.

I'm not sure why, but when my target div looked like

    <div id= "target1"/>
    <script src="target1.jsx" type="text/babel"></script>

I could render to that container using react. However, if I tried to render a second react element:

    <div id= "target1"/>
    <script src="target1.jsx" type="text/babel"></script>
    <div id= "target2"/>
    <script src="target2.jsx" type="text/babel"></script>

The first react element would show up but the second would not. What I did to fix it was change the div formatting from

     <div id="target"/>

to 

     <div id="target></div>

on all the target divs.

After I made that change, all my react elements came in fine. I'm not sure why it worked that way, but I hope it is helpful.

Community
  • 1
  • 1
wolfaviators
  • 473
  • 1
  • 6
  • 20
1

The document.getElementById() uses an element's 'ID' attribute, not 'classID' (which is also unsupported by the 'canvas' tag). Try adding id="canvas_poll" to the canvas element like so:

<canvas id="canvas_poll" height={100} width={600}></canvas>
Callan Heard
  • 707
  • 8
  • 18
  • I guess in react.js we use classID in react DOM as an id. But I tried that too. But still it's giving me the same error. – Swapnil Bhikule Sep 06 '15 at 16:33
  • @SwapnilBhikule could you show me the mark-up content and the errors please? – Callan Heard Sep 06 '15 at 16:36
  • I even tried console.log(document.getElementById('canvas_poll')) but again its returning null value. – Swapnil Bhikule Sep 06 '15 at 16:51
  • I understand the program code is the same but could you show me the element mark-up? Where is the code being rendered, in browser? Some screenshots/codes dumps would be very helpful! – Callan Heard Sep 06 '15 at 16:58
  • I didn't see any method of uploading screenshot in comment and yeah, the code being rendered in browser. – Swapnil Bhikule Sep 06 '15 at 17:06
  • @SwapnilBhikule can you try removing the curly parenthesis "{" "}" from around the height and width attribute values, and replacing them with quotation marks " please? Those are for variables within the rendering but you are using a static value – Callan Heard Sep 06 '15 at 17:06
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/88939/discussion-between-callan-heard-and-swapnil-bhikule). – Callan Heard Sep 06 '15 at 17:07