Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Victory brush example
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>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment