Chart.js: chart does not render if data contains value of 0 when using logarithmic scale

[barsh]

Here we have one red vote, renders correctly:

data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [1, 2, 3, 5, 2, 3]
        }]
    }

Here we have zero red votes, does not render:

data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [0, 2, 3, 5, 2, 3]
        }]
    }

http://codepen.io/barsh/pen/GqOzKA

[theawesomenayak]

It's simply because log(0) is undefined.

For #2967, log(1) has a value of 0, hence it doesn't appear on the chart.
For #2968, issue is same as this one.

@barsh Do you have a specific use case where you need a logarithmic scale with value of 0 and 1?

[barsh]

@sibennayak, yes I do. That's why I'm reporting it. :)

[theawesomenayak]

@barsh Can you tell us more about the scenario where you need to use a mathematically undefined number? Knowing the exact requirement might help us visualize the solution.

[barsh]

@sibennayak it's possible that I'm misunderstanding the purpose of logarithmic scales.

Here's the problem I'm trying to address. I'm showing a bar chart that displays the number of courses added each month. Some months, thousands of courses are imported (such is the case when we provision a new user). Most months, only a few courses are added. Some months, no courses are added. If one bar in the chart reflects that 10,000 courses were added and all the other bars reflect only a few courses were added, the slow months are all nearly zero-height. I was hoping to use logarithmic scales to emphasize the differences in the slow months.

Here's an example where the slow months appear equal in height and zero-height:

http://codepen.io/barsh/pen/xOYQWR

I was hoping logarithmic scales would reveal that a few courses were imported Feb-Jun and none for July.

[theawesomenayak]

There is no real way to handle 0 on a logarithmic scale. What you can do here increment all the values by 1 and then implement a custom tooltip function to show a actual values. Here's a fiddle https://jsfiddle.net/qz3vfu33/

[roicos]

Wouldn't it be better to allow user 0 values? I think we should consider this in calculations.
There are also no checks for division by zero in the code. It should be improved and I try to suggest the code solution soon.

[barsh]

@sibennayak thanks for the jsFiddle and suggesting increasing the data values by 1 and then showing a custom tooltip. That helped, but you were missing one key ingredient. It needs a custom yAxes too or all the values are off by one. Here's a fiddle that includes the custom yAxes:
https://jsfiddle.net/barsh/qz3vfu33/2/

[barsh]

Thanks to @sibennayak I was able to get pretty close to something acceptable, but it just doesn't feel right... it shouldn't be this hacky. I had to increase all data values by 1, then customize the tooltips to decrement the data value and customize the y-axis to decrement the data value.

Before

(problem: Feb - July appear to be zero)

After

(problem: y-axis scale ends at 19,999 instead of 10,000)

http://codepen.io/barsh/pen/EyEVBk

The problem that remains is this: incrementing the data values by 1, throws off the y-axis which should end at 10000 but ends at 19999 (see screenshot above).

@roicos I'm all for a better solution if you can come up with one.

[roicos]

@barsh Please, set 0 values to null like this data: [0.2, 100, null, 17000, 0.003]

[barsh]

@roicos, using null instead of zero, helps but still in the chart below there was 1 vote in June and 0 votes in Jul, but you cannot deduce this from the looking at the chart.

http://codepen.io/barsh/pen/AXaBGW

[crwh05]

For anyone coming across this if you set the borderWidth to something other than 0 you will see a little bit of the bar for a small value not shown like June in this example.

http://codepen.io/crwh05/pen/jyRMQV

[roicos]

Thanks for your comment, I'll try to pay attention to it.

[songololo]

This is an issue for me as well, and a lot of work for a workaround if editing custom tooltips and axes. For now I'm prepping the data with a function that replaces 0 with nulls