Display decimal places on data value in radial gauge

1

Hi folks,
New to quickchart/chartjs and trying to work out how to display decimal places on my radial gauge. The value I’m reporting is between 0 and 1, and so want to display the value to 2 decimal places.
Have had a look through the documentation and cannot see what construct I used to drive this.
Here’s the config I’m using from the sandbox editor.

{
  type: 'radialGauge',
  data: {
    datasets: [{
      data: [0.80],
      backgroundColor: getGradientFillHelper('horizontal', ['red', 'blue']),
    }]
  },
  options: {
    // See https://github.com/pandameister/chartjs-chart-radial-gauge#options
    domain: [0, 1],
    trackColor: '#f0f8ff', 
    centerPercentage: 80,
    centerArea: {
      text: (val) => val,
    },
  }
}

Thanks,
Danny

2

Update: I’ve managed to work out a solution but not sure if this is the best approach. Any other suggestions welcomed.

Firstly, I tried changing the text definition to have 2 decimal places using .toFixed(2) as per this code, but whilst that added 2 decimal places, it always reported 1.00 (so it was rounding the input value to 1).

    centerArea: {
      text: (val) => val.toFixed(2)
    },

My final workaround was to scale the data values to 100 and then use the definition of the text value to turn it back into a fraction.

{
  type: 'radialGauge',
  data: {
    datasets: [{
      data: [85],
      backgroundColor: 'green',
    }]
  },
  options: {
    // See https://github.com/pandameister/chartjs-chart-radial-gauge#options
    domain: [0, 100],
    trackColor: '#f0f8ff', 
    centerPercentage: 75,
    centerArea: {
      text: (val) => (val/100).toFixed(2)
    },
  }
}

Happy to be pointed to a better solution for this.
Cheers, Danny.

3

Hi @ifpl,

Unfortunately I don’t have a better solution than the one you described above. It seems like a bug in chartjs-chart-radial-gauge. Specifically, the value is passed with Math.ceil for some reason: chartjs-chart-radial-gauge/src/controllers/controller.radialGauge.js at master · pandameister/chartjs-chart-radial-gauge · GitHub

Ian

4

Thanks Ian. At least I now know why it was happening (I initially thought I was just using it incorrectly). Will go with my workaround.