Using Chart.js

import React from 'react';
import Chart from 'chart.js';
import moment from 'moment';

const LineGraph = React.createClass({
    createChart: function() {
        const data = this.props.data;

        // Extracting data from properties
        var val = data.map(a => a.score);
        var labels = data.map(a =>
            moment(a.timestamp).format("MMM Do YY") // Using moment library for time formatting
        );

        // Creating Chart
        var ctx = document.getElementById("lineChart");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                // Labels corresponding to the data
                labels: labels,
                datasets: [{
                    // Data values
                    data: val,
                  
                    // Different settings, look on documentation
                    label: "Score",
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132,1)",
                    borderWidth: 2,
                }]
            }
        });
    },
    
    componentDidMount: function() {
        this.createChart();
    },
    
    render: function() {
        return (
            <div className="chartContainer">
                <h3>{this.props.title}</h3>
                <canvas id="lineChart"></canvas>
            </div>
        )
    }
});

// Use of LineGraph component
const DashboardContent = React.createClass({
    render: function() {
        return (
            <div>
                <LineGraph title="Score" data={this.props.stats} />
            </div>
        );
    }
});