How to use react-chartjs-2 - 10 common examples

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,

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);

// @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;
      });
    }
    const originalDatasets = meta.dataset._children.filter((data) => {

const palette = require('google-palette');

// const styles = require('./Struct.less');

export const StructureContainer = ({ children, ...props }) => (
    <div>
        {children}
    </div>
);

const { draw } = Chart.controllers.line.prototype;

Chart.controllers.line = Chart.controllers.line.extend({
    draw() {
        const { ctx } = this.chart.chart;

        ctx.save();
        ctx.shadowColor = '#36d6ae';
        ctx.shadowBlur = 12;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.stroke();
        draw.apply(this, arguments);
        ctx.restore();
    },
});


export class Dynamics extends React.Component {

import { LinkHash } from '../../index';

const palette = require('google-palette');

// const styles = require('./Struct.less');

export const StructureContainer = ({ children, ...props }) => (
    <div>
        {children}
    </div>
);

const { draw } = Chart.controllers.line.prototype;

Chart.controllers.line = Chart.controllers.line.extend({
    draw() {
        const { ctx } = this.chart.chart;

        ctx.save();
        ctx.shadowColor = '#36d6ae';
        ctx.shadowBlur = 12;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
        ctx.stroke();
        draw.apply(this, arguments);
        ctx.restore();
    },
});