Nextjs React ChartJS 2

React wrapper for Chart.js

Examples

Line chart

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample3
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card>
           <CardHeader>
             <h5 className="h3 mb-0">Line chart</h5>
           </CardHeader>
           <CardBody>
             <div className="chart">
               <Line
                 data={chartExample3.data}
                 options={chartExample3.options}
                 id="chart-sales"
                 className="chart-canvas"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Bars Table Example

Bars chart

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample2
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card>
           <CardHeader>
             <h5 className="h3 mb-0">Bars chart</h5>
           </CardHeader>
           <CardBody>
             <div className="chart">
               <Bar
                 data={chartExample2.data}
                 options={chartExample2.options}
                 className="chart-canvas"
                 id="chart-bars"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Points Table Example PRO

Points chart

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample4
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card>
           <CardHeader>
             <h5 className="h3 mb-0">Points chart</h5>
           </CardHeader>
           <CardBody>
             <div className="chart">
               <Line
                 data={chartExample4.data}
                 options={chartExample4.options}
                 id="chart-points"
                 className="chart-canvas"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Doughnut Table Example PRO

Doughnut chart

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample5
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card>
           <CardHeader>
             <h5 className="h3 mb-0">Doughnut chart</h5>
           </CardHeader>
           <CardBody>
             <div className="chart">
               <Doughnut
                 data={chartExample5.data}
                 options={chartExample5.options}
                 className="chart-canvas"
                 id="chart-doughnut"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Pie Table Example PRO

Pie chart

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample6
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card>
           <CardHeader>
             <h5 className="h3 mb-0">Pie chart</h5>
           </CardHeader>
           <CardBody>
             <div className="chart">
               <Pie
                 data={chartExample6.data}
                 options={chartExample6.options}
                 className="chart-canvas"
                 id="chart-pie"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Bar stacked Table Example PRO

Bar stacked chart

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample7
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card>
           <CardHeader>
             <h5 className="h3 mb-0">Bar stacked chart</h5>
           </CardHeader>
           <CardBody>
             <div className="chart">
               <Bar
                 data={chartExample7.data}
                 options={chartExample7.options}
                 className="chart-canvas"
                 id="chart-bar-stacked"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Dark card with chart Example

import React from "react";
 // javascipt plugin for creating charts
 import Chart from "chart.js";
 // react plugin used to create charts
 import { Line, Bar, Doughnut, Pie } from "react-chartjs-2";
 // reactstrap components
 import { Card, CardHeader, CardBody } from "reactstrap";
 // core components
 import {
   // global options for the charts
   chartOptions,
   // function that adds the global options to our charts
   parseOptions,
   chartExample3
 } from "variables/charts.js";

 class Charts extends React.Component {
   componentWillMount() {
     if (window.Chart) {
       parseOptions(Chart, chartOptions());
     }
   }
   render() {
     return (
       <>
         <Card className="bg-default">
           <CardBody>
             <div className="chart">
               <Line
                 data={chartExample3.data}
                 options={chartExample3.options}
                 id="chart-sales"
                 className="chart-canvas"
               />
             </div>
           </CardBody>
         </Card>
       </>
     );
   }
 }

 export default Charts;

Props

If you want to see more examples and properties please check the official react-chartjs-2 Documentation and also the official ChartJS Documentation.

You can also check the Official React-ChartJS-2 Github Repository and the the Official ChartJS Github Repository.