Victory brush example

victory-example.js

import React, { PureComponent, PropTypes } from 'react';
import {
  VictoryChart,
  VictoryVoronoiContainer,
  VictoryBrushContainer,
  VictoryArea,
  VictoryScatter,
  VictoryLine,
  VictoryBar,
  VictoryCandlestick,
  VictoryPie,
  VictoryAxis,
  VictoryTooltip,
  createContainer,
} from 'victory';

const chartTypes = {
  line: VictoryLine,
  bar: VictoryBar,
  scatter: VictoryScatter,
  area: VictoryArea,
  candlestick: VictoryCandlestick,
  pie: VictoryPie
};

// sample data

const data = [{ key: "2017-04-20T16:00:00.000Z", value: 84 }, { key: "2017-04-21T16:00:00.000Z", value: 85 }];
const dates = ["2017-04-20T16:00:00.000Z", "2017-04-21T16:00:00.000Z"];

class Chart extends PureComponent { // eslint-disable-line react/prefer-stateless-function

  handleBrush = (domain) => {
    console.log(domain.x); // [41.3432343234323, 49.8976897689769]
  }

  render() {
    
    const { options } = this.props;

    const chartProps = {
      labelComponent: <VictoryTooltip />,
      y: 'value',
      x: 'key',
      name: 'chart',
      key: 'chart-base',
      data
    };

    const chartElement = React.createElement(chartTypes[options.type], chartProps);

    return (
      <VictoryChart
        theme={theme}
        height={containerHeight}
        width={containerWidth}
        containerComponent={
          <VictoryBrushContainer // CustomContainer (duplicate key bug in victory)
            dimension="x"
            title="Count Last 24 Hours"
            selectionStyle={{ fill: '#227AC9', opacity: 0.2 }}
            selectedDomain={{ x: [0, 0], y: [0, 0] }}
            responsive={false}
            onDomainChange={this.handleBrush}
          />
        }
      >
        <VictoryAxis
          tickValues={dates}
          tickFormat={dates.map(date => D.format(new Date(date), 'hA'))}
          fixLabelOverlap={dates.length > 24}
        />
        <VictoryAxis dependentAxis />
        {chartElement}
      </VictoryChart>
    );
  }

}