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

getFrameScanByFileId,
} from '../utils/utilsForSqlite';

import startupImg from '../img/MoviePrint-steps.svg';

const { ipcRenderer } = require('electron');
const { dialog, app } = require('electron').remote;
const opencv = require('opencv4nodejs');

const moviePrintDB = new Database(FRAMESDB_PATH, { verbose: console.log });
moviePrintDB.pragma('journal_mode = WAL');

// const DEV_OPENCV_SCENE_DETECTION = process.env.DEV_OPENCV_SCENE_DETECTION === 'true';

// Disable animating charts by default.
defaults.global.animation = false;

const loadSheetPropertiesIntoState = (
  that,
  columnCount,
  thumbCount,
  secondsPerRowTemp = undefined,
) => {
  that.setState({
    columnCountTemp: columnCount,
    thumbCountTemp: thumbCount,
    columnCount,
    thumbCount,
    secondsPerRowTemp
  });
};

/*
Component to render a pie chart from data (size from props too)
*/

import styles from 'ducks/categories/Chart.styl'
import React, { Component } from 'react'
import { Doughnut, Chart as ReactChart } from 'react-chartjs-2'
import pieceLabel from 'lib/chartjsPieLabels'
import { defaults } from 'react-chartjs-2'
import flag from 'cozy-flags'

// Disable animating charts by default.
if (flag('analysis.no-animation')) {
  defaults.global.animation = false
}

class Chart extends Component {
  state = {
    data: {
      labels: this.props.labels,
      datasets: [
        {
          data: this.props.data,
          backgroundColor: this.props.colors,
          borderWidth: 0
        }
      ]
    },
    options: {
      cutoutPercentage: 74,

} else {
          return '';
        }
      } else {
        return '';
      }
      const result = 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ')[m];
      return result;
    }),
    datasets: [{
      backgroundColor: 'darkblue',
      labels: [],
      data: itemInfo.github_data.contributions.split(';').map( (x)=> +x).slice(-51)
    }]
  };
  const callbacks = defaults.global.tooltips.callbacks;
  const newCallbacks =  {...callbacks, title: function(data) {
    const firstWeek = new Date(itemInfo.github_data.firstWeek.replace('Z', 'T00:00:00Z'));
    const week = data[0].index;
    firstWeek.setDate(firstWeek.getDate() + week * 7);
    const s = firstWeek.toISOString().substring(0, 10);
    return s;
  }};
  const options = {
    tooltips: {callbacks: newCallbacks},
    scales: {
      xAxes: [{
        gridLines: false,
        ticks: {
          backdropPaddingY: 15,
          autoSkip: false,
          minRotation: 0,

import { defaults } from 'react-chartjs-2'

defaults.global.defaultFontColor = '#fff';
defaults.global.legend.labels.usePointStyle = true;
defaults.global.defaultFontFamily = 'Quicksand';

export var doughnutData = {
	labels: [
		'Red',
		'Blue',
		'Yellow'
	],
	datasets: [{
		data: [80.81, 20.20, 100],
		backgroundColor: [
			'#58B3DD',
			'#734EDD',
			'#D810DB',
			'#EA4D82',

import { defaults } from 'react-chartjs-2'

defaults.global.defaultFontColor = '#fff';
defaults.global.legend.labels.usePointStyle = true;
defaults.global.defaultFontFamily = 'Quicksand';

export var doughnutData = {
	labels: [
		'Red',
		'Blue',
		'Yellow'
	],
	datasets: [{
		data: [80.81, 20.20, 100],
		backgroundColor: [
			'#58B3DD',
			'#734EDD',
			'#D810DB',
			'#EA4D82',
		],
		hoverBackgroundColor: [

componentDidMount() {
    this.refreshMatches();
    this.refreshAccount();
    defaults.global.defaultFontColor = this.chartFontColor();
  }

import { defaults } from 'react-chartjs-2'

defaults.global.defaultFontColor = '#fff';
defaults.global.legend.labels.usePointStyle = true;
defaults.global.defaultFontFamily = 'Quicksand';

export var doughnutData = {
	labels: [
		'Red',
		'Blue',
		'Yellow'
	],
	datasets: [{
		data: [80.81, 20.20, 100],
		backgroundColor: [
			'#58B3DD',
			'#734EDD',
			'#D810DB',
			'#EA4D82',
		],