JavaScript Gauge

Set the border property of the jqxGauge. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="gaugeContainer"></div>

JavaScript

$('#gaugeContainer').jqxGauge({
     ranges: [{
         startValue: 0,
         endValue: 55,
         style: {
             fill: '#C9C9C9',
             stroke: '#C9C9C9'
         },
         endWidth: 5,
         startWidth: 1
     }, {
         startValue: 55,
         endValue: 110,
         style: {
             fill: '#FCF06A',
             stroke: '#FCF06A'
         },
         endWidth: 10,
         startWidth: 5
     }, {
         startValue: 110,
         endValue: 165,
         style: {
             fill: '#FCA76A',
             stroke: '#FCA76A'
         },
         endWidth: 15,
         startWidth: 10
     }, {
         startValue: 165,
         endValue: 220,
         style: {
             fill: '#FC6A6A',
             stroke: '#FC6A6A'
         },
         endWidth: 20,
         startWidth: 15
     }],
     ticksMinor: {
         interval: 5,
         size: '5%'
     },
     ticksMajor: {
         interval: 10,
         size: '9%'
     },
     value: 0,
     animationDuration: 1200
 });
 $('#gaugeContainer').jqxGauge({
     border: {
         size: '11%',
         style: {
             stroke: '#898989'
         },
         visible: true
     }
 });