arcChart.js

JavaScript plugin that renders an animated arc with incrementing value inside a HTML5 canvas

View Project Download

Example Usage 1

<script>
    arcChart('canvas', 100);
</script>

Example Usage 2

<script>
    arcChart('canvas', 56, {
        arcRadius: 50,
        canvasHeight: 110,
        canvasWidth: 110,
        color: '#79CCE3',
        fontSize: '30px',
        lineWidth: 4,
        maxVal: 75,
        textSuffix: "\u25BC"
    });
</script>

Example Usage 3

<script>
    arcChart('canvas', 27.62, {
        color: '#99E8C0',
        decimalPlaces: 2,
        duration: 7500,
        glow: true,
        maxVal: 50,
        textPrefix: "£"
    });
</script>