Chartjs-ChartJS Bar Chart is too short

by

0👍

✅

You could explicitly define the height on the canvas.

<canvas id="kycChart" height="400"></canvas>

const KYCChart = new Chart('kycChart', {
  type: 'bar',
  data: {
    labels: ["Approved", "Denied", "Pending"],
    datasets: [{
      data: [65, 59, 80],
      backgroundColor: [
        'rgba(203, 55, 55, 0.2)',
        ' rgba(39, 187, 101, 0.5)',
        'rgba(255, 171, 45, 0.1)'
      ],
      borderColor: [
        ' rgba(203, 55, 55, 1)',
        'rgba(34, 195, 107, 1)',
        'rgba(255, 171, 45, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          color: 'rgb(33,34,37)'
        }
      }
    },
    plugins: {
      legend: {
        position: 'bottom',
        labels: {
          usePointStyle: true,
          pointStyle: 'circle',
          boxWidth: 6,
          generateLabels: (chart) => {
            return chart.data.labels.map(
              (label, index) => ({
                text: label,
                fillStyle: chart.data.datasets[0].backgroundColor[index],
                strokeStyle: chart.data.datasets[0].backgroundColor[index],
              })
            )
          }
        }
      },
      title: {
        display: true,
        align: "start",
        color: "#ffff",
        font: {
          size: 18,
          weight: 700,
          lineHeight: 2
        },
        padding: {
          bottom: 20
        }
      }
    }
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="kycChart" height="400"></canvas>

Leave a comment