Line chart line thickness when zero

[jasonlynx]

Somewhat picky but on a line chart a line that reaches zero should be the same thickness the entire way across the chart regardless of the value. The line once it reaches the bottom/zero looks somewhat hidden or cut off until it goes above zero. See below:

[kurkle]

What version are you using?

[jasonlynx]

2.7.2

[kurkle]

This was fixed in #5321 (2 years ago) and included in 2.7.3

[mbont]

Still having this issue in the latest version when hiding the x-y axis and legend (bottom and top line are cut off).

See the following example:
https://jsfiddle.net/drc4z9wj/1/

Any fix for this?

[kurkle]

@mbont your fiddle uses Chart.js 2.3.0.

[mbont]

@kurkle Updated fiddle with latest Chart.js 2.9.1 version (not available on cdnjs yet)

[kurkle]

@mbont ok, in that case the canvas edge is limiting the drawing. You need to add some padding to allow chartArea overflow:

options: {
      layout: {
      	padding: 1
      }
}

[mbont]

@kurkle Thanks, that works!

[nishantprajapti]

@kurkle Please see this https://jsfiddle.net/nishantprajapati/7hn2vcju/1/ I am able to re-produce this issue in latest release 2.9.3. Can you help us out with a solution ? Or Let us know if it will be a part of next release.

The image attached is a real use case where 2 different chart use the same chart JS (2.9.3 version)
code still while all the value are at the highest mark of the chart, thickness of the line changes which looks inconsistent.

Thank you,
Nishant Prajapati

[kurkle]

@nishantprajapti in that fiddle, the canvas edge is limiting, so padding fixes it.

It does not seem like that is the case with your real use case though.
Did you configure clip or is it using default? Does clip: false (per dataset) change the behavior?
Are you using any plugins?

[nishantprajapti]

Does clip: false (per dataset) change the behavior?

Thank you so much for the help @kurkle . It work for me but curious to know something. When i set the value to false. It work but when i gave it properties like clip: {left:2,top:0} and so on I did not notice any change. How does it property actually work ?

[kurkle]

It looks like there is a bug, you have to define all edges for it to work: https://jsfiddle.net/zchb3L4w/

[nishantprajapti]

@kurkle in that what should we keep the default values for {top, left ,bottom,right} so that no new bug is encoutered and also the above issue mentioned by me is also solved.