<\/p>\n
This blog is all about Chart JS<\/strong> to be implemented in a React<\/strong> application. Before we start, we assume that we have a new or existing React application with us. Now open Terminal<\/strong> (for Ubuntu\/Mac<\/em> users) or Command Prompt<\/strong> (for Windows<\/em> users) and go to the project folder.<\/p>\n <\/p>\n Now we have to install the Chart Js<\/strong> plugin via Node Package Manager (NPM)<\/strong>. Type<\/p>\n We have now react-chartjs-2<\/strong> plugin installed in our application as well as added to package.json<\/strong> file. The next thing to do is we have to call the Graph modules within the component we are about to use. Suppose we have App.js<\/strong> within our application.<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\nnpm install react-chartjs-2 chart.js --save<\/pre>\n
Add Vertical Bar Graph<\/h3>\n
import React from 'react';\r\nimport {Bar} from 'react-chartjs-2'; \/\/import Bar module from react-chart-js-2\r\n\r\nconst mydata = {\r\n labels: ['Sunday', 'Monday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\r\n datasets: [\r\n {\r\n label: 'Week Dataset',\r\n backgroundColor: 'rgba(255,99,132,0.2)',\r\n borderColor: 'rgba(255,99,132,1)',\r\n borderWidth: 1,\r\n hoverBackgroundColor: 'rgba(255,99,132,0.4)',\r\n hoverBorderColor: 'rgba(255,99,132,1)',\r\n data: [65, 59, 80, 81, 56, 55, 40]\r\n }\r\n ]\r\n};\r\n\r\nexport default React.createClass({\r\n displayName: 'Bar Example',\r\n\r\n render() {\r\n return (\r\n <div>\r\n <h2>Vertical Bar Example (custom size)<\/h2>\r\n <Bar\r\n data={mydata}\r\n width={100}\r\n height={50}\r\n options={{\r\n maintainAspectRatio: false\r\n }}\r\n \/>\r\n <\/div>\r\n );\r\n }\r\n});<\/pre>\n<\/h3>\n
Add Horizontal Bar Graph<\/h3>\n
import React from 'react';\r\nimport { HorizontalBar } from 'react-chartjs-2';\u00a0\/\/import Horizontal Bar module from react-chart-js-2\r\n\r\nconst mydata = { \r\n ...\r\n ... \r\n};\r\n\r\nexport default React.createClass({ \r\n displayName: 'Vertical Bar Example', \r\n render() { \r\n return ( \r\n <div> \r\n <h2>Horizontal Bar Example (custom size)<\/h2> \r\n <HorizontalBar \r\n data={mydata} \r\n width={100} \r\n height={50} \r\n options={{ maintainAspectRatio: false }} \r\n \/> \r\n <\/div> \r\n ); \r\n } \r\n});<\/pre>\n<\/div>\n<\/h3>\n
Add Line Graph<\/h3>\n
import React from 'react';\r\nimport {Line} from 'react-chartjs-2'; \/\/import Line module from react-chart-js-2\r\n\r\nconst mydata = {\r\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\r\n datasets: [\r\n {\r\n label: 'My First dataset',\r\n fill: false,\r\n lineTension: 0.1,\r\n backgroundColor: 'rgba(75,192,192,0.4)',\r\n borderColor: 'rgba(75,192,192,1)',\r\n borderCapStyle: 'butt',\r\n borderDash: [],\r\n borderDashOffset: 0.0,\r\n borderJoinStyle: 'miter',\r\n pointBorderColor: 'rgba(75,192,192,1)',\r\n pointBackgroundColor: '#fff',\r\n pointBorderWidth: 1,\r\n pointHoverRadius: 5,\r\n pointHoverBackgroundColor: 'rgba(75,192,192,1)',\r\n pointHoverBorderColor: 'rgba(220,220,220,1)',\r\n pointHoverBorderWidth: 2,\r\n pointRadius: 1,\r\n pointHitRadius: 10,\r\n data: [65, 59, 80, 81, 56, 55, 40]\r\n }\r\n ]\r\n};\r\n\r\nexport default React.createClass({\r\n displayName: 'Line Chart Example',\r\n\r\n render() {\r\n return (\r\n <div>\r\n <h2>Line Chart Example<\/h2>\r\n <Line data={mydata} \/>\r\n <\/div>\r\n );\r\n }\r\n});<\/pre>\nAdd Pie Chart<\/h3>\n
import React from 'react';\r\nimport {Pie} from 'react-chartjs-2'; \/\/import Pie module from react-chart-js-2\r\n\r\nconst mydata = {\r\n labels: [\r\n 'Red',\r\n 'Green',\r\n 'Yellow'\r\n ],\r\n datasets: [{\r\n data: [300, 50, 100],\r\n backgroundColor: [\r\n '#FF6384',\r\n '#36A2EB',\r\n '#FFCE56'\r\n ],\r\n hoverBackgroundColor: [\r\n '#FF6384',\r\n '#36A2EB',\r\n '#FFCE56'\r\n ]\r\n }]\r\n};\r\n\r\nexport default React.createClass({\r\n displayName: 'Pie Example',\r\n\r\n render() {\r\n return (\r\n <div>\r\n <h2>Pie Example<\/h2>\r\n <Pie data={mydata} \/>\r\n <\/div>\r\n );\r\n }\r\n});<\/pre>\n