chore: add stacked area story

elastic · Jul 4, 2019 · 32bd14a · 32bd14a
1 parent 501289c
commit 32bd14a
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/stories/area_chart.tsx b/stories/area_chart.tsx
@@ -228,6 +228,42 @@ storiesOf('Area Chart', module)
       </Chart>
     );
   })
+  .add('stacked as percentage', () => {
+    const stackedAsPercentage = boolean('stacked as percentage', true);
+    return (
+      <Chart className={'story-chart'}>
+        <Settings showLegend={true} legendPosition={Position.Right} />
+        <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+        <Axis
+          id={getAxisId('left2')}
+          title={'Left axis'}
+          position={Position.Left}
+          tickFormat={(d) => `${Number(d * 100).toFixed(0)} %`}
+        />
+
+        <AreaSeries
+          id={getSpecId('areas')}
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor="x"
+          yAccessors={['y']}
+          stackAccessors={['x']}
+          stackAsPercentage={stackedAsPercentage}
+          splitSeriesAccessors={['g']}
+          data={[
+            { x: 0, y: 2, g: 'a' },
+            { x: 1, y: 7, g: 'a' },
+            { x: 2, y: 3, g: 'a' },
+            { x: 3, y: 6, g: 'a' },
+            { x: 0, y: 4, g: 'b' },
+            { x: 1, y: 5, g: 'b' },
+            { x: 2, y: 8, g: 'b' },
+            { x: 3, y: 2, g: 'b' },
+          ]}
+        />
+      </Chart>
+    );
+  })
   .add('stacked with separated specs', () => {
     return (
       <Chart className={'story-chart'}>