Charjs 2 with reactjs

Question

I am totally new to reactjs library. I found this library very interesting and want to implement in my chart-analyzing project(which is Java based spring project). Basically I want to implement it conventional way, do not want to install npm or any package manager. I have two files:

File: index.html

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.0/react-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-chartjs-2/2.1.0/react-chartjs-2.min.js"></script>
    <script type="text/babel" src="chart.js"></script>
    </head>
    <body>  
        <div id="root"></div>   
    </body>
</html>

File: chart.js

var MyComponent = React.createClass({
    render: function(){
      return <Line data={chartData} optionis={chartOptions} width="90%" height="70%" /> 
    }
});
ReactDOM.render(<MyComponent />, document.getElementById("root"));

I think, it should work, but I get error: Uncaught ReferenceError: Line is not defined

Note: I do NOT want to use npm manager. So, answers with npm, or using javascript require or import are not applicable to my requirement.

Yuhao · Answer 1 · 2017-07-05T15:57:39.830

0

You HAVE TO import the chartJS library (or in ES5 its var Line = require('Line')).

Thats the reason the console said Line is not defined.

edited Jul 05 '17 at 15:57

answered Jul 05 '17 at 15:28

Yuhao

147
9

I have used var Line=require('Line'); I got : ReferenceError: require is not defined – krishna Jul 05 '17 at 17:00
can I see more of your code? If you got require is not defined thats probably means the environment set up is wrong somehow. – Yuhao Jul 05 '17 at 17:22
meaning the way you include react & react-dom is somehow bugged – Yuhao Jul 05 '17 at 17:24

score 0 · Answer 2 · answered Jul 05 '17 at 15:53

0

Try this react library https://github.com/reactjs/react-chartjs .
You just have to run npm install --save react-chartjs in you project .
Then simply import LineChart from eact-chartjs

 var LineChart = require("react-chartjs").Line;
    var MyComponent = React.createClass({
        render: function() {
      return <LineChart data={chartData} optionis={chartOptions} width="90%" height="70%" /> 
        }
    });
    ReactDOM.render(<MyComponent />, document.getElementById("root"));

answered Jul 05 '17 at 15:53

Fahad Azhar

188
1
6

Is it not possible without npm. I have included the react-chartjs in my html page and I want to run in browser, not in server. Why you recommend react-chartjs instead of react-chartjs-2 ? – krishna Jul 05 '17 at 17:06

Charjs 2 with reactjs

2 Answers2