Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chart does not render if data contains value of 0 when using logarithmic scale #2966

Closed
barsh opened this issue Jul 13, 2016 · 13 comments
Closed

Comments

@barsh
Copy link

barsh commented Jul 13, 2016

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]
        }]
    }

image

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]
        }]
    }

image

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

@theawesomenayak
Copy link
Contributor

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
Copy link
Author

barsh commented Jul 19, 2016

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

@theawesomenayak
Copy link
Contributor

@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
Copy link
Author

barsh commented Jul 19, 2016

@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:
image

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
Copy link
Contributor

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
Copy link
Contributor

roicos commented Jul 19, 2016

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
Copy link
Author

barsh commented Jul 20, 2016

@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
Copy link
Author

barsh commented Jul 20, 2016

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)
image

After

(problem: y-axis scale ends at 19,999 instead of 10,000)
image
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
Copy link
Contributor

roicos commented Jul 22, 2016

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

@barsh
Copy link
Author

barsh commented Jul 22, 2016

@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.

image

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

@crwh05
Copy link

crwh05 commented Feb 16, 2017

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.

image

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

@roicos
Copy link
Contributor

roicos commented Feb 16, 2017

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

@songololo
Copy link

songololo commented Aug 19, 2017

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

jcopperfield added a commit to jcopperfield/Chart.js that referenced this issue Nov 1, 2017
 - issue chartjs#3917: Logarithmic Scale Tick Bug for values of 0
 - issue chartjs#4380: LogLog plots are impossible (0, 0)
 - issue chartjs#2966: chart does not render if data contains value of 0 when using logarithmic scale
exwm pushed a commit to exwm/Chart.js that referenced this issue Apr 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants