ESPTrainer/imports/ui/ScoreChart.jsx

import React, { Component, PropTypes} from 'react';
import Chart from 'chart.js';

Chart.defaults.global.legend.labels.fontColor = '#fff';
const dateFormat = 'DD/MM/YYYY H:ss';
const ScoreScales = {
	yAxes: [{
		ticks: {
			fontColor: "#fff",
			stepSize: 6,
			max: 24,
		}
	}],
	xAxes: [{
		type: 'time',
		time: {
			fontColor: "#fff",
			fontSize: 10,
			parser: moment.unix,
			tooltipFormat: dateFormat,
			//unit: 'day'
		},
		ticks: {
			fontColor: "#fff"
		}
	}]
};


export default class ScoreChart extends Component {
	constructor(props) {
		super(props);
		this.chart = null;
	}

	shouldComponentUpdate(nextProps) {
		return this.props.data !== nextProps.data;
	}

	componentDidMount() {
		let labels = Object.keys(this.props.data);
		const data = labels.map(key => this.props.data[key]);
		// labels = labels.map(d => moment.unix(d).format(dateFormat).split(' '));
		this.chart = new Chart(this.canvas, {
			type: 'line',
			data: {
				labels: labels,
				datasets: [{
					label: 'Progression',
					data: data,
					backgroundColor: 'rgba(255, 99, 132, 0.2)',
					borderColor: 'rgba(255,99,132,1)',
					borderWidth: 1
				}]
			},
			options: { scales: ScoreScales }
		});
	}

	componentDidUpdate() {
		let labels = Object.keys(this.props.data);
		const data = labels.map(key => this.props.data[key]);
		// labels = labels.map(d => moment.unix(d).format(dateFormat).split(' '));
		this.chart.data.labels = labels;
		this.chart.data.datasets[0].data = data;
		this.chart.update();
	}

	render() {
		return <canvas ref={(node) => this.canvas = node} width={400}/>;
	}
}

Chart.propTypes = {
	id: PropTypes.string.isRequired,
	data: PropTypes.object.isRequired
};