Chart.js: Question: Is there a way to render gauge chart based on doughnut chart?

[knstntn]

To be precise I want something like this (ignore the numbers):

I see several options right away:

• half transparent doughnut chart
• truncate half of the chart using css
• custom chart extension

I do not know which is the best or easiest, but I'm certain that I'm not the first who is asking ;) Could you give me few ideas or pointers on how it is intended to be done, best practices etc

Thanks

[etimberg]

@knstntn I recall seeing someone do this using V2. The doughnut chart has parameters that change the start angle and the sweep angle. If you search around the issues here you should be able to find it (it was in the last few months) but I couldn't find it quickly

options: {
  rotation: -1.0 * Math.PI, // start angle in radians
  circumference: Math.PI, // sweep angle in radians
}

[RoxKilly]

@knstntn if you get it working please share your solution with us.

[knstntn]

@RoxKilly I just checked and solution from @etimberg works perfectly for me. Closing this issue.

(this is what I got)

[neilcrookes]

I was able to get a gauge with a "needle" by doing a doughnut chart with 2 datasets - might be useful for someone

Here's the JSON:

{
        "type": "doughnut",
        "data": {
            "datasets": [
                {
                    "data": [
                        30,
                        30,
                        20,
                        1,
                        20
                    ],
                    "backgroundColor": [
                        "rgb(255, 69, 96)",
                        "rgb(206, 148, 73)",
                        "rgb(153, 223, 89)",
                        "rgba(0, 0, 0, 0.6)",
                        "rgb(153, 223, 89)"
                    ],
                    "borderWidth": 0,
                    "hoverBackgroundColor": [
                        "rgb(255, 69, 96)",
                        "rgb(206, 148, 73)",
                        "rgb(153, 223, 89)",
                        "rgba(0, 0, 0, 0.6)",
                        "rgb(153, 223, 89)"
                    ],
                    "hoverBorderWidth": 0
                },
                {
                    "data": [
                        30,
                        30,
                        20,
                        1,
                        20
                    ],
                    "backgroundColor": [
                        "rgba(0, 0, 0, 0)",
                        "rgba(0, 0, 0, 0)",
                        "rgba(0, 0, 0, 0)",
                        "rgba(0, 0, 0, 0.6)",
                        "rgba(0, 0, 0, 0)"
                    ],
                    "borderWidth": 0,
                    "hoverBackgroundColor": [
                        "rgba(0, 0, 0, 0)",
                        "rgba(0, 0, 0, 0)",
                        "rgba(0, 0, 0, 0)",
                        "rgba(0, 0, 0, 0.6)",
                        "rgba(0, 0, 0, 0)"
                    ],
                    "hoverBorderWidth": 0
                }
            ]
        },
        "options": {
            "cutoutPercentage": 0,
            "rotation": -3.1415926535898,
            "circumference": 3.1415926535898,
            "legend": {
                "display": false
            },
            "tooltips": {
                "enabled": false
            },
            "title": {
                "display": true,
                "text": 4,
                "position": "bottom"
            }
        }
    }

[stychu]

@neilcrookes how to move the needle ? :P

[jeescu]

@stychu, that's no needle. xD . and @neilcrookes, doesn't look good during animation when data is updated (dataset 1).

[09archanakumari]

Did @knstntn find solution to this ..please help i need a gauge chart with needle pointing to one value.

[obernals]

You can just draw the needle on top of the doughnut chart, within your canvas element:

    function drawNeedle(radius, radianAngle) {
        var canvas = document.getElementById("YOUR_CANVAS_ID");
        var ctx = canvas.getContext('2d');
        var cw = canvas.offsetWidth;
        var ch = canvas.offsetHeight;
        var cx = cw / 2;
        var cy = ch - (ch / 4);

        ctx.translate(cx, cy);
        ctx.rotate(radianAngle);
        ctx.beginPath();
        ctx.moveTo(0, -5);
        ctx.lineTo(radius, 0);
        ctx.lineTo(0, 5);
        ctx.fillStyle = 'rgba(0, 76, 0, 0.8)';
        ctx.fill();
        ctx.rotate(-radianAngle);
        ctx.translate(-cx, -cy);
        ctx.beginPath();
        ctx.arc(cx, cy, 7, 0, Math.PI * 2);
        ctx.fill();
    }

Adjust your starting point, radius, etc. Then call it after animation:

        animation: {
                    onComplete: function () {
                            drawNeedle(150, -45 * Math.PI / 180);
                    }
        }

[knstntn]

To be honest after all I drawn speedometer from scratch using d3, inspired by https://codepen.io/judy/pen/mPGmYq

[fiefdx]

I build one, recently
https://github.com/fiefdx/gauge-chart-js

[kluverua]

Another simple extension:
https://github.com/kluverua/Chartjs-tsgauge

[enaide]

please somebody help me, how can import this components for angular 6, with out import form index.html directly bat from particular component

this component look perfect for me.