Menu
I am dealing with a chart that has unwanted spacing on left and right side. I've been trying to remove it with no luck, and I don't know what else to do now. I've read the documentation thoroughly, but can't seem to find a solution. Is this possible to do? Let me know if more info is necessary, and I'll supply it.
Edit:
<div> <canvas id="chart-gender"></canvas> </div> <script> var gender_data = [10, 35]; var graph_gender_preset = { labels: ["Female", "Male"], datasets: [ { data: gender_data, backgroundColor: ["#0fa0e3", "#ff3549"] } ] }; var ctx3 = $("#chart-gender"); var chart_gender = new Chart(ctx3, { type: 'doughnut', data: graph_gender_preset, options: { responsive: true, title: { display: false, position: "top", fontStyle: "bold", fontSize: 0, fullWidth: false, padding: 0 }, legend: { display: false, position: "top", fullWidth: false, labels: { display: false, usePointStyle: true, fontSize: 15, fontStyle: "bold" } } } }); </script> 
338
The white space/line between the slices is the border, to remove it set borderWidth: 0. Alternatively, you can consider using the solid-gauge instead, that is far closer to your examples.
The plugin allows you to enhance your chart. For example zoom in or pan on to your chart. But also change the background color. Using setBackgroundColor(color); //updates the background color of the chart .
The problem is not the doughnut, it is the canvas in which it is used.
The doughnut has to use a quadratic box, otherwise it would look like an ellipsis. So if you change the size of the canvas and make it quadratic you won't have any borders anymore.
Here is an JS Fiddle example.
<table border="1"> <tr> <td> First </td> <td> <canvas width="100%" height="100%" id="myChart"></canvas> </td> <td> Third </td> </tr> </table> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
