vue-gauge
Version:
VueJs Gauge Plugin
29 lines (25 loc) • 882 B
HTML
<html>
<head>
</head>
<body>
<h2>VueJs Gauge</h2>
<div id="gaugeArea"></div>
<script src="../assets/bundle.js"></script>
<script>
// Element inside which you want to see the chart
let element = document.querySelector('#gaugeArea')
// Properties of the gauge
let gaugeOptions = {
hasNeedle: true,
needleColor: 'gray',
needleUpdateSpeed: 1000,
arcColors: ['rgb(44, 151, 222)', 'lightgray'],
arcDelimiters: [70],
rangeLabel: ['0', '100'],
// centralLabel: '70',
}
// Drawing and updating the chart
GaugeChart.gaugeChart(element, 300, gaugeOptions).updateNeedle(70)
</script>
</body>
</html>