Highcharts Demo

author(s): Øystein Moseng

by hendrikdegraaf

HTML

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

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

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

const path1 = { 
	d: ["M",32,12.5,"C",32,13.0523,32.4477,13.5,33,13.5,"C",33.5523,13.5,34,13.0523,34,12.5,"V",11,"C",34,10.4477,33.5523,10,33,10,"C",32.4477,10,32,10.4477,32,11,"V",12.5,"Z"], 
	attr: { 
	fill: 'currentColor', 
	} 
}
const path2 = { 
	d: ["M",16,24,"V",27,"H",18,"V",24,"H",21,"V",22,"H",18,"V",19,"H",16,"V",22,"H",13,"V",24,"H",16,"Z"], 
	attr: { 
		fill: 'currentColor', 
	} 
}
const path3 = { 
	d: ["M",4,17,"C",4,15.3431,5.34315,14,7,14,"H",27,"C",28.6569,14,30,15.3431,30,17,"V",19,"H",31,"V",18,"H",32,"V",17,"C",32,16.4477,32.4477,16,33,16,"C",33.5523,16,34,16.4477,34,17,"V",18,"H",35,"V",19,"H",35.718,"C",36.4722,19,37.1987,19.284,37.7529,19.7956,"L",43.0348,24.6713,"C",43.6501,25.2392,44,26.0384,44,26.8757,"V",35,"H",38.874,"C",38.4299,36.7252,36.8638,38,35,38,"C",33.1362,38,31.5701,36.7252,31.126,35,"H",15.874,"C",15.4299,36.7252,13.8638,38,12,38,"C",10.1362,38,8.57006,36.7252,8.12602,35,"H",4,"V",17,"ZM",31.126,33,"C",31.5701,31.2748,33.1362,30,35,30,"C",36.8638,30,38.4299,31.2748,38.874,33,"H",42,"V",28,"L",30,28,"V",33,"H",31.126,"ZM",30,26,"L",41.5257,26,"L",36.3963,21.2652,"C",36.2116,21.0947,35.9694,21,35.718,21,"H",30,"V",26,"ZM",27,16,"C",27.5523,16,28,16.4477,28,17,"V",33,"H",15.874,"C",15.4299,31.2748,13.8638,30,12,30,"C",10.1362,30,8.57006,31.2748,8.12602,33,"H",6,"V",17,"C",6,16.4477,6.44772,16,7,16,"H",27,"ZM",12,36,"C",13.1046,36,14,35.1046,14,34,"C",14,32.8954,13.1046,32,12,32,"C",10.8954,32,10,32.8954,10,34,"C",10,35.1046,10.8954,36,12,36,"ZM",37,34,"C",37,35.1046,36.1046,36,35,36,"C",33.8954,36,33,35.1046,33,34,"C",33,32.8954,33.8954,32,35,32,"C",36.1046,32,37,32.8954,37,34,"Z"], 
	attr: { 
		'fill-rule': 'evenodd', 
		'clip-rule': 'evenodd', 
		fill: 'currentColor', 
	} 
}
const path4 = { 
	d: ["M",36.5,17,"C",36.5,16.4477,36.9477,16,37.5,16,"H",39,"C",39.5523,16,40,16.4477,40,17,"C",40,17.5523,39.5523,18,39,18,"H",37.5,"C",36.9477,18,36.5,17.5523,36.5,17,"Z"], 
	attr: { 
		fill: 'currentColor', 
	} 
}
const path5 = { 
	d:...