javascript - Remove padding from chartJs horizontal bar chart

Question

Hey :) thanks in advance for helping me out on this issue.

I have a horizontal chart in ChartJs with some dummy info. I currently want to line it up with the statistic above it. In ChartJs the charts get rendered inside a <canvas> tag. I want to remove the spacing in the chart. I'm assuming this is padding but its not on the canvas it's within the chart itself. I've read up on the docs and tried a few of the choices.

Just some extra info, I customized the chart and it now looks like this:

• Removed the legend
• Flipped the labels
• Changed the label colour
• Removed the grid lines

HTML: <canvas id="myChart" width="400" height="150"></canvas>

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ['1', '2'],
            datasets: [{
                label: 'Money in',
                data: [5, 19],
                backgroundColor: [
                    'rgb(0,51,160)',
                    'rgb(26,121,191)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: 'white',
                        display: true,
                        position: top,
                        mirror: true,
                        beginAtZero: true,
                        fontSize: 17,
                        padding: -9,
                        z: 1
                    },
                    gridLines: {
                        display: false
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        beginAtZero: true,
                        display: false
                    }
                }]
            },
            legend: {
                display: false
            }
        }
    });

标签： javascriptjquerycsschart.js

Answer 1

您可以定义layout负左填充如下：

options: {
    layout: {
      padding: {
        left: -10
      }
    },
    ...

请查看以下代码片段，其中图表画布用边框定义，以强调与前面文本的对齐。

var myChart = new Chart(document.getElementById('myChart'), {
  type: 'horizontalBar',
  data: {
    labels: ['1', '2'],
    datasets: [{
      label: 'Money in',
      data: [5, 19],
      backgroundColor: ['rgb(0,51,160)', 'rgb(26,121,191)'],
      borderWidth: 0
    }]
  },
  options: {
    layout: {
      padding: {
        left: -10
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          fontColor: 'white',
          mirror: true,
          beginAtZero: true,
          fontSize: 17,
          padding: -9,
          z: 1
        },
        gridLines: {
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {          
          beginAtZero: true,
          display: false
        }
      }]
    },
    legend: {
      display: false
    }
  }
});

canvas{ 
  max-width: 300px;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<p>Text here</p>
<canvas id="myChart" width="400" height="150"></canvas>