Back to Gallery
Interpolation
const data = [ { x: 0, y: 0 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 4 }, { x: 4, y: 3 }, { x: 5, y: 5 } ]; const cartesianInterpolations = [ "basis", "bundle", "cardinal", "catmullRom", "linear", "monotoneX", "monotoneY", "natural", "step", "stepAfter", "stepBefore" ]; const polarInterpolations = [ "basis", "cardinal", "catmullRom", "linear" ]; const InterpolationSelect = ({ currentValue, values, onChange }) => ( <select onChange={onChange} value={currentValue} style={{ width: 75 }}> {values.map( (value) => <option value={value} key={value}>{value}</option> )} </select> ); class App extends React.Component { constructor() { super(); this.state = { interpolation: "linear", polar: false }; } render() { return ( <div> <InterpolationSelect currentValue={this.state.interpolation} values={this.state.polar ? polarInterpolations : cartesianInterpolations } onChange={(event) => this.setState({ interpolation: event.target.value })} /> <input type="checkbox" id="polar" value={this.state.polar} onChange={ (event) => this.setState({ polar: event.target.checked, interpolation: "linear" }) } style={{ marginLeft: 25, marginRight: 5 }} /> <label htmlFor="polar">polar</label> <VictoryChart polar={this.state.polar} height={390}> <VictoryLine interpolation={this.state.interpolation} data={data} style={{ data: { stroke: "#c43a31" } }} /> <VictoryScatter data={data} size={5} style={{ data: { fill: "#c43a31" } }} /> </VictoryChart> </div> ); } } render(<App/>);