@splunk/visualizations 28.6.0 → 28.7.0

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

@@ -0,0 +1,2683 @@
+# Line Examples
+
+**Component Reference:** Line or @splunk/visualizations/Line
+
+## Basic Line
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{}}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Annotation
+
+- **Key:** Annotation
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            annotationX: '> annotation|seriesByIndex(0)',
+            annotationLabel: '> annotation|seriesByIndex(1)',
+            annotationColor: '> annotation|seriesByIndex(2)',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: '_time', groupby_rank: '0' }, { name: 'count' }, { name: '_span' }],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['2', '10', '13', '60', '43'],
+                        ['1', '1', '1', '1', '1'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+            annotation: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time', groupby_rank: '0' },
+                        { name: 'annotation_label' },
+                        { name: 'annotation_color' },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:11:50.000-07:00',
+                            '2018-05-02T18:13:25.000-07:00',
+                            '2018-05-02T18:14:30.000-07:00',
+                        ],
+                        ['houston, we have a problem', 'just close the jira', 'looking good now'],
+                        ['#f44271', '#f4a941', '#41f49a'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Green
+
+- **Key:** Background Color
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            backgroundColor: '#008000',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Data Values Display - All
+
+- **Key:** Data Labels
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        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 Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Legend Mode - seriesCompare
+
+- **Key:** Legend Mode
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            legendMode: 'seriesCompare',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Very Long Legend Labels, Legend Truncation - Start
+
+- **Key:** Legend Style Mode
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        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 },
+            },
+        }}
+    />
+);
+```
+
+## Line Dash Style - shortDashDot
+
+- **Key:** Line Dash Style
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            lineDashStyle: 'shortDashDot',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Line Dash Style by Field: Count - dash, Percent - dashDot
+
+- **Key:** Field Dash Style
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            lineDashStylesByField: { count: 'dash', percent: 'dashDot' },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Line Width - 5
+
+- **Key:** Line Width
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            lineWidth: 5,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Line Marker Display - Outlined
+
+- **Key:** Line Markers
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            markerDisplay: 'outlined',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Null Value Display - Zero
+
+- **Key:** Null Value Mode
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            nullValueDisplay: 'zero',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                            groupby_rank: '0',
+                        },
+                        {
+                            name: '10.1.1.000',
+                            data_source: 'sum(date_hour)',
+                            splitby_field: 'clientip',
+                            splitby_value: '10.1.1.000',
+                        },
+                        {
+                            name: '10.1.1.002',
+                            data_source: 'sum(date_hour)',
+                            splitby_field: 'clientip',
+                            splitby_value: '10.1.1.002',
+                        },
+                        {
+                            name: '_span',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2017-08-20T00:00:00.000-07:00',
+                            '2017-08-20T00:30:00.000-07:00',
+                            '2017-08-20T01:00:00.000-07:00',
+                            '2017-08-20T01:30:00.000-07:00',
+                            '2017-08-20T02:00:00.000-07:00',
+                            '2017-08-20T02:30:00.000-07:00',
+                            '2017-08-20T03:00:00.000-07:00',
+                            '2017-08-20T03:30:00.000-07:00',
+                            '2017-08-20T04:00:00.000-07:00',
+                            '2017-08-20T04:30:00.000-07:00',
+                        ],
+                        ['', '', '170', '100', '22', '', '', '1040', '221', '42'],
+                        ['', '', '', '', '460', '154', '', '36', '576', '1625'],
+                        ['1800', '1800', '1800', '1800', '1800', '1800', '1800', '1800', '1800', '1800'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors: Red and Blue
+
+- **Key:** Series Colors
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            seriesColors: ['#FF0000', '#0000FF'],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors by Field: Total Count - Green, Percent - Orange
+
+- **Key:** Field Colors
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            seriesColorsByField: {
+                'total count': '#008000',
+                percent: '#FFA500',
+            },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'total count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Line Smoothing - True
+
+- **Key:** Showl Linesmoothing
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showLineSmoothing: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Split Series - True
+
+- **Key:** Split Series
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showSplitSeries: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Independent Y-Axis Ranges - True
+
+- **Key:** Split Series Independent
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showSplitSeries: true,
+            showIndependentYRanges: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Label Rotation - 45
+
+- **Key:** Xaxis Label Rotation
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            xAxisLabelRotation: 45,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis and X-Axis Title Text - Specified
+
+- **Key:** Title Specified
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisTitleText: 'Axis Y Count',
+            xAxisTitleText: 'Axis X Time',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis and X-Axis Title Text - Hide
+
+- **Key:** Title Not Visible
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisTitleVisibility: 'hide',
+            xAxisTitleVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Label Visibility - Hide
+
+- **Key:** Axismajorlabelvisiblilityhidden
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            xAxisLabelVisibility: 'hide',
+            yAxisLabelVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis and Y-Axis Line Visibility - Show
+
+- **Key:** Axislinevisiblilityshow
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            xAxisLineVisibility: 'show',
+            yAxisLineVisibility: 'show',
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Major Tick Visibility - Hide
+
+- **Key:** Axisxmajortick Vvsibilityhidden
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            xAxisMajorTickVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 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 Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisMajorTickVisibility: 'show',
+            yAxisMinorTickVisibility: 'show',
+            yAxisLineVisibility: 'show',
+            yAxisMajorTickSize: 20,
+            xAxisMajorTickSize: 20,
+            yAxisMinorTickSize: 10,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Major Grid - False, X-Axis Major Grid - True
+
+- **Key:** Major Grid
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showXMajorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Minor Grid - True
+
+- **Key:** Minor Grid
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showYMinorGridLines: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## X-Axis Max Label Parts - 2
+
+- **Key:** Max Label Parts
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        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 Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisAbbreviation: 'off',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '1213', '1122', '819'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Scale - Log
+
+- **Key:** Axis Yscale
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisScale: 'log',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Minimum - 250
+
+- **Key:** Yaxis Min
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisMin: 250,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Maximum - 500
+
+- **Key:** Yaxis Max
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisMax: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y-Axis Major Tick Interval - 500
+
+- **Key:** Yaxis Major Ticks Interval
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            yAxisMajorTickInterval: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis With Zero - True
+
+- **Key:** Include Zero True
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showYAxisWithZero: true,
+            yAxisMin: 10,
+        }}
+        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:** Include Zero False
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showYAxisWithZero: false,
+            yAxisMin: 10,
+        }}
+        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:** Extend Range True
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showYAxisExtendedRange: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Y-Axis Extended Range - False
+
+- **Key:** Extend Range False
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showYAxisExtendedRange: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Y2-Axis Mapping Field - Specified
+
+- **Key:** Y2 Axis Mapped
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            y2Fields: ['percent'],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['600', '525', '295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Title Text - Hide
+
+- **Key:** Y2 Title Not Visible
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            y2AxisTitleVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '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 Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            y2AxisLabelVisibility: 'hide',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '713', '322', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Line - Show
+
+- **Key:** Y2 Line Visible
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            y2AxisLineVisibility: 'show',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '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 Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            overlayFields: ['splunkd', 'mongod'],
+            showOverlayY2Axis: true,
+            y2AxisTitleText: 'Y2-Axis Count',
+            y2AxisAbbreviation: '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'],
+                        ['37228', '53195', '1145', '9332', '19763'],
+                        ['14881', '17341', '18081', '19774', '10467'],
+                    ],
+                    fields: [
+                        { name: '_time' },
+                        { name: 'splunkd' },
+                        { name: 'splunkd_web_access' },
+                        { name: 'mongod' },
+                    ],
+                },
+                meta: {
+                    totalCount: 100,
+                },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Scale - Log
+
+- **Key:** Y2 Scale
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            overlayFields: 'count',
+            showOverlayY2Axis: true,
+            y2AxisScale: 'log',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '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 Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2MajorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Minor Grid - True
+
+- **Key:** Chart Overlay Minor Grid
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2MinorGridLines: true,
+            showYMajorGridLines: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Major Tick Size - 20, Y2-Axis Minor Tick Size - 10
+
+- **Key:** Chart Overlay Ticks
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMajorTickVisibility: 'show',
+            y2AxisMinorTickVisibility: 'show',
+            y2AxisMajorTickSize: 20,
+            y2AxisMinorTickSize: 10,
+            y2AxisLineVisibility: 'show',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Minimum - 500
+
+- **Key:** Chart Overlay Min
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Maximum - 1500
+
+- **Key:** Chart Overlay Max
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMax: 1500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Y2-Axis Major Tick Interval - 500
+
+- **Key:** Chart Overlay Interval
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            y2AxisMajorTickInterval: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis With Zero - True
+
+- **Key:** Chart Overlay With Zero True
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2AxisWithZero: true,
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis With Zero - False
+
+- **Key:** Chart Overlay With Zero False
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showY2AxisWithZero: false,
+            y2AxisMin: 500,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['1600', '1525', '1295', '213', '122', '19'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis Rounded Labels - True
+
+- **Key:** Chart Overlay Rounded True
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showRoundedY2AxisLabels: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['2', '2.5', '3.5', '1.5', '.8', '2.2'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Chart Overlay - On, Show Y2-Axis Rounded Labels - False
+
+- **Key:** Chart Overlay Rounded False
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{
+            showOverlayY2Axis: true,
+            overlayFields: 'count',
+            showRoundedY2AxisLabels: false,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        { name: '_time' },
+                        {
+                            name: 'count',
+                            type_special: 'count',
+                        },
+                        {
+                            name: 'percent',
+                            type_special: 'percent',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                        ['2', '2.5', '3.5', '1.5', '.8', '2.2'],
+                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Outlier Detection
+
+- **Key:** Outlier Detection
+
+```jsx
+import React from 'react';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <Line
+        options={{}}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [
+                        {
+                            name: '_time',
+                        },
+                        {
+                            name: 'count',
+                        },
+                        {
+                            name: 'upperBound',
+                        },
+                        {
+                            name: 'lowerBound',
+                        },
+                        {
+                            name: 'isOutlier',
+                        },
+                    ],
+                    columns: [
+                        [
+                            '2017-07-05T00:00:00.000-07:00',
+                            '2017-07-06T00:00:00.000-07:00',
+                            '2017-07-07T00:00:00.000-07:00',
+                            '2017-07-08T00:00:00.000-07:00',
+                            '2017-07-09T00:00:00.000-07:00',
+                            '2017-07-10T00:00:00.000-07:00',
+                            '2017-07-11T00:00:00.000-07:00',
+                            '2017-07-12T00:00:00.000-07:00',
+                            '2017-07-13T00:00:00.000-07:00',
+                            '2017-07-14T00:00:00.000-07:00',
+                            '2017-07-15T00:00:00.000-07:00',
+                            '2017-07-16T00:00:00.000-07:00',
+                            '2017-07-17T00:00:00.000-07:00',
+                            '2017-07-18T00:00:00.000-07:00',
+                        ],
+                        [
+                            '43670',
+                            '34735',
+                            '153472',
+                            '79423',
+                            '210527',
+                            '165434',
+                            '65382',
+                            '92035',
+                            '54667',
+                            '82035',
+                            '210597',
+                            '95434',
+                            '81617',
+                            '55382',
+                        ],
+                        [
+                            '80000',
+                            '60000',
+                            '208000',
+                            '214000',
+                            '143000',
+                            '180000',
+                            '100000',
+                            '90000',
+                            '76000',
+                            '115000',
+                            '218000',
+                            '179000',
+                            '101000',
+                            '65000',
+                        ],
+                        [
+                            '0',
+                            '30000',
+                            '130000',
+                            '178000',
+                            '100000',
+                            '158000',
+                            '60000',
+                            '63000',
+                            '46000',
+                            '75000',
+                            '170000',
+                            '115000',
+                            '50000',
+                            '34000',
+                        ],
+                        ['0', '0', '0', '1', '1', '0', '0', '1', '0', '0', '0', '1', '0', '0'],
+                    ],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import Line from '@splunk/visualizations/Line';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <Line
+            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>
+);
+```