Chartjs-How to get chart size (without labels) with chart.js?

by

0👍

You can check the chartArea property that is available in the chart context. This property has the width and height of the area where the chart itself is being drawn.

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

console.log('height: ', chart.chartArea.height);
console.log('width: ', chart.chartArea.width)
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

Your own code with the background colored pink: https://codepen.io/leelenaleee/pen/OJxWoPe

Official example on using an image as background: https://www.chartjs.org/docs/master/configuration/canvas-background.html#image

Leave a comment