Add end point to radial guage

[davidwatters]

Hi Team,

Wondering whether its possible to add an end point (maybe not the right thing to call it) on a radial gauge. The end result I’m looking for is something like this:

I’ve tried:
plugins: {
labels: {
render: ‘image’,

But that doesn’t seem to work, is there another way of achieve this or something similar?

Thanks for the hel[p!
David

[ian]

Hi @davidwatters,

I don’t think the existing chartjs-radial-gauge plugin supports this. However, you could draw this circle yourself using a custom plugin.

Here’s a rough example:

{
  type: 'radialGauge',
  data: {
    datasets: [
      {
        data: [75],
        backgroundColor: '#55b972',
      },
    ],
  },
  plugins: [
    {
      id: 'radialGaugeCircularEnd',
      afterDraw: (chart, args, options) => {
        const { ctx, chartArea } = chart;
        
        // From chartjs-radial-gauge implementation
        const centerX = (chartArea.left + chartArea.right) / 2;
        const centerY = (chartArea.top + chartArea.bottom) / 2;
        const availableWidth =
          chartArea.right - chartArea.left - 1; /* borderWidth */
        const availableHeight = chartArea.bottom - chartArea.top - 1;
        const availableSize = Math.min(availableWidth, availableHeight);
        const outerRadius = Math.max((availableSize - 1) / 2, 0);
        const innerRadius = Math.max(80 ? (outerRadius / 100) * 80 : 0, 0);
        const trackRadius = (outerRadius + innerRadius) / 2;

        // Calculate end position
        const angle =
          (chart.config.data.datasets[0].data[0] / 100) * 2 * Math.PI -
          Math.PI / 2;

        const x = centerX + Math.cos(angle) * trackRadius;
        const y = centerY + Math.sin(angle) * trackRadius;

        // Draw circles
        ctx.beginPath();
        ctx.arc(x, y, 30, 0, 2 * Math.PI);
        ctx.fillStyle = '#55b972';
        ctx.fill();

        ctx.beginPath();
        ctx.arc(x, y, 15, 0, 2 * Math.PI);
        ctx.fillStyle = '#fff';
        ctx.fill();
      },
    },
  ],
}

Unfortunately, custom plugin support is not available in the community version of QuickChart, because it requires more computationally expensive sandboxing to run the JS safely.

Here’s how the above renders with a Professional key:

[davidwatters]

Thanks Ian, super useful info and the render looks great and what I was after. I’ll discuss with my clients, a move to the professional version of quickcharts has been on the cards for a while now so this might be the bit that gets it over the line.
Much appreciated.