Customize Labels

Building on the Quick Start example, you can change the style and offset of the label text using the labels option. For more information on styles that you can use, see Style Options.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the labels style option to green Comic Sans with no outline, and changes the offset to 33 pixels so that the labels render inside the gauge face.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#radialgauge1").wijradialgauge({ value: 90, labels: { style: { "font-family": "courier", "font-size": 15, fill: "Green", stroke: "none" }, offset: 33 } }); }); </script>

Script

Copy Code

<script type="text/javascript">
            $(document).ready(function () {
    $("#radialgauge1").wijradialgauge({
        value: 90,
        labels: {
            style: {
                "font-family": "courier",
                "font-size": 15,
                fill: "Green",
                stroke: "none"
            },
            offset: 33
        }
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the gauge.
Save your HTML file and open it in a browser. The gauge appears like the one in the live widget below, with the labels in green Courier font.

Widgets

Reference

Concepts