Chartjs React

index.js

import React from 'react';
import Chart, {ChartDataSets} from 'chart.js';
import styles from './styles';

interface Props {
  labels: string[];
  datasets: ChartDataSets[];
}

class Graph extends React.Component<Props> {
  graph: Chart | null = null;
  constructor(props: Props) {
    super(props);
    this.state = {
      instance: null
    };
  }
  componentDidMount() {
    const ctx = document.getElementById('myChart') as HTMLCanvasElement;
    this.graph = new Chart(ctx, {
      type: 'line',
      data: {
        labels: this.props.labels,
        datasets: this.props.datasets
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  }
  render() {
    return <canvas id="myChart" className={styles.graph}></canvas>;
  }
}

export default Graph;

style.ts

import {stylesheet} from 'typestyle';

const styles = stylesheet({
  graph: {
    width: '100%'
  }
});

export default styles;