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
Here's how you can make Morris.js work with React.
npm install --save-dev morris.js
npm install --save-dev raphael
import Raphael from 'raphael';
import 'morris.js/morris.css';
import 'morris.js/morris.js';
constructor() {
super();
window.Raphael = Raphael;
}
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;