Chart Navigation
ChartSpire provides built-in navigation controls that appear at the bottom center of each chart, allowing you to easily navigate and zoom through your chart data.
Navigation Controls
The navigation bar includes six buttons with the following functions:
| Button | Function | Description |
|---|---|---|
| − | Zoom Out | Decreases the zoom level to show more data points |
| + | Zoom In | Increases the zoom level to show fewer data points with more detail |
| ← | Move Left | Moves the chart view one step to the left (older data) |
| → | Move Right | Moves the chart view one step to the right (newer data) |
| ⟲ | Reset Chart | Restores the chart to its original default view and zoom level |
Features
Smart Reset
The reset button (⟲) restores your chart to exactly how it appeared when first loaded:
- X-axis: Returns to the original visible time range and bar spacing
- Y-axis: Automatically scales to fit the visible price data
API Configuration
Enable/Disable Navigation
You can control whether navigation controls appear on your charts:
typescript
// Enable navigation (default)
const chartOptions = {
chartNavigationEnabled: true
}
// Disable navigation
const chartOptions = {
chartNavigationEnabled: false
}Default Behavior
- Navigation controls are enabled by default
- Controls automatically position themselves at the bottom center of the chart