Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change % gauge chart to exact value in c3.js

I am trying to change the units of a gauge chart. Instead of showing the % value by default, I would like to show the exact value. I looked for that in the documentation but it is incomplete and I am not sure which value I should put in the code to change it.

var chart = c3.generate({
bindto: "#chart",
data: {
    columns: [
        ['data', 15.0]
    ],
    type: 'gauge',
},
gauge: {
    min: 50,
    max: 100,
    units: '%' //I want to change that
}
});
like image 956
diegopf Avatar asked Dec 02 '22 15:12

diegopf


1 Answers

I am answering myself. To get the exact value and not the % one in a gauge chart, it is necessary to add this lines:

var chart = c3.generate({
    bindto: "#chart",
    data: {
    columns: [
        ['data', 15.0]
     ],
    type: 'gauge',
    },
    gauge: {
    label:{
    format: function(value, ratio){
      return value; //returning here the value and not the ratio
      },
    },
    min: 50,
    max: 100,
    units: '%' //this is only the text for the label
    }
});
like image 200
diegopf Avatar answered Dec 10 '22 12:12

diegopf