Single line series

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

<div>
	<button id='m1'>
	 1m
	</button><button id='m3'>
	 3m
	</button><button id='m6'>
	 6m
	</button>
	<button id='all'>
	 All
	</button>
</div>
<div id="container"></div>

CSS

#container {
    height: 400px;
    min-width: 310px;
}

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function (data) {
    // Create the chart
    Highcharts.stockChart('container', {
		chart: {
			events: {
				load() {
					const chart = this,
						xAxis = chart.xAxis[0]
					
					m1.addEventListener('click', function() {
						const oneMonth = 2629800000,
							points = chart.series[0].points;
						console.log(points);
						xAxis.setExtremes(points[points.length - 1].x - oneMonth, points[points.length - 1].x);
					});
					
					m3.addEventListener('click', function() {
						const threeMonths = 3 * 2629800000,
							points = chart.series[0].points;
						xAxis.setExtremes(points[points.length - 1].x - threeMonths, points[points.length - 1].x);
					});
					
					m6.addEventListener('click', function() {
						const sixMonths = 6 * 2629800000,
							points = chart.series[0].points;
						xAxis.setExtremes(points[points.length - 1].x - sixMonths, points[points.length - 1].x);
					});
					
					all.addEventListener('click', function() {
						const oneYear = 12 * 2629800000,
							points = chart.series[0].points;
						xAxis.setExtremes(points[points.length - 1].x - oneYear, points[points.length - 1].x);
					});
				}
			}
		},
		
        rangeSelector: {
			enabled: false
        },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            name: 'AAPL',
            data: data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});