ChartArea

ChartArea in Chart js

The chartArea in Chart js covers the square or rectangle where the chart is being drawn. Many considers the canvas tag as the part of the chartArea however this is not the case.

Difference between canvas and chartArea in chart js

The canvas contains more than the chartArea as it also covers the legend, the title, the subtitles, the scales and scales titles. Which are not part of the chartArea but heavily impacts the size of the chartArea.

The chartArea is the space where the chart officially starts. You can spot this easily in the bar or line chart. The grid lines, the x-axis and y-axis lines defines the chartArea nicely. The canvas is nested within a div and has the maintainAspectRatio active. Which is a default state.

Why this is very important. The chartArea is the most flexible and will shrink if need to make everything else fit. This happens especially if the maintainAspectRatio is set on true. Which is the case for most because it is set on true by default.

This explains often why many people like to reduce the scales text or truncate them to avoid impact on the chartArea. They want to know how to truncate scale labels in chart js so the chart maintains a proper size.

Why know the chartArea in Chart js matters?

Well, knowing this helps us to create for example arbitrary lines in Chart js.

These are nice lines on the chartArea that would indicate something. Secondly, once you understand the chartArea you will be able to go deeper in drawing on the chart and customize items. Getting the exact x and y coordinates on the chartArea and where to draw or do something. As they are all connected to each other.

How to create an arbitrary line with text in Chart js

This video shows and refers to chartArea including the top, bottom, left and right pixel coordinates of the Chart.js