Padding
The empty area between the canvas’s edges and the chart elements is known as padding in Chart.js. It can be used to provide a border around the chart or to make sure that none of its components are placed too close to the canvas’ edges.
Padding can be applied in different formats as follows.
- Number: The padding value is a number that is applied to all sides (top, bottom, left, right).
- {top, left, right, bottom} object: The padding value is an object like the “right” property defines the right padding, the “left” property defines the left padding, and so on.
- {x, y} object: This padding value is a shorthand for defining left/right and top/bottom to the same values. If {x: 10px, y: 5px } defines left and right with 10px of padding and top and bottom having 5px of padding.
Charts.js General
Chart.js General Accessibility ensures the accessibility rendered on user-provided canvas elements. Users can add accessibility features like ARIA attributes or fallback content within the canvas elements. This ensures that the content of the canvas, and chart information is accessible to all the user who relies on assistive technologies.
Accessible canvas
elements
role
="img":
indicates that the canvas should be treated as an image, suitable for contexts where the canvas represents graphical content.aria-label:
provides a text description of the content or purpose of the canvas, enhancing accessibility for users who rely on screen readers.
Contact Us