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://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/usdeur.json', function (data) {

    var startDate = new Date(data[data.length - 1][0]),
        minRate = 1,
        maxRate = 0,
        startPeriod,
        date,
        rate,
        index;

    startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point
    startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());

    for (index = data.length - 1; index >= 0; index = index - 1) {
        date = data[index][0]; // data[i][0] is date
        rate = data[index][1]; // data[i][1] is exchange rate
        if (date < startPeriod) {
            break; // stop measuring highs and lows
        }
        if (rate > maxRate) {
            maxRate = rate;
        }
        if (rate < minRate) {
            minRate = rate;
        }
    }

    // Create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'USD to EUR exchange rate'
        },

        yAxis: {
            title: {
                text: 'Exchange rate'
            },
            plotBands: [{
                from: minRate,
                to: maxRate,
                color: 'rgba(68, 170, 213, 0.2)',
                label: {
                    text: 'Last quarter year\'s value range'
                }
            }]
        },

        series: [{
            name: 'USD to EUR',
            data: data,
            tooltip: {
                valueDecimals: 4
            }
        }]
    });
});
              

Highcharts Stock Demos › Plot bands on Y axis

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...

Plot bands on Y axis

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

Privacy Policy

Cookie Policy

Cookie Preferences