An adjustable black Meter chart

This Meter chart has been significantly customised which is why it looks very different to 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 drawing the canvas is cleared to a black color. 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.

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

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