07b2acc08ebcaebe02d8d6b4d44aa4743b1e5c432f7b14bcd9b2d0dc61a02ce7885bbf2f2ec98a9847eb0a00d231cf5cfd74f1e1e223306d01bad90c0d24b5 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. # Positioning
  2. ## Anchoring
  3. An anchor point is defined by an orientation (normalized) vector and a position on the data element. The orientation depends on the scale type (vertical, horizontal or radial). The position is calculated based on the `anchor` option and the orientation vector.
  4. Supported values for `anchor`:
  5. - `center` (default): element center
  6. - `start`: lowest element boundary
  7. - `end`: highest element boundary
  8. ![chartjs-plugin-datalabels](assets/anchor.png)
  9. ## Alignment and Offset
  10. The `align` option defines the position of the label relative to the anchor point position and orientation. Its value can be expressed either by a number representing the clockwise angle (in degree) or by one of the following string presets:
  11. - `start`: the label is positioned before the anchor point, following the same direction
  12. - `end`: the label is positioned after the anchor point, following the same direction
  13. - `center` (default): the label is centered on the anchor point
  14. - `right`: the label is positioned to the right of the anchor point (0°)
  15. - `bottom`: the label is positioned to the bottom of the anchor point (90°)
  16. - `left`: the label is positioned to the left of the anchor point (180°)
  17. - `top`: the label is positioned to the top of the anchor point (270°)
  18. The `offset` represents the distance (in pixels) to pull the label *away* from the anchor point. This option is **not applicable** when `align` is `center`. Also note that if `align` is `start`, the label is moved in the opposite direction. The default value is `4`.
  19. ![chartjs-plugin-datalabels](assets/align.png)
  20. ## Rotation
  21. This option controls the clockwise rotation angle (in degrees) of the label, the rotation center point being the label center. The default value is `0` (no rotation).
  22. ## Visibility
  23. The `display` option controls the visibility of labels (`true` to show all labels, else `false` to hide all labels). This option is [scriptable](options.md#scriptable-options), so it's also possible to show/hide a few labels:
  24. ```javascript
  25. display: function(context) {
  26. return context.dataIndex % 2; // display labels with an odd index
  27. }
  28. ```