VictoryZoom won't pan
Broken in Victory 0.21.3; worked in 0.21.2
HTML
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/victory.min.js"></script>
<div id="app"></div>
Babel + JSX
const { VictoryChart, VictoryAxis, VictoryBar, VictoryZoomContainer } = Victory;
const renderTarget = document.getElementById('app');
const data = Array(70).fill(0)
.map((z, i) => ({x: i, y: 1 + i % 10, width: 10, name: "haha"}))
function App() {
return (
<div>
<div>Drag the chart left or right to pan</div>
<VictoryChart
height={250}
containerComponent={
<VictoryZoomContainer
dimension="x"
zoomDomain={{x: [20, 35]}}
allowZoom={false}
zoomActive={true /*WORKAROUND*/}
/>}>
<VictoryAxis/>
<VictoryAxis dependentAxis/>
<VictoryBar data={data} labels={(d) => d.name} />
</VictoryChart>
</div>
);
}
ReactDOM.render(<App/>, renderTarget);