How to use the react-chartjs-2.Chart.defaults function in react-chartjs-2

export default function installChartjs() {
  // These have the side effect of installing themselves.
  require("chartjs-plugin-annotation");
  require("chartjs-plugin-datalabels");
  require("chartjs-plugin-zoom");
  require("webviz-core/src/util/multicolorLineChart");

  // Otherwise we'd get labels everywhere.
  Chart.defaults.global.plugins.datalabels.display = false;

  setUpChartJSZoom();

  if (Chart.plugins.count() !== 6) {
    throw new Error(
      "Incorrect number of Chart.js plugins; one probably has not loaded correctly (make sure we don't have duplicate chart.js instances when running `yarn list`."
    );
  }
}

[VERTICAL_EXCLUSIVE_ZOOM_KEY, HORIZONTAL_EXCLUSIVE_ZOOM_KEY].forEach((key) => {
      if (event.key.toLowerCase() === key) {
        pressedKeys[key] = true;
      }
    });
  });

  document.addEventListener("keyup", (event: KeyboardEvent) => {
    [VERTICAL_EXCLUSIVE_ZOOM_KEY, HORIZONTAL_EXCLUSIVE_ZOOM_KEY].forEach((key) => {
      if (event.key.toLowerCase() === key) {
        pressedKeys[key] = false;
      }
    });
  });

  Chart.defaults.global.plugins.zoom = {
    pan: {
      enabled: true,
      mode: "xy",
      // Taken from chartjs defaults
      speed: 20,
      threshold: 10,
    },
    zoom: {
      enabled: true,
      mode: "xy",
      // Taken from chartjs defaults
      sensitivity: 3,
      speed: 0.1,
      isModeEnabledOverrideFn: (_event: ?Event, direction: "x" | "y"): boolean => {
        if (pressedKeys[VERTICAL_EXCLUSIVE_ZOOM_KEY] && pressedKeys[HORIZONTAL_EXCLUSIVE_ZOOM_KEY]) {
          return true;

// @flow
//
//  Copyright (c) 2018-present, GM Cruise LLC
//
//  This source code is licensed under the Apache License, Version 2.0,
//  found in the LICENSE file in the root directory of this source tree.
//  You may not use this file except in compliance with the License.

import { Chart } from "react-chartjs-2";
/* eslint-disable no-underscore-dangle */
// From https://github.com/chartjs/Chart.js/issues/4895#issuecomment-341874938
Chart.defaults.multicolorLine = Chart.defaults.scatter;
Chart.controllers.multicolorLine = Chart.controllers.scatter.extend({
  draw(ease) {
    let startIndex = 0;
    const meta = this.getMeta();
    const points = meta.data || [];
    const colors = this.getDataset().colors;
    const area = this.chart.chartArea;
    const { multicolorLineYOffset } = this.chart.options.plugins || {};
    if (multicolorLineYOffset) {
      meta.dataset._children.forEach((data) => {
        if (!data._view.originalY) {
          data._view.originalY = data._view.y;
        }
        data._view.y = data._view.originalY + multicolorLineYOffset;
      });
    }

function drawBarValues() {
  // render the value of the chart above the bar
  const { ctx } = this.chart;
  ctx.font = Chart.helpers.fontString(
    Chart.defaults.global.defaultFontSize,
    'normal',
    Chart.defaults.global.defaultFontFamily
  );
  ctx.fillStyle = this.chart.config.options.defaultFontColor;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'center';
  this.data.datasets.forEach(function(dataset) {
    for (let i = 0; i < dataset.data.length; i += 1) {
      if (
        (dataset && !dataset.hidden === true) ||
        dataset._meta[Object.keys(dataset._meta)[0]].hidden !== false
      ) {
        const model =
          dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
        if (dataset.data[i] !== null) {
          ctx.fillText(dataset.data[i], model.x - 10, model.y + 20);
        }
      }

function drawBarValues() {
  // render the value of the chart above the bar
  const { ctx } = this.chart;
  ctx.font = Chart.helpers.fontString(
    Chart.defaults.global.defaultFontSize,
    'normal',
    Chart.defaults.global.defaultFontFamily
  );
  ctx.fillStyle = this.chart.config.options.defaultFontColor;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'center';
  this.data.datasets.forEach(function(dataset) {
    for (let i = 0; i < dataset.data.length; i += 1) {
      if (
        (dataset && !dataset.hidden === true) ||
        dataset._meta[Object.keys(dataset._meta)[0]].hidden !== false
      ) {
        const model =
          dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
        if (dataset.data[i] !== null) {
          ctx.fillText(dataset.data[i], model.x - 10, model.y + 20);

*         Licensed under the Apache License, Version 2.0 (the "License");
 *         you may not use this file except in compliance with the License.
 *         You may obtain a copy of the License at
 *
 *             http://www.apache.org/licenses/LICENSE-2.0
 *
 *         Unless required by applicable law or agreed to in writing, software
 *         distributed under the License is distributed on an "AS IS" BASIS,
 *         WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *         See the License for the specific language governing permissions and
 *         limitations under the License.
 */

import {Chart} from 'react-chartjs-2';

Chart.defaults.global.defaultFontFamily = 'monospace';

export default {
    maintainAspectRatio: false,
    legend: {
        position: 'right'
    },
    scales: {
        xAxes: [{
            type: 'time'
        }],
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }

import React from 'react'
import { Chart, Line } from 'react-chartjs-2'
import 'chartjs-plugin-downsample'

Chart.defaults.global.defaultFontSize = 11
Chart.defaults.global.elements.point.radius = 0
Chart.defaults.global.elements.point.hitRadius = 10
Chart.defaults.global.elements.point.hoverRadius = 10

export default ({
  stacked = false,
  dataset,
  title,
  xLabel,
  yLabel,
  config,
  width,
  height,
  currentSupply,
  verticalLine,
  yAxes,
  lineColor,

import React from 'react'
import { Chart, Line } from 'react-chartjs-2'
import 'chartjs-plugin-downsample'

Chart.defaults.global.defaultFontSize = 11
Chart.defaults.global.elements.point.radius = 0
Chart.defaults.global.elements.point.hitRadius = 10
Chart.defaults.global.elements.point.hoverRadius = 10

export default ({
  stacked = false,
  dataset,
  title,
  xLabel,
  yLabel,
  config,
  width,
  height,
  currentSupply,
  verticalLine,
  yAxes,