An adjustable black Meter gauge

This Meter chart has been significantly customised which is why it looks very different from the default Meter. The start and end angles have been adjusted as well as the radius of the black part in the center having been increased. Before starting to draw, the canvas is cleared to black. And the Meter is adjustable by way of some custom code that utilises the grow effect. This type of adjusting is custom - the default adjusting feature in RGraph is not animated.

Whilst this chart shows you an example of using the angleStart and angleEnd property you can use these properties to significantly change the look of the Meter chart and have one that is sideways oriented and not vertically oriented. It depends on the interface and aesthetics that you want for how you orient the Meter.

The custom code that facilitates the adjusting just consists of an event listener added to the canvas tag, the getValue function to get the new value based on the click and then the grow effect that moves the pointer to the new position.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.meter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="300" height="300" style="background-color: black; border-radius: 15px; box-shadow:3px 3px 3px gray; float: right">[No canvas support]</canvas>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // Create the Meter chart - it must be assigned to a variable in
    // this case so that that variable can be used later.
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 75,
        options: {

            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15,

            // There's various configuration options here so that the Meter looks
            // quite different to the default.
            backgroundColor: 'black',
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 150,
            textSize: 14,
            textColor: 'white',
            textValign: 'center',
            colorsGreenColor: '#0a0',
            segmentsRadiusStart: 95,
            border: 0,
            tickmarksSmallCount: 0,
            tickmarksLargeCount: 0,
            needleRadius: 70,
            needleColor: '#ddd',
            needleHeadWidth: 0.1,
            needleHeadLength: 20,
            centerpinStroke: 'black',
            centerpinFill: '#ddd'
        }
    }).grow();

    // Now add a click event listener so that when the canvas is clicked on
    // the Meter chart needle animates to show the new value.
    meter.canvas.onclick = function (e)
    {
        var newvalue = meter.getValue(e);
        
        meter.value = newvalue;
        meter.grow();
    }
</script>