@splunk/visualizations 28.6.0 → 28.7.0

package/docs-llm/area/examples-react.md

@@ -0,0 +1,2816 @@
+# Area Examples
+
+**Component Reference:** Area or @splunk/visualizations/Area
+
+## Basic Area
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{}}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Annotation
+
+- **Key:** Annotation
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            annotationX: '> annotation|seriesByIndex(0)',
+            annotationLabel: '> annotation|seriesByIndex(1)',
+            annotationColor: '> annotation|seriesByIndex(2)',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+            annotation: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time', groupby_rank: '0' },
+                        { name: 'annotation_label' },
+                        { name: 'annotation_color' },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:11:50.000-07:00',
+                            '2018-05-02T18:13:25.000-07:00',
+                            '2018-05-02T18:14:30.000-07:00',
+                        ],
+                        ['houston, we have a problem', 'just close the jira', 'looking good now'],
+                        ['#f44271', '#f4a941', '#41f49a'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Area Opacity - 0.5
+
+- **Key:** Area Opacity
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{ areaOpacity: 0.5 }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Pink
+
+- **Key:** Background Color
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            backgroundColor: '#f44271',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Data Values Display - All
+
+- **Key:** Data Values Display
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            dataValuesDisplay: 'all',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Legend Labels Display - Top
+
+- **Key:** Legend
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            legendDisplay: 'top',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Legend Mode - seriesCompare
+
+- **Key:** Legend Mode
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            legendMode: 'seriesCompare',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                        {
+                            name: 'average',
+                            type_special: 'average',
+                        },
+                        {
+                            name: 'mean',
+                            type_special: 'mean',
+                        },
+                        {
+                            name: 'median',
+                            type_special: 'median',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                        ['346', '20.88', '374.26', '271', '86', '364'],
+                        ['94', '92', '12', '73', '92', '36'],
+                        ['38', '675', '192', '023', '104', '274'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Very Long Legend Labels, Legend Truncation - Start
+
+- **Key:** Legend Style Mode
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            legendLabels: ['verylonglegendlabelstringtoshowdifferentellipsoverflowmode'],
+            legendTruncation: 'ellipsisStart',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'verylonglegendlabelstringtoshowdifferentellipsoverflowmode',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Null Value Display - Zero
+
+- **Key:** Null Value Mode
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            nullValueDisplay: 'zero',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                            groupby_rank: '0',
+                        },
+                        {
+                            name: '10.1.1.000',
+                            data_source: 'sum(date_hour)',
+                            splitby_field: 'clientip',
+                            splitby_value: '10.1.1.000',
+                        },
+                        {
+                            name: '10.1.1.002',
+                            data_source: 'sum(date_hour)',
+                            splitby_field: 'clientip',
+                            splitby_value: '10.1.1.002',
+                        },
+                        {
+                            name: '_span',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2017-08-20T00:00:00.000-07:00',
+                            '2017-08-20T00:30:00.000-07:00',
+                            '2017-08-20T01:00:00.000-07:00',
+                            '2017-08-20T01:30:00.000-07:00',
+                            '2017-08-20T02:00:00.000-07:00',
+                            '2017-08-20T02:30:00.000-07:00',
+                            '2017-08-20T03:00:00.000-07:00',
+                            '2017-08-20T03:30:00.000-07:00',
+                            '2017-08-20T04:00:00.000-07:00',
+                            '2017-08-20T04:30:00.000-07:00',
+                        ],
+                        ['', '', '170', '100', '22', '', '', '1040', '221', '42'],
+                        ['', '', '', '', '460', '154', '', '36', '576', '1625'],
+                        ['1800', '1800', '1800', '1800', '1800', '1800', '1800', '1800', '1800', '1800'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors: Red, Blue, Green, Orange, Pink
+
+- **Key:** Series Colors
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            seriesColors: ['#FF0000', '#0000FF', '#008000', '#FFA500', '#ea00ff'],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                        {
+                            name: 'average',
+                            type_special: 'average',
+                        },
+                        {
+                            name: 'mean',
+                            type_special: 'mean',
+                        },
+                        {
+                            name: 'median',
+                            type_special: 'median',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                        ['346', '20.88', '374.26', '271', '86', '364'],
+                        ['94', '92', '12', '73', '92', '36'],
+                        ['38', '675', '192', '023', '104', '274'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors by Field: Count - Green, Percent - Orange
+
+- **Key:** Field Colors
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            seriesColorsByField: { count: '#008000', percent: '#FFA500' },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                        {
+                            name: 'average',
+                            type_special: 'average',
+                        },
+                        {
+                            name: 'mean',
+                            type_special: 'mean',
+                        },
+                        {
+                            name: 'median',
+                            type_special: 'median',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                        ['346', '20.88', '374.26', '271', '86', '364'],
+                        ['94', '92', '12', '73', '92', '36'],
+                        ['38', '675', '192', '023', '104', '274'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Stack Mode - Stacked
+
+- **Key:** Stack Mode
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            stackMode: 'stacked',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Split Series - True
+
+- **Key:** Split Series
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showSplitSeries: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Independent Y-Axis Ranges - True
+
+- **Key:** Split Series Independent
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showSplitSeries: true,
+            showIndependentYRanges: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Lines - False
+
+- **Key:** Show Lines
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{ showLines: false }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Label Rotation - 45
+
+- **Key:** Axis Xlabel Rotation
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisLabelRotation: 45,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis and X-Axis Title Text - Specified
+
+- **Key:** Title Specified
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisTitleText: 'Area x-axis title',
+            yAxisTitleText: 'Area y-axis title',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis and X-Axis Title Text - Hide
+
+- **Key:** Title Not Visible
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisTitleVisibility: 'hide',
+            yAxisTitleVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Label Visibility - Hide
+
+- **Key:** Axis Xlabel Visibility
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisLabelVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Label Visibility - Hide
+
+- **Key:** Axis Ylabel Visibility
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisLabelVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Line Visibility - Show
+
+- **Key:** Axis Line Visibility Shown
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisLineVisibility: 'show',
+            yAxisLineVisibility: 'show',
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Major Tick Visibility - Hide
+
+- **Key:** Axis Xmajor Tick Labels
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisMajorTickVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Major Tick Visibility - Hide
+
+- **Key:** Axis Ymajor Tick Labels
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisMajorTickVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Major Tick Size - 20, Y-Axis Minor Tick Visibility - Show and Size - 10
+
+- **Key:** Ticks
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisMajorTickVisibility: 'show',
+            yAxisMinorTickVisibility: 'show',
+            yAxisMajorTickSize: 15,
+            yAxisMinorTickSize: 10,
+            xAxisMajorTickVisibility: 'show',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Major Grid - False, X-Axis Major Grid - True
+
+- **Key:** Major Grid
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showXMajorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Minor Grid - True
+
+- **Key:** Minor Grid
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showYMinorGridLines: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Max Label Parts - 2
+
+- **Key:** Maxlabelparts
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            xAxisMaxLabelParts: 2,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                            '2018-05-02T18:17:30.000-07:00',
+                        ],
+                        ['2', '10', '13', '60', '43', '85'],
+                        ['1', '1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Abbreviation - Off
+
+- **Key:** Axis Yabbreviation
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisAbbreviation: 'off',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component', groupby_rank: '0' }, { name: 'count' }],
+                    columns: [
+                        ['ApplicationLicense', 'DatabaseDirectoryManager', 'IndexWriter'],
+                        ['166238', '8904', '2327'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Scale - Log
+
+- **Key:** Axis Yscale
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisScale: 'log',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Minimum - 100
+
+- **Key:** Yaxis Min
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisMin: 100,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Maximum - 500
+
+- **Key:** Yaxis Max
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisMax: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Major Tick Interval - 50
+
+- **Key:** Yaxis Major Ticks Interval
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            yAxisMajorTickInterval: 50,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - True
+
+- **Key:** Include Zero True
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showYAxisWithZero: true,
+            yAxisMin: 300,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - False
+
+- **Key:** Include Zero False
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showYAxisWithZero: false,
+            yAxisMin: 300,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - True
+
+- **Key:** Extend Range True
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showYAxisExtendedRange: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - False
+
+- **Key:** Extend Range False
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showYAxisExtendedRange: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Y2-Axis Mapping Field - Specified
+
+- **Key:** Y2 Axis Mapped
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            y2Fields: ['percent'],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Chart Overlay Field - Specified
+
+- **Key:** Chart Overlay
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: ['splunkd', 'mongod'],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    columns: [
+                        [
+                            '2018-05-02T18:15:46.000-07:00',
+                            '2018-05-02T18:15:47.000-07:00',
+                            '2018-05-02T18:15:48.000-07:00',
+                            '2018-05-02T18:15:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['67228', '83195', '3145', '19332', '29763'],
+                        ['4823', '7612', '2398', '1254', '2734'],
+                        ['14881', '17341', '18081', '19774', '10467'],
+                    ],
+                    fields: [
+                        { name: '_time' },
+                        { name: 'splunkd' },
+                        { name: 'splunkd_web_access' },
+                        { name: 'mongod' },
+                    ],
+                },
+                meta: {
+                    totalCount: 100,
+                },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Title - Specified, Y2-Axis Line Visibility - Show, Y2-Axis Abbreviation - Off
+
+- **Key:** Chart Overlay Title
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            y2AxisTitleText: 'Y2-Axis Count',
+            y2AxisAbbreviation: 'off',
+            y2AxisLineVisibility: 'show',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['40000', '30000', '20000', '14000', '45000', '27000'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Title Text and Y2-Axis Label - Hide
+
+- **Key:** Chart Overlay Title Label
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisTitleVisibility: 'hide',
+            y2AxisLabelVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Major Grid - True
+
+- **Key:** Chart Overlay Major Grid
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2MajorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Minor Grid - True
+
+- **Key:** Chart Overlay Minor Grid
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2MinorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Line Width - 5
+
+- **Key:** Line Width
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            lineWidth: 5,
+            overlayFields: 'count',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '713', '322', '19'],
+                        ['400', '100', '1000', '121.183272', '2000', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Line Dash Style - Dot
+
+- **Key:** Line Dash Style
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            overlayFields: 'count',
+            lineDashStyle: 'dot',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                        },
+                        {
+                            name: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '713', '322', '19'],
+                        ['400', '100', '1000', '121.183272', '2000', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Line Dash Styles By Field - splunkd - ShortDash, splunkd_access - LongDash
+
+- **Key:** Line Dash Style
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            overlayFields: ['splunkd', 'splunkd_access'],
+            lineDashStylesByField: {
+                splunkd: 'shortDash',
+                splunkd_access: 'longDash',
+            },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'splunkd',
+                        },
+                        {
+                            name: 'splunkd_ui_access',
+                        },
+                        {
+                            name: 'splunkd_access',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['346', '20.88', '374.26', '271', '86', '364'],
+                        ['94', '92', '12', '73', '92', '36'],
+                        ['38', '675', '192', '023', '104', '274'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Scale - Log
+
+- **Key:** Chart Overlay Scale
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisScale: 'log',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Major Tick Size - 20, Y2-Axis Minor Tick Size - 10
+
+- **Key:** Chart Overlay Ticks
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMajorTickVisibility: 'show',
+            y2AxisMinorTickVisibility: 'show',
+            y2AxisMajorTickSize: 20,
+            y2AxisMinorTickSize: 10,
+            y2AxisLineVisibility: 'show',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Minimum - 500
+
+- **Key:** Chart Overlay Min
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Maximum - 1500
+
+- **Key:** Chart Overlay Max
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMax: 1500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Major Tick Interval - 500
+
+- **Key:** Chart Overlay Interval
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMajorTickInterval: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis With Zero - True
+
+- **Key:** Chart Overlay With Zero True
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2AxisWithZero: true,
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis With Zero - False
+
+- **Key:** Chart Overlay With Zero False
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2AxisWithZero: false,
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis Rounded Labels - True
+
+- **Key:** Chart Overlay Rounded True
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showRoundedY2AxisLabels: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['2', '2.5', '3.5', '1.5', '.8', '2.2'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis Rounded Labels - False
+
+- **Key:** Chart Overlay Rounded False
+
+```jsx
+import React from 'react';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <Area
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showRoundedY2AxisLabels: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['2', '2.5', '3.5', '1.5', '.8', '2.2'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import Area from '@splunk/visualizations/Area';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <Area
+            options={{
+                splitByLayout: 'trellis',
+            }}
+            dataSources={{
+                primary: {
+                    requestParams: { offset: 0, count: 20 },
+                    data: {
+                        fields: [
+                            {
+                                name: '_time',
+                                groupby_rank: '0',
+                            },
+                            {
+                                name: '200',
+                                splitby_field: 'status',
+                                splitby_value: '200',
+                                data_source: 'count',
+                            },
+                            {
+                                name: '201',
+                                splitby_field: 'status',
+                                splitby_value: '201',
+                                data_source: 'count',
+                            },
+                            {
+                                name: '303',
+                                splitby_field: 'status',
+                                splitby_value: '303',
+                                data_source: 'count',
+                            },
+                            {
+                                name: '400',
+                                splitby_field: 'status',
+                                splitby_value: '400',
+                                data_source: 'count',
+                            },
+                            {
+                                name: '_span',
+                            },
+                        ],
+                        columns: [
+                            [
+                                '2022-09-12T17:00:00.000-07:00',
+                                '2022-09-12T17:30:00.000-07:00',
+                                '2022-09-12T18:00:00.000-07:00',
+                                '2022-09-12T18:30:00.000-07:00',
+                                '2022-09-12T19:00:00.000-07:00',
+                                '2022-09-12T19:30:00.000-07:00',
+                                '2022-09-12T20:00:00.000-07:00',
+                                '2022-09-12T20:30:00.000-07:00',
+                                '2022-09-12T21:00:00.000-07:00',
+                                '2022-09-12T21:30:00.000-07:00',
+                            ],
+                            ['1180', '952', '38', '954', '250', '40', '1250', '50'],
+                            ['980', '652', '138', '954', '250', '60', '250', '20'],
+                            ['24', '25', '14', '44', '1', '0', '1', '0', '1', '0'],
+                            ['54', '25', '14', '44', '1', '0', '1', '0', '1', '0'],
+                            ['800', '800', '800', '800', '800', '800', '800', '800', '800', '800'],
+                        ],
+                    },
+                    meta: { totalCount: 100 },
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```