Skip to content
amCharts 5 Documentation
Back to amcharts.com Learn more about amCharts 5
Documentation
  • amCharts 5Current version
  • amCharts 4Legacy version
  • amCharts 3Deprecated
  • Editor 4Current version
  • Getting started
    • Root element
    • Integrations
      • React
      • Angular
      • Vue.js
      • Next.js
      • Jest
      • Nuxt 3
  • Charts
    • XY chart
      • Axes
        • Value axis
        • Date axis
        • Category axis
        • Gapless date axis
        • Duration axis
        • Axis ranges
        • Axis headers
      • Series
        • Line series
        • Column series
        • Step line series
        • Candlestick and OHLC series
        • Smoothed line series
      • Zoom and pan
      • Cursor
      • Scrollbars
      • Legend
      • Containers of an XY chart
    • Pie and sliced charts
      • Pie chart
        • Pie series
      • Funnel, pyramid, and pictorial charts
        • Funnel series
        • Pyramid series
        • Pictorial stacked series
      • Legend
      • Grouping slices
    • Radar chart
      • Radar axes
      • Radar series
      • Gauge charts
    • Map chart
      • Map polygon series
      • Map line series
      • Map point series
      • Graticule series
      • Panning and zooming
      • Drill-down navigation
      • Country data
      • Name translations
      • Map API
    • Hierarchy charts
      • Force-directed
      • Treemap
      • Partition
      • Tree
      • Sunburst
      • Pack
      • Hierarchy node colors
      • Drill-down navigation
      • Breadcrumb navigation
      • Legend
    • Flow charts
      • Sankey diagram
      • Chord diagram
      • Flow chart bullets
    • Word cloud
    • Venn diagram
    • Stock chart
      • Panels
      • Stock legend
      • Indicators
      • Percent scale
      • Annotations
      • Serializing indicators & annotations
      • Translating
      • Stock toolbar
        • Comparison control
        • Indicator control
        • Drawing control
        • Date range selector
        • Period selector
        • Series type control
        • Interval control
        • Settings control
        • Reset control
        • Dropdown list control
  • Concepts
    • Settings
      • Element states
      • List templates
      • Template fields
      • Adapters
      • Heat rules
    • Data
      • net.load utility
    • Legend
      • Heat legend
    • Colors, gradients, and patterns
      • Gradients
      • Patterns
      • Shadows
    • Common elements
      • Bullets
      • Labels
      • Graphics
      • Images
      • Buttons
      • Containers
      • Tooltips
      • Modal popups
      • HTML content
    • Formatters
      • Formatting numbers
      • Formatting dates
      • Formatting durations
      • Data placeholders
      • Text styling
    • Themes
      • Creating themes
    • Events
    • Locales
      • Creating translations
      • Right-to-left support
    • Responsive
    • Exporting
      • Images
      • Data
      • PDF
      • Printing
      • Menu
      • Annotator
      • Exporting API
    • Accessibility
    • Animations
    • JSON config
  • Tutorials
  • Reference
    • Classes
    • Interfaces
    • Standalone modules
  • Changelog (docs)
  • Migrating from amCharts 4
  1. V5
  2. Tutorials & Demos
  3. XY

Range selector with draggable axis range

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

This demo shows how we can add draggable buttons to each edge of an axis range.

See the Pen
Line Chart with Range Selector
by amCharts team (@amcharts)
on CodePen.0

Posted in XYTagged adapters, axes, events, interactions, ranges, xy
©2023 amCharts.com