How can I force the ".0" portion of a value to explicitly display (Chart.JS)?

Question

I have got this data for my chart:

datasets: [
{
    label: "Price Compliant",
    backgroundColor: "rgba(34,139,34,0.5)",
    hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [99.0, 99.2, 99.4, 98.9, 99.1, 99.5, 99.6, 99.2, 99.7]
},
{
    label: "Non-Compliant",
    backgroundColor: "rgba(255, 0, 0, 0.5)",
    hoverBackgroundColor: "rgba(255, 0, 0, 1)",
    data: [1.0, 0.8, 0.6, 1.1, 0.9, 0.5, 0.4, 0.8, 0.3]
}
]

...which looks like so:

As you can see, the first data point (99.0) displays as 99, truncating the ".0" portion.

There is, of course, some logic to this, but the GUI nazis want that ".0" to be retained.

What do I need to do to force display of even "meaningless" portions of data?

UPDATE

afterDraw() event, for Jaromanda X:

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        if (chartInstance.id !== 1) return; // affect this one only
        var ctx = chartInstance.chart.ctx;
        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(dataset.data[i] + "%", model.base + 180, model.y + 6);
                //ctx.fillText(dataset.data[i], model.base + 20, model.y + 6);
            }
        });
    }
});

Number object has `.toFixed` method - oh, wait, you rely on what chart.js descides to output — Jaromanda X, Sep 27 '16 at 23:13
I don't know chart.js, but you could try passing the value as a string: `data: ['1.0', '0.8', ...`. In theory Chart.js won't be able to truncate that ... although it might completely screw up the chart. — machineghost, Sep 27 '16 at 23:22
@machineghost: That half works - it does print the "99.0" literally, but it then completely ignores the other value ("1.0") — B. Clay Shannon-B. Crow Raven, Sep 27 '16 at 23:27
As a side note, it seems like chart.js in general has some issues with decimal precision: https://github.com/chartjs/Chart.js/issues/58 — machineghost, Sep 27 '16 at 23:27
So, how is the data being displayed with the % after it? seems you have some callback or something to do that ... perhaps toFixed() there will help - as you haven't even shown how your creating the chart it's pretty much guess work on my part — Jaromanda X, Sep 27 '16 at 23:28
@Jaromanda X" In an OnDraw event or so, I simply append "%" to the value being drawn on the bar. Maybe I'll have to check if the decimal portion is 0 and append a ".0" in that case (prior to the "%"). — B. Clay Shannon-B. Crow Raven, Sep 27 '16 at 23:30
`in an OnDraw event` - I can't find OnDraw in the chart.js documentation - can you show the code in your question — Jaromanda X, Sep 27 '16 at 23:33
@JaromandaX: It's actually afterDraw, sorry; adding as an Update. — B. Clay Shannon-B. Crow Raven, Sep 29 '16 at 16:22

score 3 · Accepted Answer · edited May 23 '17 at 12:15

As mentioned by @machineghost in his comment, this is a known issue.

But you have still several workarounds to make it work :

Simply change your data into string : (fiddle link)

For example you data will be like this :

{
    label: "Price Compliant",
    backgroundColor: "rgba(34,139,34,0.5)",
    hoverBackgroundColor: "rgba(34,139,34,1)",
    data: ["99.0", "99.2", "99.4", "98.9", "99.1", "99.5", "99.6", "99.2", "99.7"]
}

Chart.js will handle it as a classic string and then won't remove the ".0".

Add the ".0" in your code, using plugins : (fiddle link)

A small condition (using ternaries) can make it easy to write & read :
```
ctx.fillText(dataset.data[i] + (Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x + model.base) / 2 ), model.y + (model.height / 3));
```
It is basically checking if the value is an integer (no decimals) and add a ".0" in the string if it is.
Both codes will give you the following result :

How can I force the ".0" portion of a value to explicitly display (Chart.JS)?

UPDATE

1 Answers1