@splunk/visualizations 28.6.0 → 28.7.0

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

@@ -0,0 +1,2352 @@
+# Bar Examples
+
+**Component Reference:** Bar or @splunk/visualizations/Bar
+
+## Basic Bar
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{}}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component', groupby_rank: '0' }, { name: 'admin' }],
+                    columns: [
+                        ['foo', 'bar', 'foobar'],
+                        ['1556', '8904', '2327'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Green
+
+- **Key:** Background Color
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Data Value Display - All
+
+- **Key:** Data Labels
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Legend Labels Display - Top
+
+- **Key:** Legend
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            legendDisplay: 'top',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Very Long Legend Labels, Legend Truncation - Start
+
+- **Key:** Legend Truncation
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '10', '30', '10', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Color: Red and Blue
+
+- **Key:** Series Colors
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            seriesColors: ['#FF0000', '#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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            seriesColorsByField: { count: '#008000', percent: '#FFA500' },
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Stack Mode - Stacked
+
+- **Key:** Stack Mode
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Bar Spacing - 10
+
+- **Key:** Bar Spacing
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            barSpacing: 10,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Spacing - 5
+
+- **Key:** Series Spacing
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            seriesSpacing: 5,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Split Series - True
+
+- **Key:** Split Series
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Independent Y-Axis Ranges - True
+
+- **Key:** Split Series Independent
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showSplitSeries: true,
+            showIndependentYRanges: 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 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis and X-Axis Title Text - Specified
+
+- **Key:** Title Specified
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            yAxisTitleText: 'Axis Y Count',
+            xAxisTitleText: 'Axis X Time',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Label Visibility - Hide
+
+- **Key:** Axis Xlabelvisiblility
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            xAxisLabelVisibility: 'hide',
+            yAxisLabelVisibility: 'hide',
+        }}
+        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: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Line Visibility - Show
+
+- **Key:** Axis Line Visibility Shown
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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, Y-Axis Minor Tick - Visible and Size - 10
+
+- **Key:** Ticks
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            yAxisMajorTickVisibility: 'show',
+            yAxisMinorTickVisibility: 'show',
+            showYMajorGridLines: false,
+            xAxisLineVisibility: 'show',
+            yAxisLineVisibility: 'show',
+            yAxisMajorTickSize: 20,
+            xAxisMajorTickSize: 20,
+            yAxisMinorTickSize: 10,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Minor Grid - True
+
+- **Key:** Minor Grid
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Max Label Parts - 2
+
+- **Key:** Max Label Parts
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: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',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Abbreviation - Off
+
+- **Key:** Axis Yabbreviation
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Scale - Log
+
+- **Key:** Axis Yscale
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            yAxisScale: 'log',
+        }}
+        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: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Minimum - 250
+
+- **Key:** Yaxis Min
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            yAxisMin: 250,
+        }}
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Maximum - 500
+
+- **Key:** Yaxis Max
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            yAxisMax: 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',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Major Tick Interval - 500
+
+- **Key:** Yaxis Major Ticks Interval
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            yAxisMajorTickInterval: 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',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - True
+
+- **Key:** Include Zero True
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showYAxisWithZero: true,
+            yAxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component', groupby_rank: '0' }, { name: 'count' }],
+                    columns: [
+                        ['ApplicationLicense', 'DatabaseDirectoryManager', 'IndexWriter'],
+                        ['500', '1000', '1500'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - False
+
+- **Key:** Include Zero False
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showYAxisWithZero: false,
+            yAxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component', groupby_rank: '0' }, { name: 'count' }],
+                    columns: [
+                        ['ApplicationLicense', 'DatabaseDirectoryManager', 'IndexWriter'],
+                        ['500', '1000', '1500'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - True
+
+- **Key:** Extend Range True
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showYAxisExtendedRange: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component', groupby_rank: '0' }, { name: 'count' }],
+                    columns: [
+                        ['ApplicationLicense', 'DatabaseDirectoryManager', 'IndexWriter'],
+                        ['500', '1000', '1500'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - False
+
+- **Key:** Extend Range False
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showYAxisExtendedRange: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component', groupby_rank: '0' }, { name: 'count' }],
+                    columns: [
+                        ['ApplicationLicense', 'DatabaseDirectoryManager', 'IndexWriter'],
+                        ['500', '1000', '1500'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y2-Axis Mapping Field - Specified
+
+- **Key:** Y2axisspecified
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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, Line Width - 5
+
+- **Key:** Line Width
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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', '713', '322', '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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 - Hide
+
+- **Key:** Y2 Title Not Visible
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            y2AxisTitleVisibility: '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', '713', '322', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Label - Hide
+
+- **Key:** Y2 Label Not Visible
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            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', '713', '322', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Title Text - Specified, Y2-Axis Abbreviation - Off
+
+- **Key:** Chart Overlay
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisTitleText: 'Axis - Y2 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', '713', '322', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Line Visibility - Show
+
+- **Key:** Chart Overlay Axis
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            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', '713', '322', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Scale - Log
+
+- **Key:** Y2 Scale
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            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', '713', '322', '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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Major Tick Size - 20, Y2-Axis Minor Tick Size - 10
+
+- **Key:** Chart Overlay Ticks
+
+```jsx
+import React from 'react';
+import Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMajorTickVisibility: 'show',
+            y2AxisMinorTickVisibility: 'show',
+            y2AxisMajorTickSize: 20,
+            y2AxisMinorTickSize: 10,
+            showYMajorGridLines: false,
+            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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <Bar
+        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 Bar from '@splunk/visualizations/Bar';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <Bar
+            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>
+);
+```