@react-magma/charts 10.0.0 → 11.0.0-next.1

package/dist/components/CarbonChart/CarbonChart.d.ts

@@ -7,10 +7,19 @@ export declare enum CarbonChartType {
     bar = "bar",
     barGrouped = "barGrouped",
     barStacked = "barStacked",
+    boxplot = "boxplot",
+    bubble = "bubble",
+    bullet = "bullet",
     donut = "donut",
+    gauge = "gauge",
+    histogram = "histogram",
     line = "line",
+    lollipop = "lollipop",
+    meter = "meter",
     pie = "pie",
-    lollipop = "lollipop"
+    radar = "radar",
+    scatter = "scatter",
+    combo = "combo"
 }
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
     dataSet: Array<Object>;

package/dist/components/CarbonChart/CarbonChartArea.stories.d.ts

@@ -3,6 +3,9 @@ declare const _default: import("@storybook/csf").ComponentAnnotations<import("@s
 export default _default;
 export declare const AreaTimeSeriesNaturalCurve: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const AreaTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const AreaDiscreteDomain: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const BoundedAreaTimeSeriesNaturalCurve: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const AreaMultipleBoundedAreasNaturalCurve: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const AreaMultipleBoundedAreasNaturalCurveZoomBarEnabled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const AreaSkeleton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const AreaEmptyState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartAreaStacked.stories.d.ts

@@ -4,3 +4,4 @@ export default _default;
 export declare const StackedAreaTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const StackedAreaTimeSeriesWithUnevenData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const StackedAreaPercentage: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const VerticalStackedAreatimeSeriesWithToolbarOverride: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartBarGrouped.stories.d.ts

@@ -1,6 +1,7 @@
 import { CarbonChartProps } from '.';
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
+export declare const PreSelectedgroupsGroupedBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const VerticalGroupedBarDiscrete: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const VerticalGroupedBarTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const VerticalGroupedBarTimeSeriesDenseData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartBarStacked.stories.d.ts

@@ -11,3 +11,4 @@ export declare const HorizontalStackedBarDiscrete: import("@storybook/csf").Anno
 export declare const HorizontalStackedBarTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const HorizontalStackedBarEmptyState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const HorizontalStackedBarSkeleton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const CustomTicksStackedBar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartBoxplot.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const HorizontalBoxplot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartBubble.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const BubbleLinear: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartBullet.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const BasicBullet: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartCombo.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const ComboLineAndSimpleBarCustomConfigs: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartGauge.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const GaugeSemicircularDangerStatus: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartHistogram.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const HistogramLinear: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartLine.stories.d.ts

@@ -1,9 +1,20 @@
 import { CarbonChartProps } from '.';
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
 export default _default;
+export declare const CustomDomainLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const RotatedTicksLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const LineTimeSeries15SecondInterval: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const LogAxis: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const PreSelectedGroupsLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const LeftAlignedVerticalLegendLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const ThresholdsLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const LineTimeSeriesSingleDatum: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const TruncatedlabelsLine: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const LineDiscrete: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const LineTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const LineDenseTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const LineLineDualDualAxes: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const LineTimeSeriesAllLabelsInPrimaryFormat: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
+export declare const LineTimeSeriesTwoIcons: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const LineEmptyState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;
 export declare const LineSkeleton: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartMeter.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const MeterChartWithStatuses: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartRadar.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Radar: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartScatter.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const ScatterLinearXAndY: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartSparkline.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const AreaSparkline: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/dist/components/CarbonChart/CarbonChartStep.stories.d.ts

@@ -0,0 +1,4 @@
+import { CarbonChartProps } from '.';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/types-6-0").ReactFramework, import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const StepTimeSeries: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/types-6-0").ReactFramework, CarbonChartProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-magma/charts",
-  "version": "10.0.0",
+  "version": "11.0.0-next.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +31,7 @@
     "@emotion/styled": "^11.13.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.7.0-next.1",
+    "react-magma-dom": "^4.8.0-next.0",
     "react-magma-icons": "^3.0.0"
   },
   "dependencies": {
@@ -48,7 +48,7 @@
     "identity-obj-proxy": "^3.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-magma-dom": "^4.7.0",
+    "react-magma-dom": "^4.8.0-next.0",
     "react-magma-icons": "^3.0.0"
   },
   "exports": {

package/src/components/CarbonChart/CarbonChart.tsx

@@ -12,6 +12,15 @@ import {
   PieChart,
   SimpleBarChart,
   StackedBarChart,
+  RadarChart,
+  BoxplotChart,
+  BubbleChart,
+  BulletChart,
+  GaugeChart,
+  HistogramChart,
+  MeterChart,
+  ScatterChart,
+  ComboChart,
 } from '@carbon/charts-react';
 import './styles.min.css';
 
@@ -21,10 +30,19 @@ export enum CarbonChartType {
   bar = 'bar',
   barGrouped = 'barGrouped',
   barStacked = 'barStacked',
+  boxplot = 'boxplot',
+  bubble = 'bubble',
+  bullet = 'bullet',
   donut = 'donut',
+  gauge = 'gauge',
+  histogram = 'histogram',
   line = 'line',
-  pie = 'pie',
   lollipop = 'lollipop',
+  meter = 'meter',
+  pie = 'pie',
+  radar = 'radar',
+  scatter = 'scatter',
+  combo = 'combo',
 }
 
 export interface CarbonChartProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -460,6 +478,15 @@ export const CarbonChart = React.forwardRef<HTMLDivElement, CarbonChartProps>(
       line: LineChart,
       lollipop: LollipopChart,
       pie: PieChart,
+      radar: RadarChart,
+      boxplot: BoxplotChart,
+      bubble: BubbleChart,
+      bullet: BulletChart,
+      gauge: GaugeChart,
+      histogram: HistogramChart,
+      meter: MeterChart,
+      scatter: ScatterChart,
+      combo: ComboChart,
     };
 
     function buildColors() {

package/src/components/CarbonChart/CarbonChartArea.stories.tsx

@@ -201,6 +201,105 @@ AreaTimeSeries.args = {
   },
 };
 
+export const AreaDiscreteDomain = Template.bind({});
+AreaDiscreteDomain.args = {
+  isInverse: false,
+  type: CarbonChartType.area,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      value: 10000,
+      key: 'a',
+    },
+    {
+      group: 'Dataset 1',
+      value: 65000,
+      key: 'b',
+    },
+    {
+      group: 'Dataset 1',
+      value: 10000,
+      key: 'c',
+    },
+    {
+      group: 'Dataset 1',
+      value: 49213,
+      key: 'd',
+    },
+    {
+      group: 'Dataset 1',
+      value: 51213,
+      key: 'e',
+    },
+    {
+      group: 'Dataset 2',
+      value: 20000,
+      key: 'a',
+    },
+    {
+      group: 'Dataset 2',
+      value: 25000,
+      key: 'b',
+    },
+    {
+      group: 'Dataset 2',
+      value: 60000,
+      key: 'c',
+    },
+    {
+      group: 'Dataset 2',
+      value: 30213,
+      key: 'd',
+    },
+    {
+      group: 'Dataset 2',
+      value: 55213,
+      key: 'e',
+    },
+    {
+      group: 'Dataset 3',
+      value: 30000,
+      key: 'a',
+    },
+    {
+      group: 'Dataset 3',
+      value: 20000,
+      key: 'b',
+    },
+    {
+      group: 'Dataset 3',
+      value: 40000,
+      key: 'c',
+    },
+    {
+      group: 'Dataset 3',
+      value: 60213,
+      key: 'd',
+    },
+    {
+      group: 'Dataset 3',
+      value: 25213,
+      key: 'e',
+    },
+  ],
+  options: {
+    title: 'Discrete Domain',
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'key',
+        scaleType: 'labels',
+      },
+      left: {
+        mapsTo: 'value',
+        title: 'Conversion rate',
+        scaleType: 'linear',
+      },
+    },
+    height: '400px',
+  },
+};
+
 export const BoundedAreaTimeSeriesNaturalCurve = Template.bind({});
 BoundedAreaTimeSeriesNaturalCurve.args = {
   isInverse: false,
@@ -268,6 +367,179 @@ BoundedAreaTimeSeriesNaturalCurve.args = {
   },
 };
 
+export const AreaMultipleBoundedAreasNaturalCurve = Template.bind({});
+AreaMultipleBoundedAreasNaturalCurve.args = {
+  isInverse: false,
+  type: CarbonChartType.area,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2023-01-01',
+      value: 47263,
+      min: 40000,
+      max: 50000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-05',
+      value: 14178,
+      min: 10000,
+      max: 20000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-08',
+      value: 23094,
+      min: 10000,
+      max: 25000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-13',
+      value: 45281,
+      min: 42000,
+      max: 50000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-19',
+      value: -63954,
+      min: -70000,
+      max: -10000,
+    },
+  ],
+  options: {
+    title: 'Multiple Bounded Areas (Natural Curve)',
+    legend: {
+      enabled: false,
+    },
+    bounds: {
+      upperBoundMapsTo: 'max',
+      lowerBoundMapsTo: 'min',
+    },
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'date',
+        scaleType: 'time',
+        highlights: {
+          highlightStartMapsTo: 'startHighlight',
+          highlightEndMapsTo: 'endHighlight',
+          labelMapsTo: 'label',
+          data: [
+            {
+              startHighlight: new Date(2023, 0, 3, 0, 0, 0),
+              label: 'Custom formatter',
+              endHighlight: new Date(2023, 0, 8, 0, 0, 0),
+            },
+            {
+              startHighlight: new Date(2023, 0, 13, 0, 0, 0),
+              label: 'Custom formatter',
+              endHighlight: new Date(2023, 0, 14, 0, 0, 0),
+            },
+          ],
+        },
+      },
+      left: {
+        mapsTo: 'value',
+        scaleType: 'linear',
+      },
+    },
+    curve: 'curveNatural',
+    height: '400px',
+  },
+};
+
+export const AreaMultipleBoundedAreasNaturalCurveZoomBarEnabled = Template.bind(
+  {}
+);
+AreaMultipleBoundedAreasNaturalCurveZoomBarEnabled.args = {
+  isInverse: false,
+  type: CarbonChartType.area,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2023-01-01',
+      value: 47263,
+      min: 40000,
+      max: 50000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-05',
+      value: 14178,
+      min: 10000,
+      max: 20000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-08',
+      value: 23094,
+      min: 10000,
+      max: 25000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-13',
+      value: 45281,
+      min: 42000,
+      max: 50000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2023-01-19',
+      value: -63954,
+      min: -70000,
+      max: -10000,
+    },
+  ],
+  options: {
+    title: 'Multiple Bounded Areas (Natural Curve) - Zoom bar enabled',
+    legend: {
+      enabled: false,
+    },
+    bounds: {
+      upperBoundMapsTo: 'max',
+      lowerBoundMapsTo: 'min',
+    },
+    axes: {
+      bottom: {
+        title: '2023 Annual Sales Figures',
+        mapsTo: 'date',
+        scaleType: 'time',
+        highlights: {
+          highlightStartMapsTo: 'startHighlight',
+          highlightEndMapsTo: 'endHighlight',
+          labelMapsTo: 'label',
+          data: [
+            {
+              startHighlight: new Date(2023, 0, 3, 0, 0, 0),
+              label: 'Custom formatter',
+              endHighlight: new Date(2023, 0, 8, 0, 0, 0),
+            },
+            {
+              startHighlight: new Date(2023, 0, 13, 0, 0, 0),
+              label: 'Custom formatter',
+              endHighlight: new Date(2023, 0, 14, 0, 0, 0),
+            },
+          ],
+        },
+      },
+      left: {
+        mapsTo: 'value',
+        scaleType: 'linear',
+      },
+    },
+    curve: 'curveNatural',
+    height: '400px',
+    zoomBar: {
+      top: {
+        enabled: true,
+      },
+    },
+  },
+};
+
 export const AreaSkeleton = Template.bind({});
 AreaSkeleton.args = {
   isInverse: false,

package/src/components/CarbonChart/CarbonChartAreaStacked.stories.tsx

@@ -311,3 +311,155 @@ StackedAreaPercentage.args = {
     height: '400px',
   },
 };
+
+export const VerticalStackedAreatimeSeriesWithToolbarOverride = Template.bind(
+  {}
+);
+VerticalStackedAreatimeSeriesWithToolbarOverride.args = {
+  isInverse: false,
+  type: CarbonChartType.areaStacked,
+  dataSet: [
+    {
+      group: 'Dataset 1',
+      date: '2019-01-01T05:00:00.000Z',
+      value: 10000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-05T05:00:00.000Z',
+      value: 65000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 10000,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-13T05:00:00.000Z',
+      value: 49213,
+    },
+    {
+      group: 'Dataset 1',
+      date: '2019-01-17T05:00:00.000Z',
+      value: 51213,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-03T05:00:00.000Z',
+      value: 75000,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-06T05:00:00.000Z',
+      value: 57312,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 21432,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-15T05:00:00.000Z',
+      value: 70323,
+    },
+    {
+      group: 'Dataset 2',
+      date: '2019-01-19T05:00:00.000Z',
+      value: 21300,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-01T05:00:00.000Z',
+      value: 50000,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-05T05:00:00.000Z',
+      value: 15000,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 20000,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-13T05:00:00.000Z',
+      value: 39213,
+    },
+    {
+      group: 'Dataset 3',
+      date: '2019-01-17T05:00:00.000Z',
+      value: 61213,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-02T05:00:00.000Z',
+      value: 10,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-06T05:00:00.000Z',
+      value: 37312,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-08T05:00:00.000Z',
+      value: 51432,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-15T05:00:00.000Z',
+      value: 40323,
+    },
+    {
+      group: 'Dataset 4',
+      date: '2019-01-19T05:00:00.000Z',
+      value: 31300,
+    },
+  ],
+  options: {
+    title: 'Vertical stacked area (time series) w/toolbar override',
+    axes: {
+      left: {
+        mapsTo: 'value',
+        stacked: true,
+      },
+      bottom: {
+        mapsTo: 'date',
+        scaleType: 'time',
+      },
+    },
+    toolbar: {
+      enabled: true,
+      numberOfIcons: 3,
+      controls: [
+        {
+          type: 'Zoom in',
+        },
+        {
+          type: 'Zoom out',
+        },
+        {
+          type: 'Reset zoom',
+        },
+        {
+          type: 'Custom',
+          text: 'Custom button',
+          iconSVG: {
+            content: `<path d="M23,13H18v2h5v2H19a2,2,0,0,0-2,2v2a2,2,0,0,0,2,2h6V15A2,2,0,0,0,23,13Zm0,8H19V19h4Z"/>
+          <path d="M13,9H9a2,2,0,0,0-2,2V23H9V18h4v5h2V11A2,2,0,0,0,13,9ZM9,16V11h4v5Z"/><rect data-name="&lt;Transparent Rectangle&gt;" width="32" height="32" style="fill: none"/>`,
+          },
+        },
+      ],
+    },
+    zoomBar: {
+      top: {
+        enabled: true,
+      },
+    },
+    height: '400px',
+  },
+};