Implementing Zoom and Pan Features in Victory Chart

Illustrates the implementation of interactive zoom and pan features in a Victory Chart using the VictoryZoomContainer component.

import React from 'react';
import { VictoryChart, VictoryZoomContainer, VictoryLine } from 'victory';

Imports the required components from Victory.

class ZoomableChart extends React.Component {
  constructor() {
    super();
    this.state = {
      zoomDomain: { x: [new Date(1990, 1, 1), new Date(2000, 1, 1)] }
    };
  }

Defines a ZoomableChart component and initializes its state with a default zoom domain.

handleZoom(domain) {
    this.setState({ zoomDomain: domain });
  }

Updates the component's state with the new zoom domain whenever a zoom action occurs.

render() {
    return (
      <VictoryChart
        width={600}
        height={400}
        scale={{ x: 'time' }}
        containerComponent={
          <VictoryZoomContainer
            zoomDimension="x"
            zoomDomain={this.state.zoomDomain}
            onZoomDomainChange={this.handleZoom.bind(this)}
          />
        }
      >

Renders a VictoryChart component with a VictoryZoomContainer to enable zooming. The zoomDimension property allows zooming along the x-axis.

<VictoryLine
          style={{
            data: { stroke: "tomato" }
          }}
          data={[
            { x: new Date(1982, 1, 1), y: 125 },
            { x: new Date(1987, 1, 1), y: 257 },
            { x: new Date(1993, 1, 1), y: 345 },
            { x: new Date(1997, 1, 1), y: 515 },
            { x: new Date(2001, 1, 1), y: 132 },
            { x: new Date(2005, 1, 1), y: 305 },
            { x: new Date(2011, 1, 1), y: 270 },
            { x: new Date(2015, 1, 1), y: 470 }
          ]}
        />
      </VictoryChart>
    );
  }
}

Adds a VictoryLine component inside the chart to display the graph. The data is represented as a time series.

export default ZoomableChart;

Exports the ZoomableChart component for use in other parts of the application.