Building on the Quick Start example, you can customize the size, color and shape of the pointer, and of the cap at the center of the gauge using the pointer and cap options.
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the axis label rotation and the marker type and uses the seriesStyles option to change the color of the markers and the color and width of the lines.
Drop down and copy script to paste in <head> section
| Script |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("#radialgauge1").wijradialgauge({
value: 180,
max: 200,
min: 0,
pointer: {
length: 0.8,
width: 16,
style: { fill: "BlueViolet", stroke: "DarkBlue", "stroke-width": .5 }
},
cap: {
style: {
fill: "DarkBlue",
stroke: "Navy"
}
}
});
});
</script> |
- No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
- Save your HTML file and open it in a browser. The gauge appears like the one in the live widget below, with a 16-pixel wide blue violet pointer and a dark blue cap.
See Also
Widgets
Reference
Show All
Hide All