Recharts-Zoom Example

by superhead

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  background-color: #fff;
}

JavaScript 1.7

const { Label, LineChart, BarChart, Line, Bar, Brush, CartesianGrid, ReferenceLine,
  XAxis, YAxis, Tooltip, Highlight } = Recharts;

const data = [
  { name: '1', uv: -6.11 },
  { name: '2', uv: 0.39 },
  { name: '3', uv: -1.37 },
  { name: '4', uv: 1.16 },
  { name: '5', uv: 1.29 },
  { name: '6', uv: 0.09 },
  { name: '7', uv: 0.53 },
  { name: '8', uv: 2.52 },
  { name: '9', uv: 0.79 },
  { name: '10', uv: 2.94 },
  { name: '11', uv: 4.3 },
  { name: '12', uv: 7.41 },
  { name: '13', uv: -7.1 },
  { name: '14', uv: -1.17 },
  { name: '15', uv: -1.86 },
  { name: '16', uv: 2.94 },
  { name: '17', uv: 4.3 },
  { name: '18', uv: 7.41 },
  { name: '19', uv: -7.1 },
  { name: '20', uv: -1.17 },
  { name: '21', uv: -1.86 }
];

const initialState = {
  data,
  barIndex : 'uv',
  left : 0,
  right : 0
};

class StreamingDemo extends React.Component {

	constructor(props) {
    super(props);
    this.state = initialState;
  }
  
  handleZoomIn(){  
    this.setState( ( { data : cdata, left = 0, right = 0 } ) => {
    	return { 
      	data : data.slice() ,
        animation : true, 
        left : left - 800,
        right : right - 800
        };
    } );  
  };

	handleZoomOut(){
  	this.setState( ( { data } ) => {
    	return {
      	data : data.slice(),
        animation : true,
        left : 0,
        right : 0
      }
    } );
  };
  
  render() {
    const { data, barIndex,animation, left, right } = this.state;

    return (
      <div className="highlight-bar-charts">
        <a
          href="javascript: void(0);"
          className="btn update"
          onClick={this.handleZoomIn.bind( this )}
        >
          zoom in
        </a>
        <br/>
        <a
          href="javascript: void(0);"
          className="btn update"
          onClick={this.handleZoomOut.bind( this )}
        >
          reset zoom
        </a>
        <p>Bar Example</p>
          <BarChart 
            width={750} height={250} barGap={5} 
            data={data} 
          ...