At the left and right side of the white container, you can see the graph isn't touching entirely on either side, there's a small amount of padding, and I cannot remove it at all.
I tried setting the layout.padding.left to a negative value, but that had no affect, however positive value does move the chart inward, same applies for top and bottom padding.
The only solution that I came up with was adding another div inside the container, and making the canvas width bigger and then using a left negative margin position it, making the line touch the .container corners. Like this jsfiddle but it's only a temporary solution.
var options = { type: 'line', data: { labels: ['', 'november', 'december', 'january', 'february', 'march', 'may', ''], datasets: [{ data: [80, 100, 100, 115, 119, 105, 100, 90], pointRadius: [0, 5, 5, 5, 5, 5, 5 , 0], pointHoverRadius: [0, 7, 7, 7, 7, 7, 7, 0], borderColor: '#3ca2e0', backgroundColor: 'rgba(60, 162, 224, .1)', lineTension: 0.6, // points pointBackgroundColor: '#3ca2e0', pointHoverBackgroundColor: '#3ca2e0', pointBorderColor: '#ffffff', pointHoverBorderColor: '#ffffff', pointBorderWidth: 2.5, pointHitRadius: 10, radius: 5, borderWidth: 2.5 }], }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { display: false, }, gridLines: { drawBorder: false, display: false, drawTicks: false } }], xAxes: [{ gridLines: { drawBorder: false, display: false }, ticks:{ fontColor: '#858585' } }] }, layout: { padding: { top: 10, } } }, } var ctx = document.getElementById('chartJSContainer'); new Chart(ctx, options);body { background-color: #1c2128 } .container { width: 500px; background-color: #ffffff; margin: 20px auto; height: 200px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script> <body> <div class="container"> <canvas id="chartJSContainer" width="500" height="200"></canvas> </div> </body>
