How can I use reactjs to create a morris.js chart? I am using an Asp.net MVC5 project with react.js library. It is my first react project, and I want to change a morris.js chart when some button clicked. I don't want to use other react library just morris js librayr inside react js script
2 Answers
Here's how you can make Morris.js work with React.
- Install Morris.js and its dependency - Raphael.js:
npm install --save-dev morris.js
npm install --save-dev raphael- In your component:
import Raphael from 'raphael';
import 'morris.js/morris.css';
import 'morris.js/morris.js';- Morris looks for Raphael to be in global scope
constructor() {
super();
window.Raphael = Raphael;
}Important notes
If you get a compilation error for
morris.css, please read this.If you write
import Morris from 'morris.js/morris.js', it won't work.There's another way to make Raphael be in global scope.
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
Raphael: 'raphael'
})
],
...
}If you prefer this variant, you don't need:
import Raphael from 'raphael';
window.Raphael = Raphael;3 Comments
Mr_LinDowsMac
tried this solution but I get a "ReferenceError: jQuery is not defined", i don't know why. I have installed jQuery because I also have boostrap.
Arsen Kazydub
I would make sure jQuery is called before Raphael and Morris scripts.
Mr_LinDowsMac
Done. But after trying to use it like in the answer provided by @novasaint, I got an error
Simple solution
In componentDidMount() draw your chart, in my example it's a donut:
yourChart = Morris.Donut({
element: 'elementId',
data: data,
// ...other options
});
where yourChart is declared outside of the class or you can do this.yourChart in the constructor().
If you want to update/redraw your chart, you can call yourChart.setData(newData) at the button click.
2 Comments
Aggounix
Thank you for your answer I found this framework on internet: recharts.org and it worked well for me
Mr_LinDowsMac
Now I get a
TypeError: morris_js_morris_js__WEBPACK_IMPORTED_MODULE_3___default.a.Area is not a function