chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.92k stars 11.89k forks source link

zero values are shown, when "barThickness" is set #11714

Open TomTom-Labs opened 3 months ago

TomTom-Labs commented 3 months ago

Expected behavior

Values of "0" (zero) should not be shown in a bar chart.

Current behavior

When barThickness is set to a pixel width, a bar is drawn (very small hight, may just 1 pixel, but it's there)

This can be particularly problematic in a chart displaying numerous empty data samples with the 0-x-axis depicted in the middle of the diagram. With barThickness enabled, users might erroneously interpret these bars as representing small values.

Reproducible sample

https://codepen.io/TomTomDev/pen/zYXBmGo

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.2

Browser name and version

Chrome Version 122.0.6261.112

Link to your project

No response

JigmetAvinash commented 3 months ago

Thanks for posting an Issue And Helping the community ! Hey there @TomTom-Labs, We as a community thank you for posting about this issue, I have personally looked at all the code related to this and I am well going further and beyond trying to solve this issue. If you ever again feel helpless, please don't at all hesitate to ask the community.

As per my research, I have found some causes and bugs, which I will disclose in the next few working days/weeks as I am a little busy. However rest assured I will try to find the bug and fix it in the next commit

Signing Off, Avinash

JigmetAvinash commented 3 months ago

Solved : Issue #11714

There is an amazing news, @TomTom-Labs 🎊 I have been tinkering in the codePen you provided and found, if you want to get rid of that small bar, please don't put 0, instead pull null (empty space) Simply, I saw you put, data: [5, 0, 0] in your codePen, However, If you want to show NO data please put data: [5, ,0] instead.

Your revised code is given as a Code pen

If there is any further problem, please do not hesitate more further.

Fwd to Issue #11714 corresponding @TomTom-Labs

JigmetAvinash commented 3 months ago

@TomTom-Labs If your issue has been solved kindly mark it as Closed :)

TomTom-Labs commented 3 months ago

Hi @JigmetAvinash Thanks for the quick response. I was looking through the Chart.js code myself yesterday and found to code snippets around "barThickness". The workaround to replace all "0" in my dataset by "null" was implemented by me yesteday already.

But, sorry to say, I consider this as a workaround, not a solution.

After I process all my data to construct a valid chat.js dataset, I need a post-processing step to replace all 0-numbers by null. This isn't the best solution. I'm fine right now, as I have a workaround, but there might be others who run in the same issue.

But thanks for looking into it and document - in case someone searches for this issue.

JigmetAvinash commented 3 months ago

I am extremely sorry if this didn't seem to go upto the par 😢 However, I have read the code and seems like it is made 0 and for as a feature. Many people would like a small bar to show "0" in the graph and it's like that. However, I understand your concern, and it's a legitimate one. I have forwarded it to the same to the community tags Thanks again for the issue :)

TomTom-Labs commented 3 months ago

Hi @JigmetAvinash Please don’t get me wrong. I really appreciate all your help and all the hard work every developer is doing to contribute to an open-source project (which I’m also doing for other projects). The arguments here are only on a technical level, no personal offend intended.

Many people would like a small bar to show "0" in the graph and it's like that.

If I follow your argumentation that 0 is intended to have a 1-pixel bar (which sounds BTW: very strange to me) than the bug is in the opposite way – if I don’t set "barThickness", the 1-pixel line is missing. 😉 Also, I didn’t find any hint in the documentation about it. If 0 is really intended to draw a small bar than it should make it into the documentation.

JigmetAvinash commented 3 months ago

Absolutely! I will look into the docs and code soon, after my examinations