How to only draw the graph and the Xaxis gridlines using chart.js

Question

I am trying to draw a graph, but the left and the bottom corners keep getting this blank margin. How do I get rid of that? I managed to erase them, but at the same time it erases the gridLines for the X axis. I want to keep the Xaxis gridlines.

Notice that I also want that border around the graph. Didn't find a way to draw the border using the chart.js.

The white spaces are very evidient, right on the bottom and on the left, spacing the gray border away. You can see it on the image:

I tried disabling the ticks display.

My chart so far:

var myChart = new Chart(modalChart, {
          type: 'bar',

          data: {
              labels: ['Total enviado', 'Total recebido', 'total aberto', 'total convertido'],
              datasets: [{
                  backgroundColor: my_gradient,
                  data: [totalEnviado,totalRecebido, totalAberto,totalConvertido]
              }]
          },
          options: {
              legendCallback: function(chart){
                  var text = [];
                  text.push('<div class = "modal-graph-container">');
                  text.push('<div class = "modal-graph-inner">');
                  for (var i=0; i<chart.data.labels.length; i++) {
                      console.log(chart.data.datasets[i]); // see what's inside the obj.
                      text.push('<div class = "modal-graph-child">');
                      text.push('<span style="">' + chart.data.labels[i] + '</span>');
                      console.log(chart.data.labels[i]);
                      text.push('</div>');
                  }
                  text.push('</div>');
                  text.push('</div>');
                  return text.join("");
              },
             legend: {
                  display:false
              },
              scales: {
                  xAxes:[{
                      display: true,
                      categoryPercentage:1.0,
                      barPercentage:1.0,
                      ticks: {
                          beginAtZero: true,
                          display:false
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          beginAtZero:true,
                          display: false
                      },
                      gridLines:{
                        display:false
                      }
                  }]
              }
          }
      });

Notice that I also want that border around the graph. Didn't find a way to draw the border using the chart.js only. This gray border around the graph and the gray borders separating the bars are very important.

Answer 1

You need to set the drawTicks option to false for both the x- and y-axis:

gridLines: {
  drawTicks: false
}

Working example:

 var modalChart = document.getElementById("chart"), totalEnviado = 4, totalRecebido = 3, totalAberto = 2, totalConvertido = 1, my_gradient = "orange"; // -- var myChart = new Chart(modalChart, { type: 'bar', data: { labels: ['Total enviado', 'Total recebido', 'total aberto', 'total convertido'], datasets: [{ backgroundColor: my_gradient, data: [totalEnviado, totalRecebido, totalAberto, totalConvertido] }] }, options: { legendCallback: function(chart) { var text = []; text.push('<div class = "modal-graph-container">'); text.push('<div class = "modal-graph-inner">'); for (var i = 0; i < chart.data.labels.length; i++) { console.log(chart.data.datasets[i]); // see what's inside the obj. text.push('<div class = "modal-graph-child">'); text.push('<span style="">' + chart.data.labels[i] + '</span>'); console.log(chart.data.labels[i]); text.push('</div>'); } text.push('</div>'); text.push('</div>'); return text.join(""); }, legend: { display: false }, scales: { xAxes: [{ display: true, categoryPercentage: 1.0, barPercentage: 1.0, ticks: { beginAtZero: true, display: false }, gridLines: { drawTicks: false } }], yAxes: [{ ticks: { beginAtZero: true, display: false }, gridLines: { display: false, drawTicks: false } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <div style="border:1px solid #000"> <canvas id="chart"></canvas> </div>