Click on the buttons above the chart to move the navigation controls.
You can also build your own custom navigation controls. See how to do this in the toolbar Story.
See also
import React from "react";
import { createRoot } from "react-dom/client";
import { Chart } from "regraph";
import "@ci/theme/rg/css/button.css";
import "@ci/theme/rg/css/layout.css";
export const Demo = () => <Navigation />;
const positions = ["nw", "ne", "se", "sw"];
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true,
positionIndex: 0,
};
}
togglePosition = () => {
let { positionIndex } = this.state;
if (positionIndex >= positions.length - 1) {
positionIndex = 0;
} else {
positionIndex += 1;
}
this.setState({
positionIndex,
visible: true,
});
};
toggleVisibility = () => {
const { visible } = this.state;
this.setState({
visible: !visible,
});
};
render() {
const { positionIndex, visible } = this.state;
return (
<div className="story">
<div className="options">
<button type="button" className={visible ? "active" : ""} onClick={this.toggleVisibility}>
Visible
</button>
<button type="button" onClick={this.togglePosition}>
Position
</button>
</div>
<div className="chart-wrapper">
<Chart options={{ navigation: { visible, position: positions[positionIndex] } }} />
</div>
</div>
);
}
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>