@splunk/visualizations 28.6.0 → 28.8.0

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

@@ -0,0 +1,2653 @@
+# Column Examples
+
+**Component Reference:** Column or @splunk/visualizations/Column
+
+## Basic Column
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{}}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'admin' }, { 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 },
+            },
+        }}
+    />
+);
+```
+
+## Annotation
+
+- **Key:** Annotation
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            annotationLabel: '> annotation|seriesByIndex(1)',
+            annotationColor: '> annotation|seriesByIndex(2)',
+            annotationX: '> annotation|seriesByIndex(0)',
+        }}
+        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 },
+            },
+            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 },
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Green
+
+- **Key:** Background Color
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            backgroundColor: '#008000',
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Data Values Display - All
+
+- **Key:** Data Values Display
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            dataValuesDisplay: 'all',
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Legend Labels Display - Top
+
+- **Key:** Legend
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            legendDisplay: 'top',
+        }}
+        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'],
+                        ['67228', '83195', '3145', '19332', '29763'],
+                        ['14881', '17341', '18081', '19774', '10467'],
+                    ],
+                    fields: [
+                        { name: '_time' },
+                        { name: 'splunkd' },
+                        { name: 'splunkd_web_access' },
+                        { name: 'mongod' },
+                    ],
+                },
+                meta: {
+                    totalCount: 100,
+                },
+            },
+        }}
+    />
+);
+```
+
+## Very Long Legend Labels, Legend Truncation - Start
+
+- **Key:** Legend Style Mode
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            legendLabels: ['verylonglegendlabelstringtoshowdifferentellipsoverflowmode'],
+            legendTruncation: 'ellipsisStart',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time', groupby_rank: '0' },
+                        { name: 'count' },
+                        {
+                            name: 'verylonglegendlabelstringtoshowdifferentellipsoverflowmode',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:00.000-07:00',
+                            '2018-05-02T18:11:00.000-07:00',
+                            '2018-05-02T18:12:00.000-07:00',
+                            '2018-05-02T18:13:00.000-07:00',
+                            '2018-05-02T18:14:00.000-07:00',
+                            '2018-05-02T18:15:00.000-07:00',
+                        ],
+                        ['20', '10', '13', '60', '43', '85'],
+                        ['50', '10', '30', '5', '97', '85'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors: Red and Blue
+
+- **Key:** Series Colors
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            seriesColors: ['#d12405', '#0000FF'],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors by Field: Count - Green, Percent - Orange
+
+- **Key:** Field Colors
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            seriesColorsByField: { admin: '#008000', user: '#FFA500' },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'admin',
+                        },
+                        {
+                            name: 'user',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Stack Mode - Stacked
+
+- **Key:** Stack Mode
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            stackMode: 'stacked',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'admin',
+                        },
+                        {
+                            name: 'user',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Stack Mode - Stacked, Legend Mode - seriesCompare
+
+- **Key:** Stack Mode Legend Mode
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            stackMode: 'stacked',
+            legendMode: 'seriesCompare',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'admin',
+                        },
+                        {
+                            name: 'user',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Legend Mode - seriesCompare
+
+- **Key:** Legend Mode
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            legendMode: 'seriesCompare',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'admin',
+                        },
+                        {
+                            name: 'user',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Column Grouping - Overlay
+
+- **Key:** Column Grouping
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            columnGrouping: 'overlay',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Column Spacing - 10
+
+- **Key:** Column Spacing
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            columnSpacing: 10,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Spacing - 5
+
+- **Key:** Series Spacing
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            seriesSpacing: 5,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Split Series - True
+
+- **Key:** Show Split Series
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showSplitSeries: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Tooltip - False
+
+- **Key:** Showtooltip
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showTooltip: false,
+        }}
+        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'],
+                        ['67228', '83195', '3145', '19332', '29763'],
+                        ['14881', '17341', '18081', '19774', '10467'],
+                    ],
+                    fields: [
+                        { name: '_time' },
+                        { name: 'splunkd' },
+                        { name: 'splunkd_web_access' },
+                        { name: 'mongod' },
+                    ],
+                },
+                meta: {
+                    totalCount: 100,
+                },
+            },
+        }}
+    />
+);
+```
+
+## Show Independent Y-Axis Ranges - True
+
+- **Key:** Show Independent Yranges
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showIndependentYRanges: true,
+            showSplitSeries: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Label Rotation - 45
+
+- **Key:** Xaxis Label Rotation
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            xAxisLabelRotation: 45,
+        }}
+        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 and X-Axis Title Text - Specified
+
+- **Key:** Title Specified
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            xAxisTitleText: 'Custom x-axis title',
+            yAxisTitleText: 'Custom y-axis title',
+        }}
+        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 and X-Axis Title Text - Hide
+
+- **Key:** Title Not Visible
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisTitleVisibility: 'hide',
+            xAxisTitleVisibility: 'hide',
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Label Visibility - Hide
+
+- **Key:** Axis Label Visibility Hidden
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            xAxisLabelVisibility: 'hide',
+            yAxisLabelVisibility: 'hide',
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Line Visibility - Show
+
+- **Key:** Axis Line Visibility Shown
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            xAxisLineVisibility: 'show',
+            yAxisLineVisibility: 'show',
+            showYMajorGridLines: false,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Major Tick Visibility - Hide
+
+- **Key:** Axis Xmajor Tick Visibility Hidden
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            xAxisMajorTickVisibility: 'hide',
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Major Tick Size - 20
+
+- **Key:** Axis Major Tick Size
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            xAxisMajorTickSize: 20,
+            yAxisMajorTickSize: 20,
+            yAxisLineVisibility: 'show',
+            yAxisMajorTickVisibility: 'show',
+        }}
+        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 Minor Tick - Visible and Size - 15
+
+- **Key:** Axis Yminor Tick Size
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisMinorTickSize: 15,
+            yAxisLineVisibility: 'show',
+            yAxisMinorTickVisibility: 'show',
+        }}
+        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 Major Grid - False, X-Axis Major Grid - True
+
+- **Key:** Major Grid
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showXMajorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        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 Minor Grid - True
+
+- **Key:** Minor Grid
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showYMinorGridLines: true,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Max Label Parts - 2
+
+- **Key:** Maxlabelparts
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        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:** Yaxis Abbreviation
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisAbbreviation: 'off',
+        }}
+        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'],
+                        ['67228', '83195', '3145', '19332', '29763'],
+                        ['14881', '17341', '18081', '19774', '10467'],
+                    ],
+                    fields: [
+                        { name: '_time' },
+                        { name: 'splunkd' },
+                        { name: 'splunkd_web_access' },
+                        { name: 'mongod' },
+                    ],
+                },
+                meta: {
+                    totalCount: 100,
+                },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Scale - Log
+
+- **Key:** Yaxis Scale
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisScale: 'log',
+        }}
+        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 Minimum - 25
+
+- **Key:** Yaxis Min
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisMin: 25,
+        }}
+        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 Maximum - 75
+
+- **Key:** Yaxis Max
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisMax: 75,
+        }}
+        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 Major Tick Interval - 50
+
+- **Key:** Yaxis Major Ticks Interval
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            yAxisMajorTickInterval: 50,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - False
+
+- **Key:** Show Yaxis With Zero False
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showYAxisWithZero: false,
+            yAxisMin: 50,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - True
+
+- **Key:** Show Yaxis With Zero True
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showYAxisWithZero: true,
+            yAxisMin: 50,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - False
+
+- **Key:** Show Yaxis Extended Range False
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showYAxisExtendedRange: false,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - True
+
+- **Key:** Show Yaxis Extended Range True
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showYAxisExtendedRange: true,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Y2-Axis Mapping Field - Specified
+
+- **Key:** Y2 Axis Mapped
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            y2Fields: 'percent',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        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, Line Width - 5
+
+- **Key:** Chart Overlay Line Width
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            lineWidth: 5,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Dash Style - Dot
+
+- **Key:** Line Dash Style
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        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 Title Text - Specified, Y2-Axis Line Visibility - Show
+
+- **Key:** Chart Overlay Title
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisTitleText: 'Custom Y2-axis title',
+            y2AxisLineVisibility: 'show',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Title Text and Y2-Axis Label - Hide
+
+- **Key:** Chart Overlay Title Label
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisTitleVisibility: 'hide',
+            y2AxisLabelVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2MajorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2MinorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Abbreviation - Off
+
+- **Key:** Chart Overlay Abbreviation
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisAbbreviation: 'off',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Scale - Log
+
+- **Key:** Chart Overlay Scale
+
+```jsx
+import React from 'react';
+import Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisScale: 'log',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        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: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMax: 1500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMajorTickInterval: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2AxisWithZero: true,
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2AxisWithZero: false,
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showRoundedY2AxisLabels: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <Column
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showRoundedY2AxisLabels: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'sourcetype',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            'splunkd',
+                            'splunkd_ui_access',
+                            'splunkd_access',
+                            'splunk_web_access',
+                            'scheduler',
+                            'splunk_web_service',
+                        ],
+                        ['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 Column from '@splunk/visualizations/Column';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <Column
+            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>
+);
+```