Cacher is the code snippet organizer for pro developers

import React from 'react';
import axios from 'axios';
import LineChart from './LineChart.jsx';

class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  componentDidMount() {
    axios.get('/bitcoinPrice')
      .then(data => this.setState({ data: data.data }))
      .catch(err => console.log(err.stack));
  }
  
  render() {
    const data = this.state.data;

    if (this.state.data.length === 0) {
      return <div>Loading...</div>
    } else {
      return (
        <div>
          <LineChart 
            data={Object.keys(data).map( price => data[price] )}
            labels={Object.keys(data)}
          />
          <a href="https://www.coindesk.com/price/bitcoin">Powered by CoinDesk</a>
        </div>
      )
    }
  }
}

export default Chart;

https://imgur.com/a/ZRqHv5b 

import React from 'react';
import ChartJS from 'chart.js';

ChartJS.defaults.global.defaultFontFamily = "'PT Sans', sans-serif"
ChartJS.defaults.global.legend.display = true;

class LineChart extends React.Component {  
  buildChart() {
    const myChartCtx = document.getElementById('chart');
    const { data, labels } = this.props;

    // labels = 

    const myLineChart = new ChartJS(myChartCtx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            label: "Bitcoin",
            data: data,
            fill: false,
            borderColor: 'rgba(255, 206, 86, 1)'
          }
        ]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Crypto Price (Last 30 Days)',
          fontSize: 20
        },
        tooltips: {
          enabled: true,
          mode: 'nearest',
          intersect: false
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Day'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Price (USD)'
            }
          }]
        }
      }
    });
  }

  componentDidMount() {
    this.buildChart();
  }

  render() {
    return <canvas id='chart' height="80vh" />
  }
}

export default LineChart;

const express = require('express');
const axios = require('axios');
const morgan = require('morgan');

const app = express();
const PORT = 3000 || process.env.PORT;
const onlyStatus200 = (req, res) => res.statusCode === 200;

app.use(morgan('tiny'));
app.use(express.static('public'));

app.get('/bitcoinPrice', (req, res) => {
  axios.get('https://api.coindesk.com/v1/bpi/historical/close.json')
  .then(data => res.status(200).send(data.data.bpi))
  .catch(err => res.status(500).send(err.stack));
});

app.listen(PORT, () => console.log(`Listening on port ${PORT}`));