Summary

The outside prop is now available in the RectAnnotation component to allow rendering annotations outside of the chart within the axis tick gutter.

Details

Using RectAnnotation with outside prop regardless of rotation or groupId correctly renders the annotation within the tickLine.size gutter.

<RectAnnotation
  {...props}
  outside={true}
  outsideDimension={5}
/>

Limitations:

• Only renders outside for full-height or full height annotations such that only x coordinates or only y coordinates are specified by the user.
• Only renders with tickLine theme is visible and non-zero strokeWidth. This the outside annotation height/width is set by the outsideDimension prop which defaults to the tickLine.size for the respective axis.
• Outside annotations will ALWAYS render even when not suitable, such as when all axes are hidden. It is up the the user to configure the axis and annotation in a suitable way.

Demo

Issues

closes #928 allowing outside rect annotations
fix #1205 causing issues with groupId when using the default height/width

Checklist

• The proper chart type label was added (e.g. :xy, :partition) if the PR involves a specific chart type
• The proper feature label was added (e.g. :interactions, :axis) if the PR involves a specific chart feature
• Whenever possible, please check if the closing issue is connected to a running GH project
• Any consumer-facing exports were added to packages/charts/src/index.ts (and stories only import from ../src except for test data & storybook)
• This was checked for cross-browser compatibility
• Proper documentation or storybook story was added for features that require explanation or tutorials
• Unit tests were updated or added to match the most common scenarios