Create a Custom Pointer

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.

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>

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.

Widgets

Quick Start

Reference

wijradialgauge API