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

To help you get started, we’ve selected a few react-chartjs-2 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cruise-automation / webviz / packages / webviz-core / src / util / multicolorLineChart.js View on Github external
// @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) => {
github cybercongress / gravity / src / components / Dynamics / Dynamics.jsx View on Github external
const palette = require('google-palette');

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

export const StructureContainer = ({ children, ...props }) => (
    <div
      { ...props }
        // className={styles.StructureContainer}
    >
        {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 {
github cybercongress / gravity / src / components / Dynamics / Dynamics.jsx View on Github external
import { LinkHash } from '../../index';

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

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

export const StructureContainer = ({ children, ...props }) => (
    <div
      { ...props }
        // className={styles.StructureContainer}
    >
        {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();
    },
});