JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bullet Gauge</title>
<style>
html {
margin: 0px;
}
body {
margin: 20px 30px;
}
#realchart {
width: 850px;
height: 550px;
border: 1px solid lightgray;
margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script type="text/javascript" src="https://unpkg.com/realchart/gauge.js"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function () {
try {
init();
} catch (err) {
alert(err);
console.error(err);
}
});
</script>
<script>
var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
</script>
</head>
<body>
<div id="realchart"></div>
</body></html>
JavaScript
const config = {
title: 'Bullet Gauges',
gauge: [{
type: 'bullet',
name: 'bullet1',
width: '55%',
height: 65,
left: 10,
maxValue: 100,
value: 81,
targetValue: 90,
scale: {
line: true,
label: {
suffix: '%'
}
},
ranges: [{
toValue: 50,
color: '#777'
}, {
toValue: 70,
color: '#aaa'
}],
label: {
text: 'RealChart Bullet<br>ver 1.0'
// position: 'top',
}
}, {
type: 'bullet',
name: 'bullet2',
width: 80,
height: '70%',
left: 600,
top: 50,
vertical: true,
maxValue: 100,
value: 81,
targetValue: 90,
scale: {
line: true
},
ranges: [{
toValue: 50,
color: '#777'
}, {
toValue: 70,
color: '#aaa'
}],
label: {
text: 'RealChart<br>Bullet<br>ver 1.0'
}
}]
};
let animate = false;
let chart;
function init() {
chart = RealChart.createChart(document, 'realchart', config);
}