Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?

1
votes

I am using Bar chart of Chart.js which is creating unwanted spacing on left and right side. I have tried to remove that by making canvas width and height to 100% as mentioned chartjs-is-there-any-way-to-remove-blank-space-around-pie-charts here. But it's not removing in my case.

I also need to remove horizontal line below the chart. Is there any way to do so?

enter image description here

Here's what i tried:

    //Bar Chart
    var bar = document.getElementById("bar-canvas");
    var barChart = new Chart(bar, {
      type: 'bar',
      data: {
        labels: ["Jackets", "Pants", "Headwear", "Shirts", "Footwear"],
        datasets: [{
          label: 'Dataset 1',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF'
          ],
          borderColor: [
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF'
          ],
          borderWidth: 1
        },
        {
          label: 'Dataset 2',
          data: [20, 19, 10, 52, 2, 13],
          backgroundColor: [
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE'
          ],
          borderColor: [
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE'
          ],
          borderWidth: 1
        }]
      },
      responsive: true,
      options: { 
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function(tooltipItem) {
              return tooltipItem.yLabel;
            }
          }
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: {
              color: "rgba(0, 0, 0, 0)"
            },
            ticks: {
              fontColor: '#0071bc'
            },
            barThickness: 110
          }],
          yAxes: [{
              stacked: true,
              gridLines: {
                color: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: false
              },
              ticks: {
                display: false
              }
            }
          ]
        }
      }
    });
<canvas id="bar-canvas"></canvas>
1
javascripthtmlcsschart.jsbar-chart
stackoverflow.com/questions/38593123/… - Dinesh Kumar DJ
stackoverflow.com/questions/39879445/… - Dinesh Kumar DJ
refer the above links - Dinesh Kumar DJ
Making "display:false" in yAxes is hiding xAxes line in my case.Solved one issue but don't know why it's not working on xAxes directly. And the space is not removing as mentioned in 2nd link. - Tanvir Rahman

1 Answers

0
votes

Managed to remove the bottom line, but somehow could not remove the padding, - commented an area, which removes a little bit, but then you lose the ticks (which is obviously bad)

Just adding a fiddle, hope it helps at least somehow!

https://jsfiddle.net/aokzss3c/1/

..xAxes..
ticks: {
    display: true, // removing this
    fontColor: '#0071bc',
},