diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
index 9ba39c12d8..4b15c47a4e 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
index bf1179ef1f..d11e6dde2a 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
index 4aaf46ddc6..0409747c8d 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
index f285a55eb4..c2e6089397 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
index 1c15cf44c3..6f9784529b 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
index 2661bc7e2c..f3885bcca4 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-horizontal/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
index 16206cee2c..ffd0957acb 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
index 3739647fac..281af2a8a4 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
index 65a68310a5..5a133c70e9 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
index 7c1362a25b..d736d0ccf8 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
index d3fd3b28da..eae9dd02b8 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
index 7b397f292d..b5bd30685c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-two-thirds-circle/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
index 98181f22c1..410f07d764 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
index 1467de4d09..77b92d6744 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
index 9eff01a4c5..897a0dcccd 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
index 58975ec207..efba6fea32 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
index 1532f66a6b..c74ec680c8 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
index 474bc35750..9a1e865ce6 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/bullet-as-metric-vertical/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-angular-bullet-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-angular-bullet-chrome-linux.png
index 44051022d9..ba36db8ef4 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-angular-bullet-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-angular-bullet-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-grid-bullet-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-grid-bullet-chrome-linux.png
index f6ce3b7a33..0bbb86211a 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-grid-bullet-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-grid-bullet-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-bullet-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-bullet-chrome-linux.png
index 5ad9987d61..3ce6cc377d 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-bullet-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-bullet-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-column-bullet-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-column-bullet-chrome-linux.png
index e04f2542d0..5928af97f4 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-column-bullet-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-column-bullet-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-row-bullet-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-row-bullet-chrome-linux.png
index e149f34d0f..8fbb390226 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-row-bullet-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/renders-single-row-bullet-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..e7fc8a4b70
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-1/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..06adb00413
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-2/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..b6fc01ba79
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..e0b39c92b6
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..9be21da9ca
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-3/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..0ff81a4e64
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..b9bb8afb38
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..0ff81a4e64
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/color-config-4/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png
index c83009a439..1e82eec5ca 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
index 49344a3372..6244310800 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
index 70f771379e..19afccc1ca 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
index ca1c759957..3b87512189 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png
index 191315e081..3186173366 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
index 6e77dd3171..f9eb7eff84 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
index cf6b00bd1d..e4362e7dc6 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
index efe709b35e..9ecc9ba2f8 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
index cf4cea9319..50c311c3f9 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
index d7f11ed26f..76228020f8 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
index 3cc8d8afbd..448ab4422c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
index 3980518ad8..7db6c42594 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-1-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-1-chrome-linux.png
deleted file mode 100644
index ec77436eda..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-1-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-2-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-2-chrome-linux.png
deleted file mode 100644
index e566415547..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-2-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-3-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-3-chrome-linux.png
deleted file mode 100644
index 7f1afb020d..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-3-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-4-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-4-chrome-linux.png
deleted file mode 100644
index 542599154e..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-config-4-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-classes-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-classes-chrome-linux.png
deleted file mode 100644
index dd81e1bf1d..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-classes-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png
new file mode 100644
index 0000000000..6e6be0744c
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-colors-with-discrete-steps-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png
index f557316ea8..8b01722c7f 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/should-render-in-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
index b79643e850..4243451d61 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-auto-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
index b79643e850..4243451d61 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
index 7e541fa3c1..46d97a34b7 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..8c992e9ff1
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-1/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..76bf11ec53
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-2/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..7868b64d3a
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..9861e641b2
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..68a61b47e4
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-3/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..904105fbb7
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..aaeaf66e75
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..904105fbb7
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/color-config-4/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png
index a72c801558..8cd4ca9a5f 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
index 233fcd340b..7b8e0f9b52 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
index e1e8e7643e..ee7df96014 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
index f9ddb7ccc3..926dd03f69 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png
index de1acd970f..72b71e5c7c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
index 9e58b81bd7..dde241f79c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
index 72da76dcc6..970913450a 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
index b4d85b20ad..7d3dff1707 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
index b4cf449907..d726d0bd6c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
index b4b7372d23..9848d646b6 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
index 01e0e2c319..ad200f9015 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
index 95b665c2bc..698d3d3244 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-1-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-1-chrome-linux.png
deleted file mode 100644
index 3b131c7934..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-1-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-2-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-2-chrome-linux.png
deleted file mode 100644
index cfdc5e095a..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-2-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-3-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-3-chrome-linux.png
deleted file mode 100644
index 6df8627ba3..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-3-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-4-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-4-chrome-linux.png
deleted file mode 100644
index 2f4bc805c3..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-config-4-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-discrete-classes-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-discrete-classes-chrome-linux.png
deleted file mode 100644
index a769f284e2..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-discrete-classes-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-discrete-steps-chrome-linux.png
new file mode 100644
index 0000000000..e754ec0ce1
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-colors-with-discrete-steps-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-in-dark-theme-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-in-dark-theme-chrome-linux.png
index 6cf895ba18..0cb2848a63 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-in-dark-theme-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/should-render-in-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
index 3f3bc5b548..0e30ae404b 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-auto-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-auto-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
index 61ab5cd489..d5aaeecff2 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
index a26d1c0623..c4301ec40e 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-half-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-1/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-1/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..643cc0384c
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-1/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-2/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-2/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..86b5c077dd
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-2/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..7c4e660979
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..3e0c8da65e
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..7455c7f1ba
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-3/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..ca60ad321a
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..c2cb5ab8fa
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..ca60ad321a
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/color-config-4/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-chrome-linux.png
index afe8d9a987..5fbf3782aa 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
index 0773e5cc65..6b860acef2 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
index 59ab133a5a..b14ea0dd14 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
index 4f143ee141..8c5487bb60 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-chrome-linux.png
index d8b877991f..b567557b0b 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
index 6db8b409e5..90115e2f63 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-chrome-linux.png
index 225b9cddfc..ca3592a44b 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
index 790274a5b0..e336429684 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
index 0496f4db86..efb3c21d7f 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
index 87f010bf68..ae243e95a5 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-chrome-linux.png
index e3ebdb0feb..31bbd80189 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
index 2cd85a5553..fb2b9d2c45 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-1-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-1-chrome-linux.png
deleted file mode 100644
index d8a2212dd0..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-1-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-2-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-2-chrome-linux.png
deleted file mode 100644
index d16146e666..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-2-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-3-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-3-chrome-linux.png
deleted file mode 100644
index 428f97aaeb..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-3-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-4-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-4-chrome-linux.png
deleted file mode 100644
index d6f071cef2..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-config-4-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-discrete-classes-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-discrete-classes-chrome-linux.png
deleted file mode 100644
index c4d9a27934..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-discrete-classes-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-discrete-steps-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-discrete-steps-chrome-linux.png
new file mode 100644
index 0000000000..27f39f3ab1
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-colors-with-discrete-steps-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-in-dark-theme-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-in-dark-theme-chrome-linux.png
index cd1e42c051..313bee953e 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-in-dark-theme-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/should-render-in-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-auto-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-auto-ticks-chrome-linux.png
index 4c5c7be263..d04f453bb0 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-auto-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-auto-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-count-chrome-linux.png
index 8f0fd7113e..b34d7e022e 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-count-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-count-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
index 0e21ad5099..4b6a72ecf2 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-placements-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-horizontal/ticks/should-render-with-explicit-tick-placements-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-1/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-1/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..ecdca5f105
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-1/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-2/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-2/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..031909955b
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-2/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..72ec56af89
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..ef8e9a6ca9
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..8a782fdbcc
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-3/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..d7eb9fe014
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..7fb0724db0
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..d7eb9fe014
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/color-config-4/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png
index b7bcf918b9..4ec10ca3db 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
index b97d1d2930..a572a4a653 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
index e4cd204b7e..ca561c6657 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
index 6e537c1d9b..9e1c973cba 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png
index 1631a3a34b..1144da8164 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
index fae09ff7ba..d8ce7abd87 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png
index 5b68d48073..59a268dfaf 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
index 67596be690..055b1f95ee 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
index 550802afc3..0e910dc25f 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
index 274e8553fa..2ee031bfc6 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png
index 474122bf8a..ef4a1de0c1 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
index db1cd1e9be..7676227b46 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-1-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-1-chrome-linux.png
deleted file mode 100644
index 5b8082eb53..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-1-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-2-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-2-chrome-linux.png
deleted file mode 100644
index 9eab780243..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-2-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-3-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-3-chrome-linux.png
deleted file mode 100644
index fb1d7b4c92..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-3-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-4-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-4-chrome-linux.png
deleted file mode 100644
index ba6ecf55ef..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-config-4-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-discrete-classes-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-discrete-classes-chrome-linux.png
deleted file mode 100644
index bd5a3e6c4b..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-discrete-classes-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-discrete-steps-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-discrete-steps-chrome-linux.png
new file mode 100644
index 0000000000..6b45a579ce
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-colors-with-discrete-steps-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-in-dark-theme-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-in-dark-theme-chrome-linux.png
index 8b8de94a89..45a7e9eca5 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-in-dark-theme-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/should-render-in-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-auto-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-auto-ticks-chrome-linux.png
index 7e5d99217c..74179e4b2c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-auto-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-auto-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png
index 7e5d99217c..74179e4b2c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-count-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
index cf5be078d0..86ff0b8872 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-two-thirds-circle/ticks/should-render-with-explicit-tick-placements-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-1/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-1/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..5463152f28
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-1/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-2/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-2/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..a9c7f07ad9
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-2/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..3fa1c4b34e
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..596ffd52bc
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..3b87b976a5
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-3/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png
new file mode 100644
index 0000000000..c4a731f797
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/renders-color-bands-independent-of-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png
new file mode 100644
index 0000000000..8a067d680a
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/renders-color-bands-independent-of-ticks-flipped-domain-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/should-render-colors-with-config-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/should-render-colors-with-config-chrome-linux.png
new file mode 100644
index 0000000000..c4a731f797
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/color-config-4/should-render-colors-with-config-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-chrome-linux.png
index eb8e5d20a5..cb34144bd7 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png
index 7880d19934..1153ecc8a6 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png
index 2637b90fe9..dd74394032 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png
index c14daa66a0..d456c171e5 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-chrome-linux.png
index 8a4791c9cd..46c7f5d01e 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png
index dbe37a6d95..cd826c218a 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-false/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-chrome-linux.png
index a057015724..0d389968be 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png
index c0493cf3ec..7c3f5213b4 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png
index d452239880..5ae7a8764c 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png
index a7147336c0..b4815bf5e9 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-negative-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-chrome-linux.png
index 778871eb31..cc08f4fb4d 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png
index e855f7a36c..8a281cc007 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/nice-domain-true/should-render-with-positive-values-reversed-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-1-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-1-chrome-linux.png
deleted file mode 100644
index 4bd26d5114..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-1-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-2-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-2-chrome-linux.png
deleted file mode 100644
index db74d8938a..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-2-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-3-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-3-chrome-linux.png
deleted file mode 100644
index 7c43f3b58e..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-3-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-4-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-4-chrome-linux.png
deleted file mode 100644
index e7211acd59..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-config-4-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-discrete-classes-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-discrete-classes-chrome-linux.png
deleted file mode 100644
index 1e3d869e26..0000000000
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-discrete-classes-chrome-linux.png and /dev/null differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-discrete-steps-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-discrete-steps-chrome-linux.png
new file mode 100644
index 0000000000..7fcabe70e0
Binary files /dev/null and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-colors-with-discrete-steps-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-in-dark-theme-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-in-dark-theme-chrome-linux.png
index 5735c1cc54..859ea6f648 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-in-dark-theme-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/should-render-in-dark-theme-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-auto-ticks-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-auto-ticks-chrome-linux.png
index ad03b637b5..d872040116 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-auto-ticks-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-auto-ticks-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-count-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-count-chrome-linux.png
index 45f6b0769b..7305aaeb25 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-count-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-count-chrome-linux.png differ
diff --git a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-placements-chrome-linux.png b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-placements-chrome-linux.png
index 2079b3480b..5feefa59a2 100644
Binary files a/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-placements-chrome-linux.png and b/e2e/screenshots/bullet_stories.test.ts-snapshots/bullet-stories/subtype-vertical/ticks/should-render-with-explicit-tick-placements-chrome-linux.png differ
diff --git a/e2e/tests/bullet_stories.test.ts b/e2e/tests/bullet_stories.test.ts
index 67f099e78c..bfd53fffae 100644
--- a/e2e/tests/bullet_stories.test.ts
+++ b/e2e/tests/bullet_stories.test.ts
@@ -11,7 +11,7 @@ import { test } from '@playwright/test';
 import { pwEach } from '../helpers';
 import { common } from '../page_objects/common';
 
-export const BulletGraphSubtype = ['vertical', 'horizontal', 'circle', 'half-circle', 'two-thirds-circle'];
+export const BulletSubtype = ['vertical', 'horizontal', 'circle', 'half-circle', 'two-thirds-circle'];
 const testCases: [string, { start: number; end: number; value: number; target: number }][] = [
   ['positive values', { start: 4, end: 167, value: 50, target: 100 }],
   ['positive values - reversed', { start: 167, end: 4, value: 50, target: 100 }],
@@ -44,12 +44,12 @@ test.describe('Bullet stories', () => {
     await common.expectChartAtUrlToMatchScreenshot(page)('http://localhost:9001/?path=/story/bullet-graph--grid');
   });
 
-  pwEach.describe(BulletGraphSubtype)(
+  pwEach.describe(BulletSubtype)(
     (subtype) => `subtype - ${subtype}`,
     (subtype) => {
       test('should render in dark theme', async ({ page }) => {
         await common.expectChartAtUrlToMatchScreenshot(page)(
-          `http://localhost:9001/?path=/story/bullet-graph--single&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:dark&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":[0,20,40,100],"colors":["&knob-debug=&knob-title_General=Error rate title&knob-subtitle_General=Here is the subtitle&knob-value_General=56&knob-target_General=75&knob-start_General=0&knob-end_General=100&knob-format (numeraljs)_General=0.[0]&knob-subtype_General=${subtype}&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200`,
+          `http://localhost:9001/?path=/story/bullet-graph--single&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:dark&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"steps":[0,20,40,100],"colors":["&knob-debug=&knob-title_General=Error rate title&knob-subtitle_General=Here is the subtitle&knob-value_General=56&knob-target_General=75&knob-start_General=0&knob-end_General=100&knob-format (numeraljs)_General=0.[0]&knob-subtype_General=${subtype}&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200`,
         );
       });
 
@@ -74,18 +74,35 @@ test.describe('Bullet stories', () => {
       });
 
       // Each color config type
-      pwEach.test([1, 2, 3, 4])(
-        (v) => `should render colors with config - ${v}`,
-        async (page, configIndex) => {
-          await common.expectChartAtUrlToMatchScreenshot(page)(
-            `http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-color config_Color Bands=${configIndex}&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Steps_Color Bands=5&knob-Config 2 - Reverse_Color Bands=&knob-Config 3 - json_Color Bands={"classes":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-start_Domain=0&knob-end_Domain=100&knob-value_Domain=56&knob-target_Domain=75&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-debug=&knob-subtype=${subtype}`,
-          );
+
+      pwEach.describe([1, 2, 3, 4])(
+        (v) => `Color config - ${v}`,
+        (configIndex) => {
+          test('should render colors with config', async ({ page }) => {
+            await common.expectChartAtUrlToMatchScreenshot(page)(
+              `http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-color config_Color Bands=${configIndex}&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Steps_Color Bands=5&knob-Config 2 - Reverse_Color Bands=&knob-Config 3 - json_Color Bands={"steps":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-start_Domain=0&knob-end_Domain=100&knob-value_Domain=56&knob-target_Domain=75&knob-niceDomain_Ticks=&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-debug=&knob-subtype=${subtype}`,
+            );
+          });
+
+          if (configIndex === 3 || configIndex === 4) {
+            test('renders color bands independent of ticks', async ({ page }) => {
+              await common.expectChartAtUrlToMatchScreenshot(page)(
+                `http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config%201%20-%20Color_Color%20Bands=RGBA(70,%20130,%2096,%201)&knob-Config%202%20-%20Steps_Color%20Bands=5&knob-Config%203%20-%20json_Color%20Bands={%22steps%22:3,%22colors%22:[%22rgb(140,%20185,%20189)%22,%22rgb(236,%20177,%2089)%22,%22rgb(182,%20115,%2082)%22]}&knob-Config%204%20-%20json_Color%20Bands=[{%22color%22:%22red%22,%22gte%22:0,%22lt%22:20},{%22color%22:%22green%22,%22gte%22:20,%22lte%22:40},{%22color%22:%22blue%22,%22gt%22:40,%22lte%22:{%22type%22:%22percentage%22,%22value%22:100}}]&knob-color%20config_Color%20Bands=${configIndex}&knob-end_Domain=100&knob-start_Domain=0&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick%20strategy_Ticks=auto&knob-ticks(approx.%20count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config%202%20-%20Palette_Color%20Bands=0&knob-Config%202%20-%20Reverse_Color%20Bands=&knob-niceDomain_Ticks=&knob-debug=`,
+              );
+            });
+
+            test('renders color bands independent of ticks flipped domain', async ({ page }) => {
+              await common.expectChartAtUrlToMatchScreenshot(page)(
+                `http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config%201%20-%20Color_Color%20Bands=RGBA(70,%20130,%2096,%201)&knob-Config%202%20-%20Steps_Color%20Bands=5&knob-Config%203%20-%20json_Color%20Bands={%22steps%22:3,%22colors%22:[%22rgb(140,%20185,%20189)%22,%22rgb(236,%20177,%2089)%22,%22rgb(182,%20115,%2082)%22]}&knob-Config%204%20-%20json_Color%20Bands=[{%22color%22:%22red%22,%22gte%22:0,%22lt%22:20},{%22color%22:%22green%22,%22gte%22:20,%22lte%22:40},{%22color%22:%22blue%22,%22gt%22:40,%22lte%22:{%22type%22:%22percentage%22,%22value%22:100}}]&knob-color%20config_Color%20Bands=${configIndex}&knob-end_Domain=0&knob-start_Domain=100&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick%20strategy_Ticks=auto&knob-ticks(approx.%20count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config%202%20-%20Palette_Color%20Bands=0&knob-Config%202%20-%20Reverse_Color%20Bands=&knob-niceDomain_Ticks=&knob-debug=`,
+              );
+            });
+          }
         },
       );
 
-      test('should render colors with discrete classes', async ({ page }) => {
+      test('should render colors with discrete steps', async ({ page }) => {
         await common.expectChartAtUrlToMatchScreenshot(page)(
-          `http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":[0,20,40,100],"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[]&knob-color config_Color Bands=3&knob-end_Domain=100&knob-start_Domain=0&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Reverse_Color Bands=&knob-niceDomain_Ticks=&knob-debug=`,
+          `http://localhost:9001/?path=/story/bullet-graph--color-bands&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Config 1 - Color_Color Bands=RGBA(70, 130, 96, 1)&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"steps":[0,20,40,100],"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[]&knob-color config_Color Bands=3&knob-end_Domain=100&knob-start_Domain=0&knob-subtype=${subtype}&knob-target_Domain=75&knob-tick strategy_Ticks=auto&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks[0]=-200&knob-ticks(placements)_Ticks[1]=-100&knob-ticks(placements)_Ticks[2]=0&knob-ticks(placements)_Ticks[3]=5&knob-ticks(placements)_Ticks[4]=10&knob-ticks(placements)_Ticks[5]=15&knob-ticks(placements)_Ticks[6]=20&knob-ticks(placements)_Ticks[7]=25&knob-ticks(placements)_Ticks[8]=50&knob-ticks(placements)_Ticks[9]=100&knob-ticks(placements)_Ticks[10]=200&knob-value_Domain=56&knob-Config 2 - Palette_Color Bands=0&knob-Config 2 - Reverse_Color Bands=&knob-niceDomain_Ticks=&knob-debug=`,
         );
       });
 
diff --git a/e2e/tests/metric_stories.test.ts b/e2e/tests/metric_stories.test.ts
index 40330c8730..b18047253d 100644
--- a/e2e/tests/metric_stories.test.ts
+++ b/e2e/tests/metric_stories.test.ts
@@ -58,7 +58,7 @@ test.describe('Metric', () => {
     (type) => {
       test('should render with blended background color', async ({ page }) => {
         await common.expectChartAtUrlToMatchScreenshot(page)(
-          `http://localhost:9001/?path=/story/metric-alpha--basic&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;background:red;theme:light&knob-Config 1 - Color_Color Bands=rgba(245, 247, 250, 1)&knob-Config 2 - Palette_Color Bands=5&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-Domain padding unit=pixel&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-SeriesType=line&knob-Specs to fit (yDomain)=theshold,rect&knob-active tick step=0&knob-add series=true&knob-attach click handler=true&knob-bars padding=0.25&knob-blending background=rgba(255,255,255,1)&knob-color=rgba(51, 143, 200, 0.49)&knob-color config_Color Bands=2&knob-constrain padding=true&knob-dataset=both&knob-debug=true&knob-empty background=rgba(99, 69, 69, 0)&knob-enableHistogramMode=true&knob-end=100&knob-end_Domain=100&knob-end_General=100&knob-extra=last <b>5m</b>&knob-fit Y domain to data=true&knob-format=0&knob-format (numeraljs)_General=0.[0]&knob-hasHistogramBarSeries=true&knob-histogram padding=0.05&knob-is numeric metric=true&knob-max trend data points=30&knob-nice=true&knob-number of columns=4&knob-number of series=1&knob-other series=line&knob-point series alignment=center&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-stacked=true&knob-start=-113&knob-start_Domain=0&knob-start_General=0&knob-subtitle=Cluster CPU usage&knob-subtitle_General=Lorem laborum nostrud consectetur&knob-subtype=two-thirds-circle&knob-subtype_General=vertical&knob-sync cursor=true&knob-target=75&knob-target_Domain=75&knob-target_General=75&knob-theshold - rect={"y0":100,"y1":null}&knob-thesholds - line=200&knob-tick label padding=10&knob-tick strategy_Ticks=auto&knob-tickFormat=0[.]00&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks=-,2,0,,,5,,,1,0,,,1,5,,,0,2,0,,,2,5,,,5,0,,,1,0,0,0,,,2,0,0,,,-,1,0,0,,&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-title_General=Ea consequat voluptate&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-use blending background=true&knob-use custom minInterval of 30s=true&knob-use multilayer time axis=true&knob-use progress bar=true&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`,
+          `http://localhost:9001/?path=/story/metric-alpha--basic&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;background:red;theme:light&knob-Config 1 - Color_Color Bands=rgba(245, 247, 250, 1)&knob-Config 2 - Palette_Color Bands=5&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"steps":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-Domain padding unit=pixel&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-SeriesType=line&knob-Specs to fit (yDomain)=theshold,rect&knob-active tick step=0&knob-add series=true&knob-attach click handler=true&knob-bars padding=0.25&knob-blending background=rgba(255,255,255,1)&knob-color=rgba(51, 143, 200, 0.49)&knob-color config_Color Bands=2&knob-constrain padding=true&knob-dataset=both&knob-debug=true&knob-empty background=rgba(99, 69, 69, 0)&knob-enableHistogramMode=true&knob-end=100&knob-end_Domain=100&knob-end_General=100&knob-extra=last <b>5m</b>&knob-fit Y domain to data=true&knob-format=0&knob-format (numeraljs)_General=0.[0]&knob-hasHistogramBarSeries=true&knob-histogram padding=0.05&knob-is numeric metric=true&knob-max trend data points=30&knob-nice=true&knob-number of columns=4&knob-number of series=1&knob-other series=line&knob-point series alignment=center&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-stacked=true&knob-start=-113&knob-start_Domain=0&knob-start_General=0&knob-subtitle=Cluster CPU usage&knob-subtitle_General=Lorem laborum nostrud consectetur&knob-subtype=two-thirds-circle&knob-subtype_General=vertical&knob-sync cursor=true&knob-target=75&knob-target_Domain=75&knob-target_General=75&knob-theshold - rect={"y0":100,"y1":null}&knob-thesholds - line=200&knob-tick label padding=10&knob-tick strategy_Ticks=auto&knob-tickFormat=0[.]00&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks=-,2,0,,,5,,,1,0,,,1,5,,,0,2,0,,,2,5,,,5,0,,,1,0,0,0,,,2,0,0,,,-,1,0,0,,&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-title_General=Ea consequat voluptate&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-use blending background=true&knob-use custom minInterval of 30s=true&knob-use multilayer time axis=true&knob-use progress bar=true&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`,
         );
       });
 
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 53e1a10ca8..fa3b680b84 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -445,6 +445,11 @@ export interface BubbleSeriesStyle {
     point: PointStyle;
 }
 
+// Warning: (ae-forgotten-export) The symbol "buildProps" needs to be exported by the entry point index.d.ts
+//
+// @alpha
+export const Bullet: (props: SFProps<BulletSpec, keyof (typeof buildProps)['overrides'], keyof (typeof buildProps)['defaults'], keyof (typeof buildProps)['optionals'], keyof (typeof buildProps)['requires']>) => null;
+
 // @public
 export type BulletColorConfig = Color[] | ColorBandSimpleConfig | ColorBandComplexConfig;
 
@@ -473,15 +478,15 @@ export interface BulletDatum {
     valueFormatter: ValueFormatter;
 }
 
-// Warning: (ae-forgotten-export) The symbol "buildProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-incompatible-release-tags) The symbol "BulletProps" is marked as @public, but its signature references "Bullet" which is marked as @alpha
 //
-// @alpha
-export const BulletGraph: (props: SFProps<BulletGraphSpec, keyof (typeof buildProps)['overrides'], keyof (typeof buildProps)['defaults'], keyof (typeof buildProps)['optionals'], keyof (typeof buildProps)['requires']>) => null;
+// @public (undocumented)
+export type BulletProps = ComponentProps<typeof Bullet>;
 
 // @alpha (undocumented)
-export interface BulletGraphSpec extends Spec {
+export interface BulletSpec extends Spec {
     // (undocumented)
-    chartType: typeof ChartType.BulletGraph;
+    chartType: typeof ChartType.Bullet;
     // (undocumented)
     colorBands?: BulletColorConfig;
     // (undocumented)
@@ -489,7 +494,7 @@ export interface BulletGraphSpec extends Spec {
     // (undocumented)
     specType: typeof SpecType.Series;
     // (undocumented)
-    subtype: BulletGraphSubtype;
+    subtype: BulletSubtype;
     // (undocumented)
     tickSnapStep?: number;
     // (undocumented)
@@ -497,7 +502,7 @@ export interface BulletGraphSpec extends Spec {
 }
 
 // @public (undocumented)
-export interface BulletGraphStyle {
+export interface BulletStyle {
     // (undocumented)
     angularTickLabelPadding: Pixels;
     // (undocumented)
@@ -516,7 +521,7 @@ export interface BulletGraphStyle {
 }
 
 // @public (undocumented)
-export const BulletGraphSubtype: Readonly<{
+export const BulletSubtype: Readonly<{
     vertical: "vertical";
     horizontal: "horizontal";
     circle: "circle";
@@ -525,7 +530,7 @@ export const BulletGraphSubtype: Readonly<{
 }>;
 
 // @public (undocumented)
-export type BulletGraphSubtype = $Values<typeof BulletGraphSubtype>;
+export type BulletSubtype = $Values<typeof BulletSubtype>;
 
 // @public (undocumented)
 export interface BulletValueLabels {
@@ -665,7 +670,7 @@ export const ChartType: Readonly<{
     Heatmap: "heatmap";
     Wordcloud: "wordcloud";
     Metric: "metric";
-    BulletGraph: "bullet_graph";
+    Bullet: "bullet";
 }>;
 
 // @public (undocumented)
@@ -700,9 +705,9 @@ export type ColorBandConfig = OpenClosedBoundsConfig<number | ColorBandValue> &
 
 // @public (undocumented)
 export interface ColorBandSimpleConfig {
-    classes?: number | number[];
     // (undocumented)
     colors: Color[];
+    steps?: number | number[];
 }
 
 // @public (undocumented)
@@ -2934,7 +2939,7 @@ export interface Theme {
     background: BackgroundStyle;
     barSeriesStyle: BarSeriesStyle;
     bubbleSeriesStyle: BubbleSeriesStyle;
-    bulletGraph: BulletGraphStyle;
+    bulletGraph: BulletStyle;
     chartMargins: Margins;
     chartPaddings: Margins;
     // (undocumented)
diff --git a/packages/charts/src/chart_types/bullet_graph/chart_state.tsx b/packages/charts/src/chart_types/bullet_graph/chart_state.tsx
index 98386abb66..0fcbfbbb4c 100644
--- a/packages/charts/src/chart_types/bullet_graph/chart_state.tsx
+++ b/packages/charts/src/chart_types/bullet_graph/chart_state.tsx
@@ -8,7 +8,7 @@
 
 import React, { RefObject } from 'react';
 
-import { BulletGraphRenderer } from './renderer/canvas';
+import { BulletRenderer } from './renderer/canvas';
 import { canDisplayChartTitles } from './selectors/can_display_chart_titles';
 import { getTooltipAnchor } from './selectors/get_tooltip_anchor';
 import { getTooltipInfo } from './selectors/get_tooltip_info';
@@ -26,12 +26,12 @@ const EMPTY_LEGEND_LIST: LegendItem[] = [];
 const EMPTY_LEGEND_ITEM_LIST: LegendItemLabel[] = [];
 
 /** @internal */
-export class BulletGraphState implements InternalChartState {
-  chartType = ChartType.BulletGraph;
+export class BulletState implements InternalChartState {
+  chartType = ChartType.Bullet;
   getChartTypeDescription = () => 'Bullet Graph';
   chartRenderer = (containerRef: BackwardRef, forwardStageRef: RefObject<HTMLCanvasElement>) => (
     <>
-      <BulletGraphRenderer forwardStageRef={forwardStageRef} />
+      <BulletRenderer forwardStageRef={forwardStageRef} />
       <Tooltip getChartContainerRef={containerRef} />
     </>
   );
diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet_graph.ts b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet.ts
similarity index 94%
rename from packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet_graph.ts
rename to packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet.ts
index c3d6fd8ad4..c2929d694a 100644
--- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet_graph.ts
+++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/bullet.ts
@@ -15,9 +15,9 @@ import { A11ySettings } from '../../../../state/selectors/get_accessibility_conf
 import { renderDebugPoint, renderDebugRect } from '../../../xy_chart/renderer/canvas/utils/debug';
 import { ActiveValue } from '../../selectors/get_active_values';
 import { BulletDimensions } from '../../selectors/get_panel_dimensions';
-import { BulletGraphSpec, BulletGraphSubtype } from '../../spec';
+import { BulletSpec, BulletSubtype } from '../../spec';
 import {
-  BulletGraphStyle,
+  BulletStyle,
   FONT_PADDING,
   HEADER_PADDING,
   SUBTITLE_FONT,
@@ -34,16 +34,16 @@ import {
 } from '../../theme';
 
 /** @internal */
-export function renderBulletGraph(
+export function renderBullet(
   ctx: CanvasRenderingContext2D,
   dpr: Ratio,
   props: {
     debug: boolean;
-    spec?: BulletGraphSpec;
+    spec?: BulletSpec;
     a11y: A11ySettings;
     dimensions: BulletDimensions;
     activeValues: (ActiveValue | null)[][];
-    style: BulletGraphStyle;
+    style: BulletStyle;
     backgroundColor: Color;
   },
 ) {
@@ -154,7 +154,7 @@ export function renderBulletGraph(
 
           const { graphArea } = bulletGraph;
 
-          if (spec.subtype !== BulletGraphSubtype.horizontal) {
+          if (spec.subtype !== BulletSubtype.horizontal) {
             ctx.strokeStyle = style.border;
             ctx.beginPath();
             ctx.moveTo(HEADER_PADDING.left, graphArea.origin.y);
@@ -165,9 +165,9 @@ export function renderBulletGraph(
           withContext(ctx, (ctx) => {
             ctx.translate(graphArea.origin.x, graphArea.origin.y);
 
-            if (spec.subtype === BulletGraphSubtype.horizontal) {
+            if (spec.subtype === BulletSubtype.horizontal) {
               horizontalBullet(ctx, bulletGraph, style, backgroundColor, activeValue);
-            } else if (spec.subtype === BulletGraphSubtype.vertical) {
+            } else if (spec.subtype === BulletSubtype.vertical) {
               verticalBullet(ctx, bulletGraph, style, backgroundColor, activeValue);
             } else {
               angularBullet(ctx, bulletGraph, style, backgroundColor, spec, debug, activeValue);
diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/constants.ts b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/constants.ts
index 3b506566a8..f7f39ea56b 100644
--- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/constants.ts
+++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/constants.ts
@@ -35,3 +35,9 @@ export const TICK_INTERVAL = 100;
 
 /** @internal */
 export const ANGULAR_TICK_INTERVAL = 120;
+
+/**
+ * Space between the target/value line and the tick label
+ * @internal
+ */
+export const TICK_LABEL_PADDING = 3;
diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx
index 2f5c5f2307..3f0a3ffa05 100644
--- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx
+++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx
@@ -6,15 +6,11 @@
  * Side Public License, v 1.
  */
 
-/* eslint-disable-next-line eslint-comments/disable-enable-pair */
-/* eslint-disable react/no-array-index-key */
-
-import chroma from 'chroma-js';
 import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { renderBulletGraph } from './bullet_graph';
+import { renderBullet } from './bullet';
 import { ColorContrastOptions } from '../../../../common/color_calcs';
 import { colorToRgba } from '../../../../common/color_library_wrappers';
 import { Color, Colors } from '../../../../common/colors';
@@ -42,8 +38,8 @@ import { getBulletSpec } from '../../selectors/get_bullet_spec';
 import { getChartSize } from '../../selectors/get_chart_size';
 import { BulletDimensions, getPanelDimensions } from '../../selectors/get_panel_dimensions';
 import { hasChartTitles } from '../../selectors/has_chart_titles';
-import { BulletDatum, BulletGraphSpec, BulletGraphSubtype, mergeValueLabels } from '../../spec';
-import { BulletGraphStyle, LIGHT_THEME_BULLET_STYLE } from '../../theme';
+import { BulletDatum, BulletSpec, BulletSubtype, mergeValueLabels } from '../../spec';
+import { BulletStyle, LIGHT_THEME_BULLET_STYLE } from '../../theme';
 import { BulletColorConfig } from '../../utils/color';
 
 interface StateProps {
@@ -51,12 +47,12 @@ interface StateProps {
   debug: boolean;
   chartId: string;
   hasTitles: boolean;
-  spec?: BulletGraphSpec;
+  spec?: BulletSpec;
   a11y: A11ySettings;
   size: Size;
   dimensions: BulletDimensions;
   activeValues: (ActiveValue | null)[][];
-  style: BulletGraphStyle;
+  style: BulletStyle;
   backgroundColor: Color;
   locale: string;
   pointerPosition?: Point;
@@ -76,7 +72,7 @@ interface OwnProps {
 type Props = DispatchProps & StateProps & OwnProps;
 
 class Component extends React.Component<Props> {
-  static displayName = 'BulletGraph';
+  static displayName = 'Bullet';
   private ctx: CanvasRenderingContext2D | null;
   private readonly devicePixelRatio: number;
 
@@ -115,7 +111,7 @@ class Component extends React.Component<Props> {
 
   private drawCanvas() {
     if (this.ctx) {
-      renderBulletGraph(this.ctx, this.devicePixelRatio, this.props);
+      renderBullet(this.ctx, this.devicePixelRatio, this.props);
     }
   }
 
@@ -162,18 +158,16 @@ class Component extends React.Component<Props> {
             <AlignedGrid<BulletDatum>
               data={spec.data}
               contentComponent={({ datum, stats }) => {
-                const colorScale = chroma
-                  // TODO use colorBands in metric implementation
-                  // @ts-ignore - TODO fix when not an array
-                  .scale(Array.isArray(this.props.colorBands) ? this.props.colorBands : this.props.style.colorBands)
-                  .domain(datum.domain);
+                const colorScale =
+                  this.props.dimensions.rows[stats.rowIndex]?.[stats.columnIndex]?.colorScale ??
+                  (() => ({ hex: () => this.props.style.fallbackBandColor })); // should never happen
                 const bulletDatum: BulletMetricWProgress = {
                   value: datum.value,
                   target: datum.target,
                   valueFormatter: datum.valueFormatter,
                   targetFormatter: datum.targetFormatter,
                   color: style.barBackground,
-                  progressBarDirection: spec.subtype === BulletGraphSubtype.vertical ? 'vertical' : 'horizontal',
+                  progressBarDirection: spec.subtype === BulletSubtype.vertical ? 'vertical' : 'horizontal',
                   title: datum.title,
                   subtitle: datum.subtitle,
                   domain: datum.domain,
@@ -287,4 +281,4 @@ const mapStateToProps = (state: GlobalChartState): StateProps => {
 };
 
 /** @internal */
-export const BulletGraphRenderer = connect(mapStateToProps, mapDispatchToProps)(Component);
+export const BulletRenderer = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts
index 7f974381ec..23280f654b 100644
--- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts
+++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/angular.ts
@@ -15,8 +15,8 @@ import { drawPolarLine } from '../../../../xy_chart/renderer/canvas/lines';
 import { renderDebugPoint } from '../../../../xy_chart/renderer/canvas/utils/debug';
 import { ActiveValue } from '../../../selectors/get_active_values';
 import { BulletPanelDimensions } from '../../../selectors/get_panel_dimensions';
-import { BulletGraphSpec } from '../../../spec';
-import { BulletGraphStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme';
+import { BulletSpec } from '../../../spec';
+import { BulletStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme';
 import { getAngledChartSizing } from '../../../utils/angular';
 import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH } from '../constants';
 
@@ -24,9 +24,9 @@ import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH } f
 export function angularBullet(
   ctx: CanvasRenderingContext2D,
   dimensions: BulletPanelDimensions,
-  style: BulletGraphStyle,
+  style: BulletStyle,
   backgroundColor: Color,
-  spec: BulletGraphSpec,
+  spec: BulletSpec,
   debug: boolean,
   activeValue?: ActiveValue | null,
 ) {
diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/horizontal.ts b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/horizontal.ts
index 1b13b7a06b..995bff4824 100644
--- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/horizontal.ts
+++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/horizontal.ts
@@ -13,14 +13,14 @@ import { clamp, isBetween, isFiniteNumber, sortNumbers } from '../../../../../ut
 import { ContinuousDomain, GenericDomain } from '../../../../../utils/domain';
 import { ActiveValue } from '../../../selectors/get_active_values';
 import { BulletPanelDimensions } from '../../../selectors/get_panel_dimensions';
-import { BulletGraphStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme';
-import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH } from '../constants';
+import { BulletStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme';
+import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH, TICK_LABEL_PADDING } from '../constants';
 
 /** @internal */
 export function horizontalBullet(
   ctx: CanvasRenderingContext2D,
   dimensions: BulletPanelDimensions,
-  style: BulletGraphStyle,
+  style: BulletStyle,
   backgroundColor: Color,
   activeValue?: ActiveValue | null,
 ) {
@@ -100,6 +100,6 @@ export function horizontalBullet(
       } else {
         ctx.textAlign = 'start';
       }
-      ctx.fillText(labelText, scale(tick), verticalAlignment + TARGET_SIZE / 2);
+      ctx.fillText(labelText, scale(tick), verticalAlignment + TARGET_SIZE / 2 + TICK_LABEL_PADDING);
     });
 }
diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/vertical.ts b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/vertical.ts
index 959c53cd75..cc8eb18694 100644
--- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/vertical.ts
+++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/sub_types/vertical.ts
@@ -12,14 +12,14 @@ import { clamp, isBetween, isFiniteNumber, sortNumbers } from '../../../../../ut
 import { ContinuousDomain, GenericDomain } from '../../../../../utils/domain';
 import { ActiveValue } from '../../../selectors/get_active_values';
 import { BulletPanelDimensions } from '../../../selectors/get_panel_dimensions';
-import { BulletGraphStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme';
-import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH } from '../constants';
+import { BulletStyle, GRAPH_PADDING, TICK_FONT, TICK_FONT_SIZE } from '../../../theme';
+import { TARGET_SIZE, BULLET_SIZE, TICK_WIDTH, BAR_SIZE, TARGET_STROKE_WIDTH, TICK_LABEL_PADDING } from '../constants';
 
 /** @internal */
 export function verticalBullet(
   ctx: CanvasRenderingContext2D,
   dimensions: BulletPanelDimensions,
-  style: BulletGraphStyle,
+  style: BulletStyle,
   backgroundColor: Color,
   activeValue?: ActiveValue | null,
 ) {
@@ -113,6 +113,10 @@ export function verticalBullet(
         ctx.textBaseline = 'bottom';
       }
 
-      ctx.fillText(labelText, graphArea.size.width / 2 - TARGET_SIZE / 2 - 6, graphPaddedHeight - scale(tick));
+      ctx.fillText(
+        labelText,
+        graphArea.size.width / 2 - TARGET_SIZE / 2 - TICK_LABEL_PADDING,
+        graphPaddedHeight - scale(tick),
+      );
     });
 }
diff --git a/packages/charts/src/chart_types/bullet_graph/selectors/get_active_value.ts b/packages/charts/src/chart_types/bullet_graph/selectors/get_active_value.ts
index ce643a6027..a3a9468459 100644
--- a/packages/charts/src/chart_types/bullet_graph/selectors/get_active_value.ts
+++ b/packages/charts/src/chart_types/bullet_graph/selectors/get_active_value.ts
@@ -16,7 +16,7 @@ import { isBetween, isFiniteNumber, roundTo, sortNumbers } from '../../../utils/
 import { ContinuousDomain, Range } from '../../../utils/domain';
 import { Point } from '../../../utils/point';
 import { BULLET_SIZE, HOVER_SLOP, TARGET_SIZE } from '../renderer/canvas/constants';
-import { BulletGraphSpec, BulletGraphSubtype } from '../spec';
+import { BulletSpec, BulletSubtype } from '../spec';
 import { GRAPH_PADDING } from '../theme';
 import { getAngledChartSizing } from '../utils/angular';
 
@@ -65,16 +65,16 @@ export const getActiveValue = createCustomCachedSelector(
 function getPanelValue(
   panel: BulletPanelDimensions,
   pointer: Point,
-  spec: BulletGraphSpec,
+  spec: BulletSpec,
 ): Pick<ActiveValueDetails, 'value' | 'snapValue' | 'color' | 'pixelValue'> | undefined {
   const { graphArea, scale } = panel;
   const [min, max] = sortNumbers(scale.domain()) as ContinuousDomain;
   const isWithinDomain = isBetween(min, max);
 
   switch (spec.subtype) {
-    case BulletGraphSubtype.circle:
-    case BulletGraphSubtype.halfCircle:
-    case BulletGraphSubtype.twoThirdsCircle: {
+    case BulletSubtype.circle:
+    case BulletSubtype.halfCircle:
+    case BulletSubtype.twoThirdsCircle: {
       const { radius } = getAngledChartSizing(graphArea.size, spec.subtype);
       const center = {
         x: graphArea.center.x,
@@ -111,7 +111,7 @@ function getPanelValue(
       break;
     }
 
-    case BulletGraphSubtype.horizontal: {
+    case BulletSubtype.horizontal: {
       const yCenterOffset = Math.abs(pointer.y - graphArea.origin.y - TARGET_SIZE / 2);
 
       if (yCenterOffset > TARGET_SIZE / 2 + HOVER_SLOP) return;
@@ -136,7 +136,7 @@ function getPanelValue(
       break;
     }
 
-    case BulletGraphSubtype.vertical: {
+    case BulletSubtype.vertical: {
       const xCenterOffset = Math.abs(pointer.x - graphArea.center.x - GRAPH_PADDING.left);
 
       if (xCenterOffset > TARGET_SIZE / 2 + HOVER_SLOP) return;
diff --git a/packages/charts/src/chart_types/bullet_graph/selectors/get_bullet_spec.ts b/packages/charts/src/chart_types/bullet_graph/selectors/get_bullet_spec.ts
index 7fe31ceac6..6498d066c9 100644
--- a/packages/charts/src/chart_types/bullet_graph/selectors/get_bullet_spec.ts
+++ b/packages/charts/src/chart_types/bullet_graph/selectors/get_bullet_spec.ts
@@ -7,13 +7,13 @@
  */
 
 import { ChartType } from '../../../chart_types';
-import { BulletGraphSpec } from '../../../chart_types/bullet_graph/spec';
+import { BulletSpec } from '../../../chart_types/bullet_graph/spec';
 import { SpecType } from '../../../specs';
 import { GlobalChartState } from '../../../state/chart_state';
 import { getSpecFromStore } from '../../../state/utils';
 
 /** @internal */
 
-export function getBulletSpec(state: GlobalChartState): BulletGraphSpec {
-  return getSpecFromStore<BulletGraphSpec, true>(state.specs, ChartType.BulletGraph, SpecType.Series, true);
+export function getBulletSpec(state: GlobalChartState): BulletSpec {
+  return getSpecFromStore<BulletSpec, true>(state.specs, ChartType.Bullet, SpecType.Series, true);
 }
diff --git a/packages/charts/src/chart_types/bullet_graph/selectors/get_layout.ts b/packages/charts/src/chart_types/bullet_graph/selectors/get_layout.ts
index 5232164f09..21c608721d 100644
--- a/packages/charts/src/chart_types/bullet_graph/selectors/get_layout.ts
+++ b/packages/charts/src/chart_types/bullet_graph/selectors/get_layout.ts
@@ -8,7 +8,7 @@
 
 import { getBulletSpec } from './get_bullet_spec';
 import { getChartSize } from './get_chart_size';
-import { BulletDatum, BulletGraphSubtype } from '../../../chart_types/bullet_graph/spec';
+import { BulletDatum, BulletSubtype } from '../../../chart_types/bullet_graph/spec';
 import { createCustomCachedSelector } from '../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../state/selectors/get_settings_spec';
 import { withTextMeasure } from '../../../utils/bbox/canvas_text_bbox_calculator';
@@ -56,7 +56,7 @@ export interface BulletLayoutAlignment {
 }
 
 /** @internal */
-export interface BulletGraphLayout {
+export interface BulletLayout {
   /** Common panel size */
   panel: Size;
   headerLayout: (BulletHeaderLayout | null)[][];
@@ -64,26 +64,26 @@ export interface BulletGraphLayout {
   shouldRenderMetric: boolean;
 }
 
-const minChartHeights: Record<BulletGraphSubtype, number> = {
-  [BulletGraphSubtype.horizontal]: 50,
-  [BulletGraphSubtype.vertical]: 100,
-  [BulletGraphSubtype.circle]: 160,
-  [BulletGraphSubtype.halfCircle]: 160,
-  [BulletGraphSubtype.twoThirdsCircle]: 160,
+const minChartHeights: Record<BulletSubtype, number> = {
+  [BulletSubtype.horizontal]: 50,
+  [BulletSubtype.vertical]: 100,
+  [BulletSubtype.circle]: 160,
+  [BulletSubtype.halfCircle]: 160,
+  [BulletSubtype.twoThirdsCircle]: 160,
 };
 
-const minChartWidths: Record<BulletGraphSubtype, number> = {
-  [BulletGraphSubtype.horizontal]: 140,
-  [BulletGraphSubtype.vertical]: 140,
-  [BulletGraphSubtype.circle]: 160,
-  [BulletGraphSubtype.halfCircle]: 160,
-  [BulletGraphSubtype.twoThirdsCircle]: 160,
+const minChartWidths: Record<BulletSubtype, number> = {
+  [BulletSubtype.horizontal]: 140,
+  [BulletSubtype.vertical]: 140,
+  [BulletSubtype.circle]: 160,
+  [BulletSubtype.halfCircle]: 160,
+  [BulletSubtype.twoThirdsCircle]: 160,
 };
 
 /** @internal */
 export const getLayout = createCustomCachedSelector(
   [getBulletSpec, getChartSize, getSettingsSpecSelector],
-  (spec, chartSize, { locale }): BulletGraphLayout => {
+  (spec, chartSize, { locale }): BulletLayout => {
     const { data } = spec;
     const rows = data.length;
     const columns = data.reduce((acc, row) => {
diff --git a/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts b/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts
index 4a02b028de..a24f3c1b1c 100644
--- a/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts
+++ b/packages/charts/src/chart_types/bullet_graph/selectors/get_panel_dimensions.ts
@@ -9,7 +9,7 @@
 import { ScaleLinear, scaleLinear } from 'd3-scale';
 
 import { getBulletSpec } from './get_bullet_spec';
-import { BulletGraphLayout, BulletHeaderLayout, getLayout } from './get_layout';
+import { BulletLayout, BulletHeaderLayout, getLayout } from './get_layout';
 import { ChromaColorScale, Color } from '../../../common/colors';
 import { Rect } from '../../../geoms/types';
 import { createCustomCachedSelector } from '../../../state/create_selector';
@@ -20,10 +20,10 @@ import { Size } from '../../../utils/dimensions';
 import { GenericDomain, Range } from '../../../utils/domain';
 import { Point } from '../../../utils/point';
 import { ANGULAR_TICK_INTERVAL, TICK_INTERVAL } from '../renderer/canvas/constants';
-import { BulletDatum, BulletGraphSpec, BulletGraphSubtype } from '../spec';
-import { BulletGraphStyle, GRAPH_PADDING } from '../theme';
+import { BulletDatum, BulletSpec, BulletSubtype } from '../spec';
+import { BulletStyle, GRAPH_PADDING } from '../theme';
 import { getAngledChartSizing, getAnglesBySize } from '../utils/angular';
-import { ColorTick, getColorBands } from '../utils/color';
+import { ColorTick, getColorScaleWithBands } from '../utils/color';
 import { TickOptions, getTicks } from '../utils/ticks';
 
 /** @internal */
@@ -44,7 +44,7 @@ export type BulletPanelDimensions = {
 export type BulletDimensions = {
   rows: (BulletPanelDimensions | null)[][];
   panel: Size;
-} & Pick<BulletGraphLayout, 'layoutAlignment' | 'shouldRenderMetric'>;
+} & Pick<BulletLayout, 'layoutAlignment' | 'shouldRenderMetric'>;
 
 /** @internal */
 export const getPanelDimensions = createCustomCachedSelector(
@@ -55,13 +55,8 @@ export const getPanelDimensions = createCustomCachedSelector(
     { bulletGraph: bulletGraphStyles },
     backgroundColor,
   ): BulletDimensions => {
-    if (shouldRenderMetric)
-      return {
-        rows: [],
-        panel: { width: 0, height: 0 },
-        layoutAlignment,
-        shouldRenderMetric,
-      };
+    // TODO: simplify color scale lookup for shouldRenderMetric case. Now we do more computations
+    // than necessary but for now this provides the same color bands / scale between Metric and bullet rendering
 
     const rows = headerLayout.map((row, rowIndex) => {
       return row.map((bulletGraph, columnIndex): BulletPanelDimensions | null => {
@@ -109,16 +104,16 @@ export const getPanelDimensions = createCustomCachedSelector(
 );
 
 function getSubtypeDimensions(
-  { subtype, colorBands: colorBandsConfig }: BulletGraphSpec,
+  { subtype, colorBands: colorBandsConfig }: BulletSpec,
   graphSize: Size,
   { ticks: desiredTicks, domain, niceDomain }: BulletDatum,
-  { colorBands: defaultColorBandsConfig, fallbackBandColor }: BulletGraphStyle,
+  { colorBands: defaultColorBandsConfig, fallbackBandColor }: BulletStyle,
   backgroundColor: Color,
 ): Pick<BulletPanelDimensions, 'scale' | 'colorScale' | 'colorBands' | 'ticks'> {
   switch (subtype) {
-    case BulletGraphSubtype.circle:
-    case BulletGraphSubtype.halfCircle:
-    case BulletGraphSubtype.twoThirdsCircle: {
+    case BulletSubtype.circle:
+    case BulletSubtype.halfCircle:
+    case BulletSubtype.twoThirdsCircle: {
       const [startAngle, endAngle] = getAnglesBySize(subtype);
       const { radius } = getAngledChartSizing(graphSize, subtype);
 
@@ -129,7 +124,7 @@ function getSubtypeDimensions(
         interval: ANGULAR_TICK_INTERVAL,
       });
 
-      const { bands: colorBands, scale: colorScale } = getColorBands(
+      const { bands: colorBands, scale: colorScale } = getColorScaleWithBands(
         scale,
         colorBandsConfig ?? defaultColorBandsConfig,
         ticks,
@@ -145,7 +140,7 @@ function getSubtypeDimensions(
       };
     }
 
-    case BulletGraphSubtype.horizontal: {
+    case BulletSubtype.horizontal: {
       const paddedWidth = graphSize.width - GRAPH_PADDING.left - GRAPH_PADDING.right;
       const { scale, ticks } = getScaleWithTicks(domain, [0, paddedWidth], {
         desiredTicks,
@@ -153,7 +148,7 @@ function getSubtypeDimensions(
         interval: TICK_INTERVAL,
       });
 
-      const { bands: colorBands, scale: colorScale } = getColorBands(
+      const { bands: colorBands, scale: colorScale } = getColorScaleWithBands(
         scale,
         colorBandsConfig ?? defaultColorBandsConfig,
         ticks,
@@ -169,7 +164,7 @@ function getSubtypeDimensions(
       };
     }
 
-    case BulletGraphSubtype.vertical: {
+    case BulletSubtype.vertical: {
       const paddedHeight = graphSize.height - GRAPH_PADDING.bottom - GRAPH_PADDING.top;
       const { scale, ticks } = getScaleWithTicks(domain, [0, paddedHeight], {
         desiredTicks,
@@ -177,7 +172,7 @@ function getSubtypeDimensions(
         interval: TICK_INTERVAL,
       });
 
-      const { bands: colorBands, scale: colorScale } = getColorBands(
+      const { bands: colorBands, scale: colorScale } = getColorScaleWithBands(
         scale,
         colorBandsConfig ?? defaultColorBandsConfig,
         ticks,
diff --git a/packages/charts/src/chart_types/bullet_graph/spec.ts b/packages/charts/src/chart_types/bullet_graph/spec.ts
index 39ace18003..df5bc1cab4 100644
--- a/packages/charts/src/chart_types/bullet_graph/spec.ts
+++ b/packages/charts/src/chart_types/bullet_graph/spec.ts
@@ -45,7 +45,7 @@ export interface BulletDatum {
 }
 
 /** @public */
-export const BulletGraphSubtype = Object.freeze({
+export const BulletSubtype = Object.freeze({
   vertical: 'vertical' as const,
   horizontal: 'horizontal' as const,
   /**
@@ -58,7 +58,7 @@ export const BulletGraphSubtype = Object.freeze({
   twoThirdsCircle: 'two-thirds-circle' as const,
 });
 /** @public */
-export type BulletGraphSubtype = $Values<typeof BulletGraphSubtype>;
+export type BulletSubtype = $Values<typeof BulletSubtype>;
 
 /** @public */
 export interface BulletValueLabels {
@@ -68,18 +68,18 @@ export interface BulletValueLabels {
 }
 
 /** @alpha */
-export interface BulletGraphSpec extends Spec {
+export interface BulletSpec extends Spec {
   specType: typeof SpecType.Series;
-  chartType: typeof ChartType.BulletGraph;
+  chartType: typeof ChartType.Bullet;
   data: (BulletDatum | undefined)[][];
-  subtype: BulletGraphSubtype;
+  subtype: BulletSubtype;
   tickSnapStep?: number;
   colorBands?: BulletColorConfig;
   valueLabels?: Optional<BulletValueLabels>;
 }
 
 /** @internal */
-export const mergeValueLabels = (labels?: BulletGraphSpec['valueLabels']) =>
+export const mergeValueLabels = (labels?: BulletSpec['valueLabels']) =>
   mergePartial<BulletValueLabels>(
     {
       active: 'Active',
@@ -89,10 +89,10 @@ export const mergeValueLabels = (labels?: BulletGraphSpec['valueLabels']) =>
     labels,
   );
 
-const buildProps = buildSFProps<BulletGraphSpec>()(
+const buildProps = buildSFProps<BulletSpec>()(
   {
     specType: SpecType.Series,
-    chartType: ChartType.BulletGraph,
+    chartType: ChartType.Bullet,
   },
   {},
 );
@@ -101,9 +101,9 @@ const buildProps = buildSFProps<BulletGraphSpec>()(
  * Add Goal spec to chart
  * @alpha
  */
-export const BulletGraph = function (
+export const Bullet = function (
   props: SFProps<
-    BulletGraphSpec,
+    BulletSpec,
     keyof (typeof buildProps)['overrides'],
     keyof (typeof buildProps)['defaults'],
     keyof (typeof buildProps)['optionals'],
@@ -113,7 +113,7 @@ export const BulletGraph = function (
   const { defaults, overrides } = buildProps;
   const constraints = {};
 
-  useSpecFactory<BulletGraphSpec>({
+  useSpecFactory<BulletSpec>({
     ...defaults,
     ...stripUndefined(props),
     ...overrides,
@@ -123,4 +123,4 @@ export const BulletGraph = function (
 };
 
 /** @public */
-export type BulletGraphProps = ComponentProps<typeof BulletGraph>;
+export type BulletProps = ComponentProps<typeof Bullet>;
diff --git a/packages/charts/src/chart_types/bullet_graph/theme.ts b/packages/charts/src/chart_types/bullet_graph/theme.ts
index 961be7d672..9d9cf1f128 100644
--- a/packages/charts/src/chart_types/bullet_graph/theme.ts
+++ b/packages/charts/src/chart_types/bullet_graph/theme.ts
@@ -15,7 +15,7 @@ import { Padding } from '../../utils/dimensions';
 import { DARK_BASE_COLORS, LIGHT_BASE_COLORS } from '../../utils/themes/base_colors';
 
 /** @public */
-export interface BulletGraphStyle {
+export interface BulletStyle {
   textColor: Color;
   border: Color;
   barBackground: Color;
@@ -30,11 +30,11 @@ export interface BulletGraphStyle {
 }
 
 /** @internal */
-export const LIGHT_THEME_BULLET_STYLE: BulletGraphStyle = {
+export const LIGHT_THEME_BULLET_STYLE: BulletStyle = {
   textColor: LIGHT_BASE_COLORS.darkestShade,
   border: '#EDF0F5',
   barBackground: LIGHT_BASE_COLORS.darkestShade,
-  colorBands: ['#D9C6EF', '#AA87D1'],
+  colorBands: ['#AA87D1', '#D9C6EF'],
   nonFiniteText: 'N/A',
   minHeight: 64,
   angularTickLabelPadding: 10,
@@ -42,7 +42,7 @@ export const LIGHT_THEME_BULLET_STYLE: BulletGraphStyle = {
 };
 
 /** @internal */
-export const DARK_THEME_BULLET_STYLE: BulletGraphStyle = {
+export const DARK_THEME_BULLET_STYLE: BulletStyle = {
   textColor: '#E0E5EE',
   border: DARK_BASE_COLORS.lightShade,
   barBackground: '#FFF',
diff --git a/packages/charts/src/chart_types/bullet_graph/utils/angular.ts b/packages/charts/src/chart_types/bullet_graph/utils/angular.ts
index 600ed024a1..cea4d55efb 100644
--- a/packages/charts/src/chart_types/bullet_graph/utils/angular.ts
+++ b/packages/charts/src/chart_types/bullet_graph/utils/angular.ts
@@ -10,32 +10,32 @@ import { TAU } from '../../../common/constants';
 import { clamp } from '../../../utils/common';
 import { Size } from '../../../utils/dimensions';
 import { TARGET_SIZE } from '../renderer/canvas/constants';
-import { BulletGraphSubtype } from '../spec';
+import { BulletSubtype } from '../spec';
 import { GRAPH_PADDING } from '../theme';
 
-type AngularBulletSubtypes = Extract<BulletGraphSubtype, 'circle' | 'half-circle' | 'two-thirds-circle'>;
+type AngularBulletSubtypes = Extract<BulletSubtype, 'circle' | 'half-circle' | 'two-thirds-circle'>;
 
 const sizeAngles: Record<AngularBulletSubtypes, { startAngle: number; endAngle: number }> = {
-  [BulletGraphSubtype.halfCircle]: {
+  [BulletSubtype.halfCircle]: {
     startAngle: 1 * Math.PI,
     endAngle: 0,
   },
-  [BulletGraphSubtype.twoThirdsCircle]: {
+  [BulletSubtype.twoThirdsCircle]: {
     startAngle: 1.25 * Math.PI,
     endAngle: -0.25 * Math.PI,
   },
-  [BulletGraphSubtype.circle]: {
+  [BulletSubtype.circle]: {
     startAngle: 1.5 * Math.PI,
     endAngle: -0.5 * Math.PI,
   },
 };
 
 /** @internal */
-export function getAnglesBySize(subtype: BulletGraphSubtype): [startAngle: number, endAngle: number] {
-  if (subtype === BulletGraphSubtype.vertical || subtype === BulletGraphSubtype.horizontal) {
+export function getAnglesBySize(subtype: BulletSubtype): [startAngle: number, endAngle: number] {
+  if (subtype === BulletSubtype.vertical || subtype === BulletSubtype.horizontal) {
     throw new Error('Attempting to retrieve angle size from horizontal/vertical bullet');
   }
-  const angles = sizeAngles[subtype] ?? sizeAngles[BulletGraphSubtype.twoThirdsCircle];
+  const angles = sizeAngles[subtype] ?? sizeAngles[BulletSubtype.twoThirdsCircle];
   // Negative angles used to match current radian pattern
   const startAngle = -angles.startAngle;
   // limit endAngle to startAngle +/- 2π
@@ -44,17 +44,17 @@ export function getAnglesBySize(subtype: BulletGraphSubtype): [startAngle: numbe
 }
 
 const heightModifiers: Record<AngularBulletSubtypes, number> = {
-  [BulletGraphSubtype.halfCircle]: 0.5,
-  [BulletGraphSubtype.twoThirdsCircle]: 0.86, // approximated to account for flare of arc stroke at the bottom
-  [BulletGraphSubtype.circle]: 1,
+  [BulletSubtype.halfCircle]: 0.5,
+  [BulletSubtype.twoThirdsCircle]: 0.86, // approximated to account for flare of arc stroke at the bottom
+  [BulletSubtype.circle]: 1,
 };
 
 /** @internal */
 export function getAngledChartSizing(
   graphSize: Size,
-  subtype: BulletGraphSubtype,
+  subtype: BulletSubtype,
 ): { maxWidth: number; maxHeight: number; radius: number } {
-  if (subtype === BulletGraphSubtype.vertical || subtype === BulletGraphSubtype.horizontal) {
+  if (subtype === BulletSubtype.vertical || subtype === BulletSubtype.horizontal) {
     throw new Error('Attempting to retrieve angle size from horizontal/vertical bullet');
   }
   const heightModifier = heightModifiers[subtype] ?? 1;
diff --git a/packages/charts/src/chart_types/bullet_graph/utils/color.ts b/packages/charts/src/chart_types/bullet_graph/utils/color.ts
index 73d1496235..126094e927 100644
--- a/packages/charts/src/chart_types/bullet_graph/utils/color.ts
+++ b/packages/charts/src/chart_types/bullet_graph/utils/color.ts
@@ -7,15 +7,17 @@
  */
 
 import chroma from 'chroma-js';
+import { extent } from 'd3-array';
 import { ScaleLinear } from 'd3-scale';
-import { $Values } from 'utility-types';
+import { $Values, Required } from 'utility-types';
 
 import { BaseBoundsConfig, OpenClosedBoundsConfig } from './bounds';
 import { combineColors } from '../../../common/color_calcs';
 import { RGBATupleToString, colorToRgba, getChromaColor } from '../../../common/color_library_wrappers';
-import { ChromaColorScale, Color } from '../../../common/colors';
-import { isFiniteNumber, isNil, isWithinRange, sortNumbers } from '../../../utils/common';
+import { ChromaColorScale, Color, Colors } from '../../../common/colors';
+import { clamp, isFiniteNumber, isNil, isSorted, isWithinRange, sortNumbers } from '../../../utils/common';
 import { ContinuousDomain, GenericDomain } from '../../../utils/domain';
+import { Logger } from '../../../utils/logger';
 
 /**
  * @public
@@ -55,15 +57,15 @@ export type ColorBandConfig = OpenClosedBoundsConfig<number | ColorBandValue> &
 /** @public */
 export interface ColorBandSimpleConfig {
   /**
-   * Distinct color classes to defined discrete color breakdown
+   * Distinct color steps to defined discrete color breakdown
    * Defaults to intervals between ticks
    *
-   * Number value scales colors evenly n times
-   * Array of numbers defines the color stop positions
+   * Number - scales colors evenly n times, does not support continuous color blending (i.e. n \>\> 10)
+   * Array of numbers - defines the color stop positions
    *
    * See https://gka.github.io/chroma.js/#scale-classes
    */
-  classes?: number | number[];
+  steps?: number | number[];
   colors: Color[];
 }
 
@@ -84,7 +86,7 @@ const getValueByTypeFn = ([min, max]: ContinuousDomain) => {
     if (typeof bandValue === 'number') return bandValue + openOffsetValue;
     const { type, value } = bandValue;
     if (type === 'scale') return value + openOffsetValue;
-    if (type === 'percentage') return min + value * domainLength + openOffsetValue;
+    if (type === 'percentage') return min + (value / 100) * domainLength + openOffsetValue;
     return null;
   };
 };
@@ -110,7 +112,7 @@ const getDomainPairFn = (domain: ContinuousDomain) => {
 const isComplexConfig = (config: BulletColorConfig): config is ColorBandComplexConfig =>
   Array.isArray(config) && typeof config[0] !== 'string';
 
-const getFullDomainTicks = ([min, max]: ContinuousDomain, ticks: number[]): number[] => {
+const getColorBandsFromTicks = ([min, max]: ContinuousDomain, ticks: number[]): number[] => {
   const fullTicks = ticks.slice();
   const first = fullTicks.at(0)!;
   const last = fullTicks.at(-1)!;
@@ -124,22 +126,18 @@ const getFullDomainTicks = ([min, max]: ContinuousDomain, ticks: number[]): numb
     if (maxIndex === 0) fullTicks.unshift(max);
     else fullTicks.push(max);
   }
-  return fullTicks;
+  return fullTicks.flatMap((n, i, { length }) => (i === 0 || i === length - 1 ? [n] : [n, n]));
 };
 
-function getScaleInputs(
-  baseDomain: ContinuousDomain,
-  flippedDomain: boolean,
-  config: BulletColorConfig,
-  fullTicks: number[],
-  backgroundColor: Color,
-): {
-  domain: number[];
+interface ScaleInputs {
+  colorBandDomain?: number[];
   colors: string[];
-  classes?: number | number[];
-} {
+  steps?: number | number[];
+}
+
+function getScaleInputs(baseDomain: ContinuousDomain, config: BulletColorConfig, backgroundColor: Color): ScaleInputs {
   if (!Array.isArray(config) || !isComplexConfig(config)) {
-    const { colors: rawColors, classes }: { colors: string[]; classes?: number | number[] } = !Array.isArray(config)
+    const { colors: rawColors, steps }: { colors: string[]; steps?: number | number[] } = !Array.isArray(config)
       ? config
       : {
           colors: config,
@@ -158,21 +156,14 @@ function getScaleInputs(
       }
     }
 
-    if (flippedDomain) {
-      // Array of colors should always begin at the domain start
-      colors.reverse();
-    }
-
     return {
-      domain: baseDomain,
       colors,
-      classes: classes ?? fullTicks,
+      steps,
     };
   }
 
   if (!isComplexConfig(config)) {
     return {
-      domain: baseDomain,
       colors: config,
     };
   }
@@ -200,40 +191,38 @@ function getScaleInputs(
   );
 
   let prevMax = -Infinity;
-  return boundedDomains.reduce<{
-    domain: number[];
-    colors: string[];
-  }>(
+  return boundedDomains.reduce<Required<ScaleInputs, 'colorBandDomain'>>(
     (acc, [min, max], i) => {
+      // TODO: Add better error handling around this logic, the complex config right now assumes the following:
+      // - All ranges are ordered from min to max
+      // - All ranges are compatible with each other such that there is no overlapping or excluded ranges
+      // Ideally we validate the config and fix it the best we can based on what is provided, filling or clamping as needed
       const testMinValue = isFiniteNumber(min) ? min : isFiniteNumber(max) ? max : null;
-      if (testMinValue === null || testMinValue < prevMax) return acc;
-      const newMaxValue = isFiniteNumber(max) ? max : isFiniteNumber(min) ? min : null;
-      if (newMaxValue === null) {
-        // TODO remove this error
-        throw new Error('newMaxValue is null?????');
-      }
-      prevMax = newMaxValue;
+      if (testMinValue === null || testMinValue < prevMax) {
+        Logger.warn(`Error with ColorBandComplexConfig:
 
-      const color = colors[i];
-
-      if (!color) {
-        // TODO remove this error
-        throw new Error('color is undefined????????');
+Ranges are incompatible with each other such that there is either overlapping or excluded range pairs`);
+        return acc;
       }
+      const newMaxValue = isFiniteNumber(max) ? max : isFiniteNumber(min) ? min : null;
+      if (newMaxValue === null) return acc;
+
+      prevMax = newMaxValue;
+      const color = colors[i] ?? Colors.Transparent.keyword;
 
       if (isFiniteNumber(min)) {
-        acc.domain.push(min);
+        acc.colorBandDomain.push(min);
         acc.colors.push(color);
       }
       if (isFiniteNumber(max)) {
-        acc.domain.push(max);
+        acc.colorBandDomain.push(max);
         acc.colors.push(color);
       }
 
       return acc;
     },
     {
-      domain: [],
+      colorBandDomain: [],
       colors: [],
     },
   );
@@ -242,19 +231,38 @@ function getScaleInputs(
 /** @internal */
 export function getColorScale(
   baseDomain: ContinuousDomain,
-  flippedDomain: boolean,
   config: BulletColorConfig,
-  fullTicks: number[],
   backgroundColor: Color,
   fallbackBandColor: Color,
-): ChromaColorScale {
-  const { colors, domain, classes } = getScaleInputs(baseDomain, flippedDomain, config, fullTicks, backgroundColor);
-  const scale = chroma.scale(colors).mode('lab').domain(domain);
-
-  if (classes) scale.classes(classes);
-  const isInDomain = isWithinRange(baseDomain);
+): [colorScale: ChromaColorScale, scaleInputs: ScaleInputs] {
+  const { colors, colorBandDomain, steps: userSteps } = getScaleInputs(baseDomain, config, backgroundColor);
+  const scale = chroma
+    .scale(colors)
+    .mode('lab')
+    .domain(colorBandDomain ?? baseDomain);
+  let steps = userSteps;
+  let scaleDomain = baseDomain;
+
+  if (steps !== undefined) {
+    if (Array.isArray(steps) && !isSorted(steps, { order: 'ascending' })) {
+      Logger.warn(
+        `Ignoring Bullet.colorBands.steps. Expected a sorted ascending array of numbers without duplicates.\n\n\tReceived:${JSON.stringify(steps)}`,
+      );
+      steps = undefined;
+    } else if (typeof steps === 'number' && steps < 1) {
+      Logger.warn(`Ignoring Bullet.colorBands.steps. Expected a positive number.\n\n\tReceived:${steps}`);
+      steps = undefined;
+    } else {
+      if (Array.isArray(steps)) {
+        const [min = NaN, max = NaN] = extent(steps);
+        scaleDomain = [min, max];
+      }
+      scale.classes(steps);
+    }
+  }
+  const isInDomain = isWithinRange(scaleDomain);
 
-  return (n) => (isInDomain(n) ? scale(n) : getChromaColor(fallbackBandColor));
+  return [(n) => (isInDomain(n) ? scale(n) : getChromaColor(fallbackBandColor)), { colors, colorBandDomain, steps }];
 }
 
 /** @internal */
@@ -269,7 +277,7 @@ export type ColorTick = { color: Color } & BandPositions;
 
 // TODO memoize for duplicate calls
 /** @internal */
-export function getColorBands(
+export function getColorScaleWithBands(
   scale: ScaleLinear<number, number>,
   config: BulletColorConfig,
   ticks: number[],
@@ -280,43 +288,77 @@ export function getColorBands(
   bands: ColorTick[];
 } {
   const domain = scale.domain() as GenericDomain;
-  const orderedDomain = sortNumbers(domain) as ContinuousDomain;
-  const fullTicks = getFullDomainTicks(orderedDomain, ticks);
-  const colorScale = getColorScale(
-    orderedDomain,
-    domain[0] > domain[1],
-    config,
-    sortNumbers(fullTicks),
-    backgroundColor,
-    fallbackBandColor,
-  );
-  const scaledBandPositions = fullTicks.reduce<[pixelPosition: BandPositions, tick: number][]>((acc, start, i) => {
-    const end = fullTicks[i + 1];
-    if (end === undefined) return acc;
-    const scaledStart = scale(start);
-    const scaledEnd = scale(end);
-    const size = Math.abs(scaledEnd - scaledStart);
-    acc.push([
-      { start: scaledStart, end: scaledEnd, size },
-      // pegs color at start of band - maybe allow control of this later
-      start + (end - start) / 2,
-    ]);
-    return acc;
-  }, []);
-
-  // TODO allow continuous gradients
-  const bands = scaledBandPositions.reduce<ColorTick[]>((acc, [pxPosition, tick]) => {
-    return [
-      ...acc,
-      {
-        ...pxPosition,
-        color: colorScale(tick).hex(),
-      },
-    ];
-  }, []);
+  const baseDomain = sortNumbers(domain) as ContinuousDomain;
+  const [colorScale, colorScaleInputs] = getColorScale(baseDomain, config, backgroundColor, fallbackBandColor);
 
   return {
     scale: colorScale,
-    bands,
+    bands: getColorBands(scale, colorScale, ticks, baseDomain, colorScaleInputs),
   };
 }
+
+function getColorBands(
+  scale: ScaleLinear<number, number>,
+  colorScale: ChromaColorScale,
+  ticks: number[],
+  baseDomain: ContinuousDomain,
+  { colorBandDomain, steps }: ScaleInputs,
+): ColorTick[] {
+  const [min, max] = baseDomain;
+  if (steps) {
+    if (Array.isArray(steps)) {
+      const bands: ColorTick[] = [];
+
+      for (let i = 0; i < steps.length - 1; i++) {
+        const start = steps[i]!;
+        const end = steps[i + 1]!;
+        const [scaledStart, scaledEnd] = sortNumbers([scale(clamp(start, min, max)), scale(clamp(end, min, max))]);
+
+        bands.push({
+          start: scaledStart,
+          end: scaledEnd,
+          size: Math.abs(scaledEnd - scaledStart),
+          color: colorScale(start + Math.abs(end - start) / 2).hex(),
+        });
+      }
+
+      return bands;
+    }
+    const domainDelta = max - min;
+    const size = domainDelta / steps;
+
+    return Array.from({ length: steps }, (_, i) => {
+      const [start, end] = sortNumbers([scale(i * size + min), scale((i + 1) * size + min)]);
+
+      return {
+        start,
+        end,
+        color: colorScale((i + 0.5) * size + min).hex(),
+        size: Math.abs(end - start),
+      };
+    });
+  }
+
+  const bandPositions = colorBandDomain ?? getColorBandsFromTicks(baseDomain, ticks);
+  const scaledColorBands: ColorTick[] = [];
+
+  for (let i = 0; i < bandPositions.length; i += 2) {
+    const [start, end] = bandPositions.slice(i, i + 2);
+    if (start === undefined || end === undefined) continue;
+
+    const [scaledStart, scaledEnd] = sortNumbers([scale(clamp(start, min, max)), scale(clamp(end, min, max))]);
+    const size = Math.abs(scaledEnd - scaledStart);
+    const tick = clamp(start + (end - start) / 2, min, max); // pegs color at middle of band - maybe allow control of this later
+
+    if (scaledStart === scaledEnd) continue;
+
+    scaledColorBands.push({
+      start: scaledStart,
+      end: scaledEnd,
+      size,
+      color: colorScale(tick).hex(),
+    });
+  }
+
+  return scaledColorBands;
+}
diff --git a/packages/charts/src/chart_types/goal_chart/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts
index f588dcc318..f085e8fd07 100644
--- a/packages/charts/src/chart_types/goal_chart/specs/index.ts
+++ b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -93,7 +93,7 @@ const buildProps = buildSFProps<GoalSpec>()(
 
 /**
  * Add Goal spec to chart
- * @deprecated please use `BulletGraph` spec instead
+ * @deprecated please use `Bullet` spec instead
  * @alpha
  */
 export const Goal = function (
diff --git a/packages/charts/src/chart_types/index.ts b/packages/charts/src/chart_types/index.ts
index d53b31f064..2e45168492 100644
--- a/packages/charts/src/chart_types/index.ts
+++ b/packages/charts/src/chart_types/index.ts
@@ -22,7 +22,7 @@ export const ChartType = Object.freeze({
   Heatmap: 'heatmap' as const,
   Wordcloud: 'wordcloud' as const,
   Metric: 'metric' as const,
-  BulletGraph: 'bullet_graph' as const,
+  Bullet: 'bullet' as const,
 });
 /** @public */
 export type ChartType = $Values<typeof ChartType>;
diff --git a/packages/charts/src/chart_types/specs.ts b/packages/charts/src/chart_types/specs.ts
index c95e647525..7f02f9c615 100644
--- a/packages/charts/src/chart_types/specs.ts
+++ b/packages/charts/src/chart_types/specs.ts
@@ -48,5 +48,5 @@ export {
   MetricDatum,
 } from './metric/specs';
 
-export { BulletGraph, BulletGraphSpec, BulletDatum, BulletGraphSubtype, BulletValueLabels } from './bullet_graph/spec';
-export { BulletGraphStyle } from './bullet_graph/theme';
+export { Bullet, BulletProps, BulletSpec, BulletDatum, BulletSubtype, BulletValueLabels } from './bullet_graph/spec';
+export { BulletStyle } from './bullet_graph/theme';
diff --git a/packages/charts/src/state/chart_state.ts b/packages/charts/src/state/chart_state.ts
index 611569a4af..58ef5b7c8d 100644
--- a/packages/charts/src/state/chart_state.ts
+++ b/packages/charts/src/state/chart_state.ts
@@ -24,7 +24,7 @@ import { LegendItemLabel } from './selectors/get_legend_items_labels';
 import { DebugState } from './types';
 import { getInitialPointerState, getInitialTooltipState } from './utils';
 import { ChartType } from '../chart_types';
-import { BulletGraphState } from '../chart_types/bullet_graph/chart_state';
+import { BulletState } from '../chart_types/bullet_graph/chart_state';
 import { FlameState } from '../chart_types/flame_chart/internal_chart_state';
 import { GoalState } from '../chart_types/goal_chart/state/chart_state';
 import { HeatmapState } from '../chart_types/heatmap/state/chart_state';
@@ -498,7 +498,7 @@ const constructors: Record<ChartType, () => InternalChartState | null> = {
   [ChartType.Heatmap]: () => new HeatmapState(),
   [ChartType.Wordcloud]: () => new WordcloudState(),
   [ChartType.Metric]: () => new MetricState(),
-  [ChartType.BulletGraph]: () => new BulletGraphState(),
+  [ChartType.Bullet]: () => new BulletState(),
   [ChartType.Global]: () => null,
 }; // with no default, TS signals if a new chart type isn't added here too
 
diff --git a/packages/charts/src/utils/common.test.ts b/packages/charts/src/utils/common.test.ts
index 48acbd6eae..b1f617db46 100644
--- a/packages/charts/src/utils/common.test.ts
+++ b/packages/charts/src/utils/common.test.ts
@@ -22,6 +22,8 @@ import {
   isDefinedFrom,
   isBetween,
   clampAll,
+  sortNumbers,
+  isSorted,
 } from './common';
 
 describe('common utilities', () => {
@@ -929,6 +931,122 @@ describe('#isUniqueArray', () => {
   });
 });
 
+describe('#sortNumbers', () => {
+  describe('ascending', () => {
+    it('should sort positive values', () => {
+      expect(sortNumbers([20, 5, 0, 200])).toEqual([0, 5, 20, 200]);
+    });
+
+    it('should sort negative values', () => {
+      expect(sortNumbers([-20, -5, 0, -200])).toEqual([-200, -20, -5, 0]);
+    });
+
+    it('should sort negative values', () => {
+      expect(sortNumbers([-20, -5, 20, 5, 0, 200, 0, -200])).toEqual([-200, -20, -5, 0, 0, 5, 20, 200]);
+    });
+  });
+
+  describe('descending', () => {
+    it('should sort positive values', () => {
+      expect(sortNumbers([20, 5, 0, 200], true)).toEqual([200, 20, 5, 0]);
+    });
+
+    it('should sort negative values', () => {
+      expect(sortNumbers([-20, -5, 0, -200], true)).toEqual([0, -5, -20, -200]);
+    });
+
+    it('should sort negative values', () => {
+      expect(sortNumbers([-20, -5, 20, 5, 0, 200, 0, -200], true)).toEqual([200, 20, 5, 0, 0, -5, -20, -200]);
+    });
+  });
+});
+
+describe('#isSorted', () => {
+  it('should sort empty as true', () => {
+    expect(isSorted([])).toBe(true);
+  });
+
+  it('should sort single as true', () => {
+    expect(isSorted([1])).toBe(true);
+  });
+
+  it('should sort double as true', () => {
+    expect(isSorted([1, 10])).toBe(true);
+  });
+
+  it('should sort double revered as true', () => {
+    expect(isSorted([10, 1])).toBe(true);
+  });
+
+  it('should sort many as true', () => {
+    expect(isSorted([1, 10, 100])).toBe(true);
+  });
+
+  it('should sort many revered as true', () => {
+    expect(isSorted([100, 10, 1])).toBe(true);
+  });
+
+  it('should force ascending sort', () => {
+    expect(isSorted([100, 10, 1], { order: 'ascending' })).toBe(false);
+  });
+
+  it('should force descending sort', () => {
+    expect(isSorted([1, 10, 100], { order: 'descending' })).toBe(false);
+  });
+
+  it('should sort many revered as true', () => {
+    expect(isSorted([100, 10, 1])).toBe(true);
+  });
+
+  it('should sort many mixed as true', () => {
+    expect(isSorted([-100, -10, 1, 10, 100])).toBe(true);
+  });
+
+  it('should sort many mixed as false', () => {
+    expect(isSorted([-100, 10, 1, 10, 100])).toBe(false);
+  });
+
+  it('should sort many mixed revered as true', () => {
+    expect(isSorted([100, 10, 1, -10, -100])).toBe(true);
+  });
+
+  it('should sort many mixed revered as false', () => {
+    expect(isSorted([100, 10, 1, 10, -100])).toBe(false);
+  });
+
+  it('should sort many mixed revered as false', () => {
+    expect(isSorted([100, 10, 1, -10, -10, -100])).toBe(false);
+  });
+
+  it('should sort many mixed revered as false', () => {
+    expect(isSorted([100, 10, 1, -10, -10, -100], { allowDuplicates: true })).toBe(true);
+  });
+
+  it('should sort double with dups as false', () => {
+    expect(isSorted([1, 1])).toBe(false);
+  });
+
+  it('should sort double with dups as true', () => {
+    expect(isSorted([1, 1], { allowDuplicates: true })).toBe(true);
+  });
+
+  it('should sort many with dups as false', () => {
+    expect(isSorted([0, 1, 10, 10, 100])).toBe(false);
+  });
+
+  it('should sort many with dups as true', () => {
+    expect(isSorted([0, 1, 10, 10, 100], { allowDuplicates: true })).toBe(true);
+  });
+
+  it('should sort many reversed with dups as false', () => {
+    expect(isSorted([100, 10, 10, 1, 0])).toBe(false);
+  });
+
+  it('should sort many reversed with dups as true', () => {
+    expect(isSorted([100, 10, 10, 1, 0], { allowDuplicates: true })).toBe(true);
+  });
+});
+
 describe('#isDefined', () => {
   it('should return false for null', () => {
     expect(isDefined(null)).toBe(false);
diff --git a/packages/charts/src/utils/common.tsx b/packages/charts/src/utils/common.tsx
index e69d172a45..fa21db9ac7 100644
--- a/packages/charts/src/utils/common.tsx
+++ b/packages/charts/src/utils/common.tsx
@@ -509,7 +509,34 @@ export function isUniqueArray<B, T>(arr: B[], extractor?: (value: B) => T) {
  * @internal
  */
 export function sortNumbers<T extends any[]>(arr: T, descending = false): T {
-  return arr.slice().sort(descending ? (a, b) => b - 1 : (a, b) => a - b) as T;
+  return arr.slice().sort(descending ? (a, b) => b - a : (a, b) => a - b) as T;
+}
+
+type SortTestFn = (n1?: number, n2?: number) => boolean;
+
+/**
+ * Returns true if array of numbers is sorted
+ * @internal
+ */
+export function isSorted<T extends number[]>(
+  arr: T,
+  options?: { allowDuplicates?: boolean; order?: 'ascending' | 'descending' },
+): boolean {
+  if (arr.length <= 1) return true;
+  const ascending = options?.order === 'ascending' ? true : options?.order === 'descending' ? false : arr[0]! < arr[1]!;
+  const isOrderedPair: SortTestFn =
+    options?.allowDuplicates ?? false
+      ? ascending
+        ? (n1 = NaN, n2 = NaN) => n1 <= n2
+        : (n1 = NaN, n2 = NaN) => n1 >= n2
+      : ascending
+        ? (n1 = NaN, n2 = NaN) => n1 < n2
+        : (n1 = NaN, n2 = NaN) => n1 > n2;
+
+  for (let i = 0; i < arr.length - 1; i++) {
+    if (!isOrderedPair(arr[i], arr[i + 1])) return false;
+  }
+  return true;
 }
 
 /**
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index 99f1151185..37a5023608 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -10,7 +10,7 @@ import { CSSProperties } from 'react';
 import { $Values } from 'utility-types';
 
 import { PartitionStyle } from './partition';
-import { BulletGraphStyle } from '../../chart_types/bullet_graph/theme';
+import { BulletStyle } from '../../chart_types/bullet_graph/theme';
 import { Color } from '../../common/colors';
 import { Pixels, Radian, Ratio } from '../../common/geometry';
 import { Font, FontStyle } from '../../common/text_utils';
@@ -510,7 +510,7 @@ export interface Theme {
   /**
    * Theme styles for bullet graph types
    */
-  bulletGraph: BulletGraphStyle;
+  bulletGraph: BulletStyle;
   /**
    * Theme styles for tooltip
    */
diff --git a/storybook/stories/bullet_graph/1_single.story.tsx b/storybook/stories/bullet_graph/1_single.story.tsx
index 204ecbb56e..6adfaf024a 100644
--- a/storybook/stories/bullet_graph/1_single.story.tsx
+++ b/storybook/stories/bullet_graph/1_single.story.tsx
@@ -10,7 +10,7 @@ import { text, number, boolean } from '@storybook/addon-knobs';
 import numeral from 'numeral';
 import React from 'react';
 
-import { Chart, BulletGraph, BulletGraphSubtype, Settings } from '@elastic/charts';
+import { Chart, Bullet, BulletSubtype, Settings } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
@@ -27,7 +27,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
   const end = number('end', 100, { range: true, min: -200, max: 200 }, 'General');
   const format = text('format (numeraljs)', '0.[0]', 'General');
   const formatter = (d: number) => numeral(d).format(format);
-  const subtype = getKnobFromEnum('subtype', BulletGraphSubtype, BulletGraphSubtype.horizontal, { group: 'General' });
+  const subtype = getKnobFromEnum('subtype', BulletSubtype, BulletSubtype.horizontal, { group: 'General' });
 
   const niceDomain = boolean('niceDomain', false, 'Ticks');
   const tickStrategy = customKnobs.multiSelect(
@@ -52,7 +52,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
   return (
     <Chart title={title} description={description}>
       <Settings debug={debug} baseTheme={useBaseTheme()} />
-      <BulletGraph
+      <Bullet
         id="bullet"
         subtype={subtype}
         data={[
diff --git a/storybook/stories/bullet_graph/2_angular.story.tsx b/storybook/stories/bullet_graph/2_angular.story.tsx
index 0af558bab4..fa6aaec380 100644
--- a/storybook/stories/bullet_graph/2_angular.story.tsx
+++ b/storybook/stories/bullet_graph/2_angular.story.tsx
@@ -10,7 +10,7 @@ import { text, number, boolean } from '@storybook/addon-knobs';
 import numeral from 'numeral';
 import React from 'react';
 
-import { Chart, BulletGraph, BulletGraphSubtype, Settings } from '@elastic/charts';
+import { Chart, Bullet, BulletSubtype, Settings } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
@@ -26,7 +26,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
   const end = number('end', 100, { range: true, min: -200, max: 200 });
   const tickSnapStep = number('active tick step', 0, { min: 0, max: 10 });
   const angularTickLabelPadding = number('tick label padding', 10, { range: true, min: 0, max: 50 });
-  const subtype = getKnobFromEnum('subtype', BulletGraphSubtype, BulletGraphSubtype.twoThirdsCircle, {
+  const subtype = getKnobFromEnum('subtype', BulletSubtype, BulletSubtype.twoThirdsCircle, {
     exclude: ['vertical', 'horizontal'],
   });
   const format = text('format', '0');
@@ -43,7 +43,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
         baseTheme={useBaseTheme()}
         debug={debug}
       />
-      <BulletGraph
+      <Bullet
         id="bubbles"
         subtype={subtype}
         tickSnapStep={tickSnapStep}
diff --git a/storybook/stories/bullet_graph/3_color_bands.story.tsx b/storybook/stories/bullet_graph/3_color_bands.story.tsx
index ddffe4c158..f806df34ba 100644
--- a/storybook/stories/bullet_graph/3_color_bands.story.tsx
+++ b/storybook/stories/bullet_graph/3_color_bands.story.tsx
@@ -25,8 +25,8 @@ import React, { useCallback } from 'react';
 
 import {
   Chart,
-  BulletGraph,
-  BulletGraphSubtype,
+  Bullet,
+  BulletSubtype,
   Settings,
   BulletColorConfig,
   ColorBandSimpleConfig,
@@ -40,7 +40,7 @@ import { getKnobFromEnum } from '../utils/knobs/utils';
 
 export const Example: ChartsStory = (_, { title, description }) => {
   const isDarkTheme = useThemeId().includes('dark');
-  const getPallettes = useCallback(
+  const getPalettes = useCallback(
     (steps: number) => [
       ['#164863', '#427D9D', '#9BBEC8', '#DDF2FD'],
       ['#F1EAFF', '#E5D4FF', '#DCBFFF', '#D0A2F7'],
@@ -64,7 +64,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
     'color config',
     {
       '1 Single Color': 1,
-      '2 Array of Colors via pallettes': 2,
+      '2 Array of Colors via palettes': 2,
       '3 Array with options': 3,
       '4 Fully custom bands': 4,
     },
@@ -97,7 +97,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
   const colorBands3 = object<ColorBandSimpleConfig>(
     'Config 3 - json',
     {
-      classes: 5,
+      steps: 5,
       colors: ['pink', 'yellow', 'blue'],
     },
     'Color Bands',
@@ -118,8 +118,8 @@ export const Example: ChartsStory = (_, { title, description }) => {
     ],
     'Color Bands',
   );
-  const pallette = getPallettes(colorBands2Steps)[colorBands2];
-  const colorOptions = [, [colorBands1], colorBands2Reverse ? pallette.reverse() : pallette, colorBands3, colorBands4];
+  const palette = getPalettes(colorBands2Steps)[colorBands2];
+  const colorOptions = [, [colorBands1], colorBands2Reverse ? palette.reverse() : palette, colorBands3, colorBands4];
 
   // Domain
   const start = number('start', 0, { range: true, min: -200, max: 200 }, 'Domain');
@@ -150,14 +150,14 @@ export const Example: ChartsStory = (_, { title, description }) => {
 
   // Other
   const debug = boolean('debug', false);
-  const subtype = getKnobFromEnum('subtype', BulletGraphSubtype, BulletGraphSubtype.horizontal);
+  const subtype = getKnobFromEnum('subtype', BulletSubtype, BulletSubtype.horizontal);
 
   const formatter = (d: number) => numeral(d).format('0.[0]');
 
   return (
     <Chart title={title} description={description}>
       <Settings debug={debug} baseTheme={useBaseTheme()} />
-      <BulletGraph
+      <Bullet
         id="bullet"
         subtype={subtype}
         colorBands={colorOptions[colorOptionIndex] as BulletColorConfig}
diff --git a/storybook/stories/bullet_graph/4_single_row.story.tsx b/storybook/stories/bullet_graph/4_single_row.story.tsx
index 669fcfe61f..94a1d739dc 100644
--- a/storybook/stories/bullet_graph/4_single_row.story.tsx
+++ b/storybook/stories/bullet_graph/4_single_row.story.tsx
@@ -10,7 +10,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 import numeral from 'numeral';
 import React from 'react';
 
-import { Chart, BulletGraph, BulletGraphSubtype, Settings } from '@elastic/charts';
+import { Chart, Bullet, BulletSubtype, Settings } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
@@ -20,12 +20,12 @@ export const Example: ChartsStory = (_, { title, description }) => {
   const debug = boolean('debug', false);
   const format = text('format', '0');
   const formatter = (d: number) => numeral(d).format(format);
-  const subtype = getKnobFromEnum('subtype', BulletGraphSubtype, BulletGraphSubtype.vertical);
+  const subtype = getKnobFromEnum('subtype', BulletSubtype, BulletSubtype.vertical);
 
   return (
     <Chart title={title} description={description}>
       <Settings baseTheme={useBaseTheme()} debug={debug} />
-      <BulletGraph
+      <Bullet
         id="bubbles"
         subtype={subtype}
         data={[
diff --git a/storybook/stories/bullet_graph/5_single_column.story.tsx b/storybook/stories/bullet_graph/5_single_column.story.tsx
index b6c35c2317..3e55b3afc9 100644
--- a/storybook/stories/bullet_graph/5_single_column.story.tsx
+++ b/storybook/stories/bullet_graph/5_single_column.story.tsx
@@ -10,7 +10,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 import numeral from 'numeral';
 import React from 'react';
 
-import { Chart, BulletGraph, BulletGraphSubtype, Settings } from '@elastic/charts';
+import { Chart, Bullet, BulletSubtype, Settings } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
@@ -20,12 +20,12 @@ export const Example: ChartsStory = (_, { title, description }) => {
   const debug = boolean('debug', false);
   const format = text('format', '0');
   const formatter = (d: number) => numeral(d).format(format);
-  const subtype = getKnobFromEnum('subtype', BulletGraphSubtype, BulletGraphSubtype.horizontal);
+  const subtype = getKnobFromEnum('subtype', BulletSubtype, BulletSubtype.horizontal);
 
   return (
     <Chart title={title} description={description}>
       <Settings baseTheme={useBaseTheme()} debug={debug} />
-      <BulletGraph
+      <Bullet
         id="bubbles"
         subtype={subtype}
         data={[
diff --git a/storybook/stories/bullet_graph/6_grid.story.tsx b/storybook/stories/bullet_graph/6_grid.story.tsx
index 131256ff0a..7fd2fb0090 100644
--- a/storybook/stories/bullet_graph/6_grid.story.tsx
+++ b/storybook/stories/bullet_graph/6_grid.story.tsx
@@ -10,7 +10,7 @@ import { boolean, number, text } from '@storybook/addon-knobs';
 import numeral from 'numeral';
 import React from 'react';
 
-import { Chart, BulletGraph, BulletGraphSubtype, Settings, Tooltip } from '@elastic/charts';
+import { Chart, Bullet, BulletSubtype, Settings, Tooltip } from '@elastic/charts';
 
 import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
@@ -24,7 +24,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
   const valueFormat = text('valueFormat', '0');
   const targetFormat = text('targetFormat', '');
   const tickFormat = text('tickFormat', '0[.]00');
-  const subtype = getKnobFromEnum('subtype', BulletGraphSubtype, BulletGraphSubtype.vertical);
+  const subtype = getKnobFromEnum('subtype', BulletSubtype, BulletSubtype.vertical);
 
   const valueFormatter = (d: number) => numeral(d).format(valueFormat);
   const targetFormatter = targetFormat ? (d: number) => numeral(d).format(targetFormat) : undefined;
@@ -34,7 +34,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
     <Chart title={title} description={description}>
       <Settings baseTheme={useBaseTheme()} debug={debug} />
       <Tooltip type={hideTooltip ? 'none' : undefined} />
-      <BulletGraph
+      <Bullet
         id="bubbles"
         subtype={subtype}
         tickSnapStep={tickSnapStep}