Add dashed support for legends

[mollerjorge]

What does this implement/fix?

1. We need to add support for showing a dashed line in the legend. The use case is for benchmarks where the Median line is dashed, so the legend should follow the same pattern.
2. Fixed Annotations textAnchor property, it shouldn't be left middle right but start middle end
3. Fix text alignment on annotations: Should be centered

Before:

After:

🎩 Tophatting:

1. Annotations text alignment: https://x5mqehaaczjinobf.tunnel.shopifycloud.tech/?path=/story/polaris-viz-charts-linechart--annotations
2. Dashed legend in line chart relational: https://x5mqehaaczjinobf.tunnel.shopifycloud.tech/?path=/story/polaris-viz-charts-linechartrelational--default

Before merging

• Check your changes on a variety of browsers and devices.

• Update the Changelog's Unreleased section with your changes.

• Update relevant documentation, tests, and Storybook.

• Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
polaris-viz-core-cjs	61.73 KB (0%)	1.3 s (0%)	688 ms (-19.58% 🔽)	2 s
polaris-viz-cjs	223.94 KB (+0.03% 🔺)	4.5 s (+0.03% 🔺)	2.2 s (+27.86% 🔺)	6.7 s
polaris-viz-esm	181.37 KB (+0.03% 🔺)	3.7 s (+0.03% 🔺)	1.2 s (+0.08% 🔺)	4.8 s
polaris-viz-css	5.69 KB (0%)	114 ms (0%)	389 ms (-31.06% 🔽)	503 ms
polaris-viz-esnext	188.28 KB (+0.04% 🔺)	3.8 s (+0.04% 🔺)	1.3 s (-22.89% 🔽)	5.1 s

[mollerjorge]

using metadata for this looks like a good fit after checking others like:

metadata: {
   relatedIndex: 2,
   areaColor: 'rgba(218, 182, 242, 0.2)',
   legendLabel: '75th - 25th percentile',
},

[mollerjorge]

Thought of refactoring this a bit, it didn't feel like SeriesIcon should concern about wether if its a comparison or not, I think we should pass in the color and lineStyle instead and calculate those from the parents

[carysmills]

Code looks good to me except the changelog
Did not 🎩 as @envex has more context on this chart and would be good for him to have a quick look

[mollerjorge]

Code looks good to me except the changelog Did not 🎩 as @envex has more context on this chart and would be good for him to have a quick look

Thanks @carysmills ! I added a link to tophat so its easier now, and added a fix for annotations as well.

[mollerjorge]

these are valid values for textAnchor https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor#usage_notes