How to use victory - 10 common examples

],
                },
            },
        ]}
    />
);

// VictoryPortal test
test = (
    groupComponent}>
        <div>Child</div>
    
);

// createContainer test
const VictoryZoomBrushContainer = createContainer(
    'zoom',
    'brush',
);

test = ;

// Gutter test
test = (
    
);

import React from 'react';
import { VictoryTooltip } from 'victory';
import { Portal } from 'react-portal';
import { Heading } from '../PieCharts/PieCharts.styles';

/* Tooltip */
export class ChartTooltip extends React.Component {
    static defaultEvents = VictoryTooltip.defaultEvents;

    constructor(props) {
        super(props);
        this.state = { position: true, hover: false };
    }

    onMouseEnterHandler = () => {
        this.setState({
            hover: true,
        });
        console.error('enter');
    };
    onMouseLeaveHandler = () => {
        this.setState({
            hover: false,
        });

import React from 'react'
import { VictoryChart, VictoryAxis, VictoryStack, VictoryTheme, VictoryTooltip, createContainer } from 'victory'
import PropTypes from 'prop-types'
import moment from 'moment'
import styled from 'styled-components'
import theme from '../../../utils/theme'

export const formatTime = time => moment(time).format('h.mma Do MMM')
const formatYAxisTick = value => Math.abs(Number(value))

const ChartWrapper = styled.div`
  height: 50%;
`

const VictoryZoomAndVoronoiContainer = createContainer('zoom', 'voronoi')

class Chart extends React.Component {
  constructor (props) {
    super(props)
    this.handleZoom = this.handleZoom.bind(this)
  }

  handleZoom (domain) {
    // for (let i = 0; i < 2; i++) {
    //   const newDate = new Date(domain.x[i])
    //   newDate.setMilliseconds(0)
    //   newDate.setSeconds(0)
    //   newDate.setMinutes(0)
    //   domain.x[i] = newDate
    // }
    this.props.setDatetimeZoomDomain({x: domain.x})

export const newBrushVoronoiContainer = (onClick?: (event: any) => void, handlers?: BrushHandlers) => {
  const voronoiProps = {
    labels: obj => `${obj.datum.name}: ${getFormatter(d3Format, obj.datum.unit)(obj.datum.actualY || obj.datum.y)}`,
    labelComponent: ,
    // We blacklist "parent" as a workaround to avoid the VictoryVoronoiContainer crashing.
    // See https://github.com/FormidableLabs/victory/issues/1355
    voronoiBlacklist: ['parent']
  };
  if (handlers) {
    const VoronoiBrushContainer = createContainer('brush', 'voronoi');
    return (
      
    );
  }
  return ;
};

});

  const tooltipTextSize = TextSize.approximateTextSize(tooltipText(datum), tooltipStyle);

  const labelStyle = _.assign({}, style, {
    pointerEvents: 'none',
  });

  const labelUnitsStyle = _.assign({}, labelStyle, {
    fontSize: labelStyle.fontSize / 2,
    baselineShift: -((labelStyle.fontSize / 2) * 0.25),
    fill: colors.statDefault,
  });

  const labelText = text(datum);
  const labelUnitsTextSize = TextSize.approximateTextSize(labelText[1] || '', labelUnitsStyle);

  // Ensure that the datum y value isn't below zero, or the tooltip will be incorrectly positioned
  const tooltipDatum = {
    ...datum,
    y: _.max([datum.y, 0]),
  };

  return (

text,
    tooltipText,
  } = props;

  const tooltipFontSize = _.min([barWidth / 2, 12]);
  const tooltipHeight = tooltipFontSize * 1.2;
  const tooltipRadius = tooltipHeight / 2;

  const disabled = isDisabled();

  const tooltipStyle = _.assign({}, style, {
    fontSize: tooltipFontSize,
    display: disabled ? 'none' : 'inherit',
  });

  const tooltipTextSize = TextSize.approximateTextSize(tooltipText(datum), tooltipStyle);

  const labelStyle = _.assign({}, style, {
    pointerEvents: 'none',
  });

  const labelUnitsStyle = _.assign({}, labelStyle, {
    fontSize: labelStyle.fontSize / 2,
    baselineShift: -((labelStyle.fontSize / 2) * 0.25),
    fill: colors.statDefault,
  });

  const labelText = text(datum);
  const labelUnitsTextSize = TextSize.approximateTextSize(labelText[1] || '', labelUnitsStyle);

  // Ensure that the datum y value isn't below zero, or the tooltip will be incorrectly positioned
  const tooltipDatum = {

function render (alert) {
  const data = cloneDeep(alert.priceHistory);

  // hack to show graph if there is only one data point
  if (data.length === 1) {
    data.push(cloneDeep(data[0]));
    data[1].time = data[0].time + 1;
  }

  const times = data.map(d => d.time);
  const minTime = Math.min(...times);
  const maxTime = Math.max(...times);
  const maxPrice = Math.ceil(Math.max(...data.map(d => d.price)) / 50) * 50;

  const Graph = e('div', null, [
    e(V.VictoryChart, {
      domainPadding: 20,
      padding: { top: 10, right: 50, bottom: 50, left: 50 },
      theme: Theme
    }, [
      e(V.VictoryAxis, {
        domainPadding: 0,
        tickFormat: date => dateFormat(new Date(date), 'm/d', true)
      }),
      e(V.VictoryAxis, {
        crossAxis: false,
        dependentAxis: true,
        domain: [ 0, maxPrice ],
        tickFormat: tick => '$' + tick
      }),
      e(V.VictoryLine, {
        data,

const dateFormat = require('dateformat');
const cloneDeep = require('lodash.clonedeep');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const V = require('victory');

const e = React.createElement;

const Theme = cloneDeep(V.VictoryTheme.grayscale);
Theme.axis.style.tickLabels.fontFamily = `'PT Sans', 'sans-serif'`;
Theme.axis.style.ticks.stroke = Theme.axis.style.axis.stroke;
Theme.axis.style.ticks.size = 5;
Theme.line.style.labels.fontFamily = `'PT Sans', 'sans-serif'`;

function render (alert) {
  const data = cloneDeep(alert.priceHistory);

  // hack to show graph if there is only one data point
  if (data.length === 1) {
    data.push(cloneDeep(data[0]));
    data[1].time = data[0].time + 1;
  }

  const times = data.map(d => d.time);
  const minTime = Math.min(...times);

get theme() {
    const fontSize = 10;
    return merge({}, VictoryTheme.grayscale, {
      chart: { padding: { top: 30, bottom: 30, left: 50, right: 50 } },
      axis: {
        // Default theme applies to both x & y axes.
        style: {
          axis: {
            stroke: "white"
          },
          axisLabel: {
            fill: "white",
            padding: -15
          },
          grid: {
            stroke: "white",
            strokeWidth: "1px",
            opacity: 0.086
          },

import React from 'react';
import PropTypes from 'prop-types';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Point } from 'victory';
import { Helpers } from 'victory-core';
import pathHelpers from './path-helpers';

// Todo: Submit dash symbol to victory-core, providing PF4 doesn't need a smaller lineHeight for dash and minus?
class VictoryPoint extends Point {
  static propTypes = {
    ...Point.propTypes,
    symbol: PropTypes.oneOfType([
      PropTypes.oneOf(['circle', 'diamond', 'plus', 'minus', 'square', 'star', 'triangleDown', 'triangleUp', 'dash']),
      PropTypes.func
    ])
  };

  getPath = props => {
    const { datum, active, x, y } = props;
    const size = Helpers.evaluateProp(props.size, datum, active);
    if (props.getPath) {
      return props.getPath(x, y, size);
    }
    const pathFunctions = {
      circle: pathHelpers.circle,
      square: pathHelpers.square,
      diamond: pathHelpers.diamond,