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) {

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


        rangeSelector: {
            selected: 0
        },

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

        tooltip: {
            style: {
                width: '200px'
            },
            valueDecimals: 4,
            shared: true
        },

        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },

        series: [{
            name: 'USD to EUR',
            data: data,
            id: 'dataseries'

        // the event marker flags
        }, {
            type: 'flags',
            data: [{
                x: Date.UTC(2017, 11, 1),
                title: 'A',
                text: 'Some event with a description'
            }, {
                x: Date.UTC(2017, 11, 12),
                title: 'B',
                text: 'Some event with a description'
            }, {
                x: Date.UTC(2017, 11, 22),
                title: 'C',
                text: 'Some event with a description'
            }],
            onSeries: 'dataseries',
            shape: 'circlepin',
            width: 16
        }]
    });
});
              

Highcharts Stock Demos › Flags marking events

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

Flags marking events

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

Privacy Policy

Cookie Policy

Cookie Preferences