thermometer

yeah

by arvillarruel

HTML

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 50px; height: 400px; margin: 0 auto"></div>
<svg class='svg-background' width= 80 height=500>
	<circle cx='36' cy='412' r='20'></circle>
	<path d="M 22 20 L 22 400 M 50 400L 50 20 C 50 0 22 0  22 20"></path>
	
</svg>

CSS

.svg-background {
	fill: #222323;
	stroke: white;
	stroke-width: 2px;
	position: absolute;
	left: 235px;
	top: 0px;
	z-index: 0;
}
.svg-background circle {
	fill: #ff3a20;
}

#container {
	z-index: 3;
	position: absolute;
	left: 247px;
	top: 13px;
}
body{
	background-color:#222323;
}

JavaScript

$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'column',
			backgroundColor: 'transparent'
        },
		exporting: {
			enabled: false
		},
		credits: {
			enabled: false
		},
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                ''
            ],
			tickWidth: 0,
			gridLineWidth: 0,
            crosshair: true
        },
        yAxis: {
			title: {
                text: ''
            },
			labels: {
				enabled: true,
				x: 22,
				style: {
					color: '#B3B3B3'
				}
			},
        },
		legend: {
			enabled: false
		},
        plotOptions: {
            column: {
                borderWidth: 0
            },
		
        },
        series: [{
            
            data: [{
				y: 90,
				color: '#ff3a20',
				point: '1'
			}]
		}]
    });
});