How to remove left and right padding from the canvas/chart?
Question
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>
1 answers
solution1
1 2019-05-26 07:49:31
One solution would be to use a second container.
The canvas seems to resize based on its parent width.
<body>
<div class="container">
<div class="canvas-container">
<canvas id="chartJSContainer" width="500" height="200"></canvas>
</div>
</div>
</body>
* {
padding: 0;
margin: 0;
}
body {
background-color: #1c2128;
}
.container {
width: 490px;
overflow: hidden;
margin: 20px auto;
}
.canvas-container {
width: 500px;
background-color: #ffffff;
height: 200px;
margin-left: -5px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.