Highcharts Demo

author(s): Torstein Hønsi

by rrrr2266

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>

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

CSS

#container {
    height: 400px;
}

JavaScript

var chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			alignTicks:false,
			zoomType: 'xy',
			resetZoomButton: {
				position: {
					align: 'left',
					verticalAlign: 'top', 
					x: 10,
					y: 10
			},
				relativeTo: 'chart'
			}, 
			
		},
						
		xAxis: {
			 categories: ["2022-06-06","2022-06-07","2022-06-08","2022-06-09","2022-06-10","2022-06-11","2022-06-12","2022-06-13"],
       breaks:[{
       from:2,
       to:3
       }]
		},
		yAxis:{
			title:{
				text : '%'
			},
		    
			max: 100,
		},	
		series: [{
			color: "#e88307",
			type: "spline",
			data: [99.68,99.69,99.68,99.62,99.62,99.59,99.57,99.67]
		},{
			color: "#9d07e8",
			type: "spline",
			data: [99.89,99.89,99.89,99.88,99.88,99.88,99.88,99.89]
		},{
			color: "#0738e8",
			type: "spline",
			data: [98.86,98.85,98.94,98.55,97.42,96.75,96.79,96.46]
		},{
			color: "#07e838",
			type: "spline",
			data: [98.4352499872,98.4351670785,98.5149062688,98.057699388,96.9333442352,96.23770101,96.2581544364,96.0359261498]
		}]
	});