[React ChartJS example] Simple line chart #js #react #react-chartjs-2 #chart

react-chartgs-2-line-chart.js

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import './App.css';

class App extends Component {

  ...
  
  render() {
    const data = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'My First dataset',
          fill: false,
          lineTension: 0.1,
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: 'rgba(75,192,192,1)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(75,192,192,1)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };
    
    const options = {
      maintainAspectRatio: false,
      scales: {
        xAxes: [
          {
            stacked: false
          }
        ],
        yAxes: [
          {
            stacked: false
          }
        ]
      },
      legend: {
        display: false
      },
      tooltips: {
        callbacks: {
          label: (tooltip, data) => {
            return "Hello!";
          }
        }
      }
    };

    return (
      <div className="App">
        <Line data={data} options={options} />
      </div>
    );
  }
}

export default App;