Highcharts P.

author(s): Madalina

by Madalina Taina

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container"></div>

CSS

#container {
  height: 500px;
  margin: 0 auto
}

JavaScript

var timestamps = [1523998693000, 1524002293000, 1524005893000, 1524088693000, 1524175093000, 1524261493000]
var data = timestamps.map(ts => {
  return {
    x: ts,
    y: 1
  }
})

Highcharts.stockChart('container', {
  xAxis: {
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000,
  },
  series: [{
	data: data,
			name: 'No. transactions',
			states: {
				hover: {
					color: '#01ffdc'
				}
			},
			dataGrouping: {
				forced: true,
				approximation: 'sum',
				units: [
					[
            //'day', [1]
						//'hour', [72]
            'hour', [12]
					]
				]
			}
  }],
  mapNavigation: {
			enabled: true,
			buttonOptions: {
				verticalAlign: 'bottom'
			}
		},
    chart: {
		backgroundColor: '#fff',
		style: {
			margin: '0'
		}
	},
	title: {
		style: {
			fontSize: '18px',
		}
	},
	tooltip: {
		borderWidth: 0,
		shadow: false
	},
	legend: {
		itemStyle: {
			fontWeight: 'normal',
			fontSize: '14px'
		}
	},
});