Toggle navigation Highcharts
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter
  • Home
  • Products
    • Highcharts
    • Highcharts Stock
    • Highcharts Maps
    • Highcharts Gantt
    • Highcharts Editor
    • Highcharts Mobile
    • Wrappers & add-ons
  • Demo
    • Highcharts demos
    • Stock demos
    • Maps demos
    • Gantt demos
    • Customer showcase
  • Developer
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
    • Code Examples
  • Support
  • Blog
  • Get it
  • Join Our Team
  • About Us
    • About Us
    • Contact Us
    • News
    • Newsletter

Highcharts Configuration Preview

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', data => {
    const chart = Highcharts.stockChart('container', {
        chart: {
            height: 400
        },

        title: {
            text: 'Highstock Responsive Chart'
        },

        subtitle: {
            text: 'Click small/large buttons or change window size to test responsiveness'
        },

        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'AAPL Stock Price',
            data: data,
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            }
        }],

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    chart: {
                        height: 300
                    },
                    subtitle: {
                        text: null
                    },
                    navigator: {
                        enabled: false
                    }
                }
            }]
        }
    });

    document.getElementById('small').addEventListener('click', () => {
        chart.setSize(400);
    });

    document.getElementById('large').addEventListener('click', () => {
        chart.setSize(800);
    });

    document.getElementById('auto').addEventListener('click', () => {
        chart.setSize(null);
    });
});
              

Highcharts Stock Demos › Responsive chart

Default Dark Unica Sand Signika Grid Light
  • General
    • Stock chart with GUI
    • Single line series
    • Two panes candlestick and volume
    • Compare multiple series
    • 52000 points with data grouping
    • 1.7 million points with async loading
    • Intraday area
    • Intraday with breaks
    • Intraday candlestick
    • Flags marking events
    • Responsive chart
    • Dynamically updated data
  • Chart types
    • Line with markers and shadow
    • Spline
    • Step line
    • Area
    • Area spline
    • Area range
    • Depth chart
    • Area spline range
    • Candlestick
    • OHLC
    • Column
    • Column range
    • Point markers only
  • Various features
    • Stock chart with custom GUI
    • Plot lines on Y axis
    • Plot bands on Y axis
    • Reversed Y axis
    • Styled scrollbar
    • Disabled scrollbar
    • Disabled navigator
  • Flags and Indicators
    • MACD pivot points
    • SMA volume by price
    • Flags placement
    • Flags shapes and colors
Hide Menu More...

Responsive chart

Edit in jsFiddle Edit in CodePen
© 2020 Highcharts. All rights reserved.

Privacy Policy

Cookie Policy

Cookie Preferences