Line Chart - line on the edge get cut

[showenx]

Expected Behavior

line chart to display the whole line with same width

Current Behavior

seems line chart displays a 1 px line on the top and bottom in chart.js 2.5

Possible Solution

Steps to Reproduce (for bugs)

1. example of the issue (chart.js 2.5) can be found in https://jsfiddle.net/e8n4xd4z/118/, both top and bottom width are thinner than expected.

2. previous version (chart.js 2.4) is working fine https://jsfiddle.net/e8n4xd4z/117/,

Context

Environment

• Chart.js version: 2.5
• Browser name and version: Chrome 55, IE 10
• Link to your project:https://jsfiddle.net/e8n4xd4z/118

[etimberg]

The problem here is the clipping that is implemented for points outside the chart area. I think we can just add the lineWidth/2 to the edges here https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.line.js#L288 instead of passing area directly but that could cause other problems.

I'm happy to look at a PR for this but I can guarantee that we could merge anything since it would break other cases. As a workaround, just make the top of the y axis a bit higher so that the line isn't at the edge of the chart

[showenx]

thanks for the quick response, the work around is working fine on max values: https://jsfiddle.net/e8n4xd4z/119/

any suggestions on the min values? if we don't want to see minus on yAxes

[golpesareirooni]

this bug not fixed yet in 2.6 ?

[nyammy]

Not yet. I hope this will be fixed in 2.7.

[nyammy]

This seems to be fixed in 2.7.0.
Thank you developers.

[fakiolinho]

Unfortunately, the issue is still there for 2.7.0 Here is an example https://jsfiddle.net/fakiolinho/m5xoa7jq/7/. I get we can tackle it for max values but i cannot figure out how to overcome this for min ones:

[showenx]

the line seems working fine in v2.4 https://jsfiddle.net/e8n4xd4z/1008/
maybe restate back the changes?

[fakiolinho]

Hmm, yeah I used also v2.4 in my example and lines look pretty solid over there

[eugeneJava]

On my observation - the issue is reproducible only when max data value is an integer value(1,2...10... ). If max is float (e.g 10.1) - no cut and some extra tick is added - which is fine

P.S. even more precise - reproduces when integer is division of 10 and values in range 1-9 (e.g 1,2,3,...10,20..60,100,340 ...)

[eugeneJava]

And also it reproducible when a chart contains a title

[chdsbd]

I'm experiencing this issue with 2.7.1, when I have lines at the min and max.

[jacktuck]

@chandruxp same here. I also tried the master branch. Any reliable workaround you have found?

[GihanWijesingheCreative]

I am also having the same issue when the points are at min or max. Also same thing happens when the points are close to min or max and the range is high

.

[andrewcallahan]

I'm experiencing the same issue with scatter points - they just don't show up when they are at the max value (although they do show up fine when they are at the min value).

[stigvanbrabant]

Any update / fix for this? Still experiencing this issue with version 2.7.2, and i'm not able to find a decent solution.

[jacktuck]

@stigvanbrabant We just use 2.4 for now as there is no other workaround

[andrewcallahan]

Looks like the 2.72 update solved this issue for scatter points at the max value

[hanspagel]

We're on 2.7.2 and the max values are still a thin line. :(

[atomkirk]

Here's how I fixed it:

            ticks: {
              beginAtZero: false,
              min: 0,
              max: 5.03,
              stepSize: 1,
              padding: 10,
              fontFamily: 'Karla, sans-serif',
              maxRotation: 0,
              callback: function(value, index, values) {
                if (value !== 5.03) {
                  return values[index]
                }
              }
            },

slightly increase the max and then omit it in the callback otherwise you get slightly offset duplicate top lines

[Techn1x]

I'm on 2.7.3 and still getting this issue in two places.

1. Lines and points being cut off (I have the axis set to automatically determine a max point based on the data maximum)
   

2. Annotations being cut off https://github.com/chartjs/chartjs-plugin-annotation
   

I have tried setting a blank title, and also tried adding layout padding to the top, as suggested above. Neither worked.

Proof I'm on 2.7.3.......

[cylosh]

Also my problem #4202 (comment) was not fixed by upgrading to 2.7.3, even with the layout.padding set I´m hitting the same issue as before.

[ProgrammerNomad]

Here's how I fixed it:

            ticks: {
              beginAtZero: false,
              min: 0,
              max: 5.03,
              stepSize: 1,
              padding: 10,
              fontFamily: 'Karla, sans-serif',
              maxRotation: 0,
              callback: function(value, index, values) {
                if (value !== 5.03) {
                  return values[index]
                }
              }
            },

slightly increase the max and then omit it in the callback otherwise you get slightly offset duplicate top lines

Your method work properly and it working on every version. just need to use max value + 1
Thanks

[ogradye]

Having same issue on version 3.3.0

[zekageri]

Same for me too. I got cut off points on every side of my chart.

[kurkle]

@ogradye @zekageri this issue has been fixed. If you have a similar issue with latest version, please open a new issue and provide a test case that reproduces it.

[zekageri]

Strange. I have set the padding in different ways and i'm using the cdn version from the official site whcih is 3.3.0 and i still got the points cut off

[showenx]

although we are losing a bit "curve" for the line chart, but this bug fix is looking good now

https://jsfiddle.net/yxtfd8g6/

[zekageri]

I'am using this cdn

With this config:

const shutGraphConfig = {
    responsive: true,

/* Tried with : 
layout: {
        padding: {
            left: 10,
            right: 10,
            top: 10,
            bottom: 10
        }
    },
*/
    layout: {
        padding: 10
    },
    plugins: {
        tooltip: {
            callbacks: {
                title: function (context) {
                    const timeString = new Date(context[0].parsed.x).toLocaleTimeString(navigator.language, {
                        hour: '2-digit',
                        minute: '2-digit'
                    })
                    return timeString
                }
            }
        },
        dragData: {
            round: 0,
            dragX: true,
            showTooltip: true,
            onDragStart: function (e, datasetIndex, index, value) {
            
                currPointInfo.now   = value.x;

                if(shutGraph.data.datasets[0].data[index-1]){currPointInfo.prev  = shutGraph.data.datasets[0].data[index-1].x;}
                else{currPointInfo.prev  = X_AXIS_PROPS.MIN_VALUE - X_AXIS_PROPS.TRESHOLD_SEC;}

                if(shutGraph.data.datasets[0].data[index+1]){currPointInfo.next  = shutGraph.data.datasets[0].data[index+1].x;}
                else{currPointInfo.next  = X_AXIS_PROPS.MAX_VALUE + X_AXIS_PROPS.TRESHOLD_SEC;}
            },
            onDrag: function (e, datasetIndex, index, value) {
                 e.target.style.cursor = 'grabbing'
                // allow dragging within 10 minute range
                const coeff = 1000 * 60 * 10;
                const rounded = Math.round(value.x / coeff) * coeff

                shutGraph.data.datasets[datasetIndex].data[index].x = rounded
                shutGraph.update('none')
            },
            onDragEnd: function (e, datasetIndex, index, value) {
                e.target.style.cursor = 'default'
                if( !dataAllowed(value.x) ){
                    console.error("Nem lehet nagyobb mint a következő és nem lehet kisebb mint az előző!");
                    console.info("Drag Value: ", convertToTimeString(value.x) )
                    shutGraph.data.datasets[0].data.splice(index,1);
                    shutGraph.update();
                }else{
                    console.info("Drag Value: ", convertToTimeString(value.x) );
                }
            },
        },
    },
    scales: {
        x: {
            type: 'linear',
            min: X_AXIS_PROPS.MIN_VALUE,
            max: X_AXIS_PROPS.MAX_VALUE,
            ticks: {
                count:50,
                autoSkip: true,
                callback(v) {
                  // round to 10 min steps
                    const coeff = 1000 * 60 * 10;
                    const rounded = Math.round(v / coeff) * coeff
                    return new Date(rounded).toLocaleTimeString(navigator.language, {
                        hour: '2-digit',
                        minute: '2-digit'
                    })
                }
            }
        },
        y: {
            beginAtZero: true,
            steps: 1,
            stepValue: 1,
            max: 100
        },
    }
};

var shutGraph = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [],
            label: 'Százalék',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            tension: 0,
            stepped: true,
            pointHitRadius: 25,
        }],
    },
    options: shutGraphConfig
});

Result is:

[zekageri]

JSFIDDLE

[showenx]

not sure what's causing it, but this could be the fix: https://jsfiddle.net/0ysqrug7/

[zekageri]

The thing is that i must specifi the max point because the user can drag the data with this plugin:

dragDataPlugin

And if the max data is not specified, the user can drag to infinite

[zekageri]

Nah. It's working but the start and the end points are still cut off. FIDDLE

[kurkle]

By default, chart.js v3 clips at min/max values. You could also configure it, if that does not suit your use case:
https://www.chartjs.org/docs/latest/charts/line.html#general

BTW: clip: false is also valid option, but that does not seem to be mentioned in docs.

[showenx]

not sure how these min & max are handled, but if you don't set them, they are looking good

https://jsfiddle.net/md4fs9np/

[zekageri]

I must controll the x axis to 00:00 to 23:59 or 00:00. These are hour and min in a day.
I can't let the user drag a point before 00:00 and after 23:59.
The y axis is the same. Min must be between 0 and 100.

So i must set min and max values to both axis. In your last fiddle, The user could drag a point before 00:00. That would break the system.
If i don't set the max value of the Y axis, its fine as i can see, but the x axis is still clipped

[zekageri]

By default, chart.js v3 clips at min/max values. You could also configure it, if that does not suit your use case:
https://www.chartjs.org/docs/latest/charts/line.html#general

BTW: clip: false is also valid option, but that does not seem to be mentioned in docs.

Oh. clip:false, is working for every side. Thank you kurkle!

[josh231101]

By default, chart.js v3 clips at min/max values. You could also configure it, if that does not suit your use case:
https://www.chartjs.org/docs/latest/charts/line.html#general
BTW: clip: false is also valid option, but that does not seem to be mentioned in docs.

Oh. clip:false, is working for every side. Thank you kurkle!

Where should this be placed? Inside the ticks object??

[josh231101]

** MY SOLUTION **
I've been searching for hours and I can't believe I only had to delete the min and max, thatś it.
Remove from your yAxes : [{ max: 100, min: 0, ....} ] remove max and min, and yup. It worked

[baptistebisson]

clip:false is the correct solution ! Add it to your dataset.
Perfect when using scale.y.max and having a lot of values at this max value.

Before:

After: