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

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

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

Author: Fantashit

7 thoughts on “Question: Is there a way to render gauge chart based on doughnut chart?

  1. @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
    }
  2. I was able to get a gauge with a “needle” by doing a doughnut chart with 2 datasets – might be useful for someone

    screen shot 2017-01-19 at 17 19 01

    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"
                }
            }
        }
    
  3. 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);
                        }
            }
    

    image

Comments are closed.