diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-data-value-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-data-value-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..e0cd666010 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-bar-chart-data-value-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..fecf24df41 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..61e8e8331f Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..f346cec316 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..9fcf013b8b Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..74d0a1d9c8 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..351f809bae Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..e0cd666010 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..e89edd2d49 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..fd84e7de8f Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-0-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..69f44fc8ab Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..429e9b0b7c Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..e7973bd034 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..6a56eab556 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..35557bffad Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..30702e3e60 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..aaaf16ae3b Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..662156f759 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..78f52125a5 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-180-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..0c5c4a1554 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..912796c25a Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..481d8e5cd1 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..fa64f27a27 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..4679a09632 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..80e4b26ad9 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..3f9bede754 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..dd8569f20d Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..a281980c64 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..88c8f66e07 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..3ebfebb8dc Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..759dcc2b58 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..942b5cde20 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..34537048a2 Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..e633ebd6ff Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..8a9ff86cdd Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..1403a0175b Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png new file mode 100644 index 0000000000..5fba615d6e Binary files /dev/null and b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-label-positioning-and-formatting-rotation-negative-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 1589276b84..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 9d771a7a74..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 66f73b851c..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 75b9f90115..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 2f4270c645..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index bb3cc570e9..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 1805b8ea16..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 379bb22c5f..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 9c49ef36c2..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-0-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 2b86e89f17..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 10141aabe9..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 558005674d..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 1db61daa3a..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index a82f221cf4..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 56cd69f9ef..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 83576a16d3..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 02ff9a800b..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index d50b09aa76..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-180-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 4a508e856d..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 58d1dc945b..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 48ca790514..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index df21248382..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index f01e206e98..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 2021c2691d..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 74cac5e763..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 30dd9d574d..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 040f33f1d3..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 95e82d73dd..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index cbf3b4eee9..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 9f616bf850..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-bottom-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 53946bdc68..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 14154de8a2..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index eb80bb78f7..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-middle-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 9d503f478f..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-center-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 1c01314637..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-left-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png b/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png deleted file mode 100644 index 86637880f8..0000000000 Binary files a/integration/tests/__image_snapshots__/bar-stories-test-ts-bar-series-stories-value-labels-positioning-rotation-negative-90-vertical-alignment-top-horizontal-alignment-right-place-the-value-labels-on-the-correct-area-1-snap.png and /dev/null differ diff --git a/integration/tests/bar_stories.test.ts b/integration/tests/bar_stories.test.ts index 5d1374ab77..a45ad74a08 100644 --- a/integration/tests/bar_stories.test.ts +++ b/integration/tests/bar_stories.test.ts @@ -104,6 +104,14 @@ describe('Bar series stories', () => { }); describe('value labels positioning', () => { + it('clip both geometry and chart area values', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/?path=/story/bar-chart--with-value-label&knob-show single series=&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide label if overflows chart edges=true&knob-hide label if overflows bar geometry=true&knob-debug=&knob-value font size=11&knob-value color=%23000&knob-offsetX=0&knob-offsetY=10&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0&knob-legend=right', + ); + }); + }); + + describe('value label positioning and formatting', () => { eachRotation.describe((rotation) => { describe.each['vertical']>([ VerticalAlignment.Middle, @@ -115,18 +123,13 @@ describe('Bar series stories', () => { HorizontalAlignment.Center, HorizontalAlignment.Right, ])('Horizontal Alignment - %s', (horizontalAlignment) => { - const url = `http://localhost:9001/?path=/story/bar-chart--with-value-label-advanced&knob-chartRotation=${rotation}&knob-Horizontal alignment=${horizontalAlignment}&knob-Vertical alignment=${verticalAlignment}`; + const url = `http://localhost:9001/?path=/story/bar-chart--data-value&args=&globals=theme:light&knob-chartRotation=${rotation}&knob-Horizontal alignment=${horizontalAlignment}&knob-Vertical alignment=${verticalAlignment}`; it('place the value labels on the correct area', async () => { await common.expectChartAtUrlToMatchScreenshot(url); }); }); }); }); - it('clip both geometry and chart area values', async () => { - await common.expectChartAtUrlToMatchScreenshot( - 'http://localhost:9001/?path=/story/bar-chart--with-value-label&knob-show single series=&knob-show value label=true&knob-alternating value label=&knob-contain value label within bar element=&knob-hide label if overflows chart edges=true&knob-hide label if overflows bar geometry=true&knob-debug=&knob-value font size=11&knob-value color=%23000&knob-offsetX=0&knob-offsetY=10&knob-data volume size=s&knob-split series=&knob-stacked series=&knob-chartRotation=0&knob-legend=right', - ); - }); }); describe('functional accessors', () => { diff --git a/packages/charts/src/chart_types/xy_chart/annotations/utils.ts b/packages/charts/src/chart_types/xy_chart/annotations/utils.ts index 79a024ec38..99759196ea 100644 --- a/packages/charts/src/chart_types/xy_chart/annotations/utils.ts +++ b/packages/charts/src/chart_types/xy_chart/annotations/utils.ts @@ -14,7 +14,6 @@ import { AnnotationId, AxisId, GroupId } from '../../../utils/ids'; import { Point } from '../../../utils/point'; import { AxisStyle } from '../../../utils/themes/theme'; import { SmallMultipleScales } from '../state/selectors/compute_small_multiple_scales'; -import { isHorizontalRotation } from '../state/utils/common'; import { getAxesSpecForSpecId } from '../state/utils/spec'; import { ComputedGeometries } from '../state/utils/types'; import { AnnotationDomainType, AnnotationSpec, AxisSpec, isLineAnnotation } from '../utils/specs'; @@ -29,12 +28,9 @@ export function getAnnotationAxis( domainType: AnnotationDomainType, chartRotation: Rotation, ): Position | undefined { - const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId); - const isHorizontalRotated = isHorizontalRotation(chartRotation); + const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, groupId, chartRotation); const isXDomainAnnotation = isXDomain(domainType); - const annotationAxis = isXDomainAnnotation ? xAxis : yAxis; - const rotatedAnnotation = isHorizontalRotated ? annotationAxis : isXDomainAnnotation ? yAxis : xAxis; - return rotatedAnnotation ? rotatedAnnotation.position : undefined; + return isXDomainAnnotation ? xAxis?.position : yAxis?.position; } /** @internal */ diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.ts index 37488cd56e..2845f7a91e 100644 --- a/packages/charts/src/chart_types/xy_chart/legend/legend.ts +++ b/packages/charts/src/chart_types/xy_chart/legend/legend.ts @@ -11,7 +11,7 @@ import { LegendItem } from '../../../common/legend'; import { SeriesKey, SeriesIdentifier } from '../../../common/series_id'; import { ScaleType } from '../../../scales/constants'; import { TickFormatterOptions } from '../../../specs'; -import { mergePartial } from '../../../utils/common'; +import { mergePartial, Rotation } from '../../../utils/common'; import { BandedAccessorType } from '../../../utils/geometry'; import { getLegendCompareFn } from '../../../utils/series_sort'; import { PointStyle, Theme } from '../../../utils/themes/theme'; @@ -104,6 +104,7 @@ export function computeLegend( serialIdentifierDataSeriesMap: Record, deselectedDataSeries: SeriesIdentifier[] = [], theme: Theme, + chartRotation: Rotation, ): LegendItem[] { const legendItems: LegendItem[] = []; const defaultColor = theme.colors.defaultVizColor; @@ -132,7 +133,7 @@ export function computeLegend( const labelY1 = banded ? getBandedLegendItemLabel(name, BandedAccessorType.Y1, postFixes) : name; // Use this to get axis spec w/ tick formatter - const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId); + const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation); const formatter = spec.tickFormat ?? yAxis?.tickFormat ?? defaultTickFormatter; const { hideInLegend } = spec; diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts index 00388eaacd..5b018beb67 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts @@ -52,6 +52,7 @@ export const computeLegendSelector = createCustomCachedSelector( siDataSeriesMap, deselectedDataSeries, chartTheme, + settings.rotation, ); }, ); diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts index 2ee15ed055..badf4f5996 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts @@ -138,7 +138,7 @@ function getTooltipAndHighlightFromValue( if (!spec) { return acc; } - const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId); + const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation); // yScales is ensured by the enclosing if const yScale = scales.yScales.get(getSpecDomainGroupId(spec)); @@ -163,21 +163,12 @@ function getTooltipAndHighlightFromValue( } // format the tooltip values - const yAxisFormatSpec = [0, 180].includes(chartRotation) ? yAxis : xAxis; - const formattedTooltip = formatTooltip( - indexedGeometry, - spec, - false, - isHighlighted, - hasSingleSeries, - yAxisFormatSpec, - ); + const formattedTooltip = formatTooltip(indexedGeometry, spec, false, isHighlighted, hasSingleSeries, yAxis); // format only one time the x value if (!header) { // if we have a tooltipHeaderFormatter, then don't pass in the xAxis as the user will define a formatter - const xAxisFormatSpec = [0, 180].includes(chartRotation) ? xAxis : yAxis; - const formatterAxis = tooltipHeaderFormatter ? undefined : xAxisFormatSpec; + const formatterAxis = tooltipHeaderFormatter ? undefined : xAxis; header = formatTooltip(indexedGeometry, spec, true, false, hasSingleSeries, formatterAxis); } diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/spec.ts b/packages/charts/src/chart_types/xy_chart/state/utils/spec.ts index 728dc41723..6995b45404 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/spec.ts +++ b/packages/charts/src/chart_types/xy_chart/state/utils/spec.ts @@ -7,8 +7,9 @@ */ import { BasicSeriesSpec, DEFAULT_GLOBAL_ID, Spec } from '../../../../specs'; +import { Rotation } from '../../../../utils/common'; import { GroupId } from '../../../../utils/ids'; -import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils'; +import { isXDomain } from '../../utils/axis_utils'; import { AxisSpec } from '../../utils/specs'; /** @internal */ @@ -17,10 +18,10 @@ export function getSpecsById(specs: T[], id: string): T | undefi } /** @internal */ -export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId) { +export function getAxesSpecForSpecId(axesSpecs: AxisSpec[], groupId: GroupId, chartRotation: Rotation = 0) { return axesSpecs.reduce<{ xAxis?: AxisSpec; yAxis?: AxisSpec }>((result, spec) => { - if (spec.groupId === groupId && isHorizontalAxis(spec.position)) result.xAxis = spec; - if (spec.groupId === groupId && isVerticalAxis(spec.position)) result.yAxis = spec; + if (spec.groupId === groupId && isXDomain(spec.position, chartRotation)) result.xAxis = spec; + else if (spec.groupId === groupId && !isXDomain(spec.position, chartRotation)) result.yAxis = spec; return result; }, {}); } diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts index 1d4fe160c3..2d2fed96cd 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts +++ b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts @@ -347,8 +347,9 @@ function renderGeometries( if (shift === -1) continue; // skip bar dataSeries if index is not available const barSeriesStyle = mergePartial(chartTheme.barSeriesStyle, spec.barSeriesStyle); - const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId); + const { yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId, chartRotation); const valueFormatter = yAxis?.tickFormat ?? fallBackTickFormatter; + const displayValueSettings = spec.displayValueSettings ? { valueFormatter, ...spec.displayValueSettings } : undefined; diff --git a/storybook/stories/bar/58_data_values.story.tsx b/storybook/stories/bar/58_data_values.story.tsx new file mode 100644 index 0000000000..3bb1c4231a --- /dev/null +++ b/storybook/stories/bar/58_data_values.story.tsx @@ -0,0 +1,64 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { select } from '@storybook/addon-knobs'; +import React from 'react'; + +import { Axis, BarSeries, Chart, ScaleType, Settings, PartialTheme } from '@elastic/charts'; + +import { BARCHART_1Y0G_LINEAR } from '../../../packages/charts/src/utils/data_samples/test_dataset'; +import { useBaseTheme } from '../../use_base_theme'; +import { getChartRotationKnob } from '../utils/knobs'; + +export const Example = () => { + const theme: PartialTheme = { + barSeriesStyle: { + displayValue: { + fontSize: 15, + fill: { textBorder: 2.5, color: 'white', borderColor: 'black' }, + alignment: { + horizontal: select( + 'Horizontal alignment', + { + Default: undefined, + Left: 'left', + Center: 'center', + Right: 'right', + }, + undefined, + ), + vertical: select( + 'Vertical alignment', + { + Default: undefined, + Top: 'top', + Middle: 'middle', + Bottom: 'bottom', + }, + undefined, + ), + }, + }, + }, + }; + + return ( + + + + `${d} H`} /> + `${d} V`} /> + + ); +}; diff --git a/storybook/stories/bar/bars.stories.tsx b/storybook/stories/bar/bars.stories.tsx index 361ebf3e02..1d4bceffa1 100644 --- a/storybook/stories/bar/bars.stories.tsx +++ b/storybook/stories/bar/bars.stories.tsx @@ -71,3 +71,4 @@ export { Example as tooltipBoundary } from './55_tooltip_boundary.story'; export { Example as testDualYAxis } from './49_test_dual_axis.story'; export { Example as testUseDefaultGroupDomain } from './56_test_use_dfl_gdomain.story'; export { Example as testRectBorder } from './57_test_rect_border_bars.story'; +export { Example as dataValue } from './58_data_values.story';