From 9eb5bf4962e0f2d8e2d790be10eaa1a7ab773e36 Mon Sep 17 00:00:00 2001
From: nickofthyme <nicholas.partridge@elastic.co>
Date: Thu, 9 Dec 2021 11:06:15 -0600
Subject: [PATCH] feat: add 0 baseline datum

---
 .../mixed/8_polarized_stacked.story.tsx       | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/storybook/stories/mixed/8_polarized_stacked.story.tsx b/storybook/stories/mixed/8_polarized_stacked.story.tsx
index 011e570646..7d116f6e15 100644
--- a/storybook/stories/mixed/8_polarized_stacked.story.tsx
+++ b/storybook/stories/mixed/8_polarized_stacked.story.tsx
@@ -10,13 +10,24 @@ import { boolean, select } from '@storybook/addon-knobs';
 import numeral from 'numeral';
 import React from 'react';
 
-import { Axis, Chart, Position, ScaleType, Settings, StackMode, SeriesType } from '@elastic/charts';
+import {
+  Axis,
+  Chart,
+  Position,
+  ScaleType,
+  Settings,
+  StackMode,
+  SeriesType,
+  LineAnnotation,
+  AnnotationDomainType,
+} from '@elastic/charts';
 
 import { useBaseTheme } from '../../use_base_theme';
 import { data } from '../utils/datasets/product_profits';
 import { getXYSeriesKnob } from '../utils/knobs';
 
 export const Example = () => {
+  const baseTheme = useBaseTheme();
   const stacked = boolean('stacked', true);
   const polarity = select('data polarity', ['Mixed', 'Positive', 'Negative'], 'Mixed');
   const customDomain = boolean('custom domain', false);
@@ -36,7 +47,7 @@ export const Example = () => {
   });
   return (
     <Chart>
-      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={useBaseTheme()} />
+      <Settings showLegend showLegendExtra legendPosition={Position.Right} baseTheme={baseTheme} />
       <Axis id="bottom" position={Position.Bottom} title="Products" />
       <Axis
         id="left"
@@ -46,6 +57,14 @@ export const Example = () => {
         tickFormat={(d) => numeral(d).format(stackMode === 'percentage' ? '0%' : '$0,0')}
       />
 
+      <LineAnnotation
+        id="zeroBaseline"
+        domainType={AnnotationDomainType.YDomain}
+        dataValues={[{ dataValue: 0 }]}
+        style={{ line: { ...baseTheme.axes.axisLine, opacity: 1 } }}
+        zIndex={-1}
+      />
+
       <Series
         id="series"
         color={['#7BC0F7', '#3C8AD8', '#F18026', '#FEDB69']}