rwbrockhoff

componentDidMount() {
  const { data, average, labels } = this.props;
  const myChartRef = this.chartRef.current.getContext('2d');


  myChart = new Chart(myChartRef, ...)
}

rwbrockhoff

.graphContainer {
    width: 50vw;
    height: 50vh;
    background: white;
    padding: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 10px 0px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 10px 0px -5px rgba(0,0,0,0.3);
    box-shadow: 0px 10px 0px -5px rgba(0,0,0,0.3);
}

rwbrockhoff

datasets: [
    {
        label: "Sales",
        data: data,
        fill: false,
        borderColor: "#98B9AB"

    },
    {
        label: "National Average",

rwbrockhoff

data: {
    //Bring in data
    labels: labels.length === data.length ? labels : new Array(data.length).fill("Data"),
    datasets: [
        {label: "Sales", data: data},
        {label: "National Average", data: nationalAverageData}
    ]
}

rwbrockhoff

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
      xAxes: [{
          ticks: { display: false },
          gridLines: {
              display: false,
              drawBorder: false
          }

rwbrockhoff

options: {
  responsive: true,
  maintainAspectRatio: false,
  layout: {
      padding: {
          top: 5,
          left: 15,
          right: 15,
          bottom: 15
      }

rwbrockhoff

options: {
  //Customize chart options
  responsive: true,
  maintainAspectRatio: false,
}

rwbrockhoff

//--Chart Style Options--//
Chart.defaults.global.defaultFontFamily = "'PT Sans', sans-serif"
Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.tension = 0;
//--Chart Style Options--//

// ^ Place Chart Style Options above our class ^
export default class myLineGraph extends Component {
    chartRef = React.createRef();
//Rest of our code....

rwbrockhoff

datasets: [
  {label: "Sales", data: data},
  {label: "National Average", data: nationalAverageData}
]

rwbrockhoff

import React, { Component } from 'react';
import classes from "./Dashboard.module.css";
import LineGraph from "../../components/Dashboard/LineGraph";
import chartIcon from "../../assets/chart-icon.svg";
import { managerData, yearLabels } from "./mockData";

export default class Dashboard extends Component {
    state = {
        data: managerData,
        labels: yearLabels