lens-chart-page

Name: lens-chart-page
Author: elastic

71stars10forks

How to install lens-chart-page?

elastic/elastic-docs-skills/lens-chart-page

$npx -y skills add elastic/elastic-docs-skills --skill lens-chart-page

Installs into the current project.

Summary

Create or update a Lens chart documentation page following Elastic docs conventions. Use when writing a new chart type page (pie, bar, metric, gauge, heat map, etc.) or updating an existing one in explore-analyze/visualize/charts/. Relies on lens-chart-settings for verifying UI l

Files · 1

View on GitHub

SKILL.md

1	<!-- Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
2	or more contributor license agreements. See the NOTICE file distributed with
3	this work for additional information regarding copyright
4	ownership. Elasticsearch B.V. licenses this file to you under
5	the Apache License, Version 2.0 (the "License"); you may
6	not use this file except in compliance with the License.
7	You may obtain a copy of the License at
8
9	http://www.apache.org/licenses/LICENSE-2.0
10
11	Unless required by applicable law or agreed to in writing,
12	software distributed under the License is distributed on an
13	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14	KIND, either express or implied. See the License for the
15	specific language governing permissions and limitations
16	under the License. -->
17
18	# Creating Lens Chart Documentation Pages
19
20	Use these instructions when creating or updating a documentation page for a Kibana Lens chart type in `explore-analyze/visualize/charts/`.
21
22	## Before writing: verify settings against source code
23
24	Use the lens-chart-settings skill to verify all UI labels, option values, and rendering order against the Kibana source code before documenting them. Never guess UI labels.
25
26	## Research resources
27
28	### Kibana source code paths
29
30	\| Chart type \| Source path \|
31	\|------------\|-------------\|
32	\| Partition (pie, donut, treemap, mosaic, waffle) \| `x-pack/platform/plugins/shared/lens/public/visualizations/partition/` \|
33	\| XY (bar, line, area) \| `x-pack/platform/plugins/shared/lens/public/visualizations/xy/` \|
34	\| Metric \| `x-pack/platform/plugins/shared/lens/public/visualizations/metric/` \|
35	\| Datatable \| `x-pack/platform/plugins/shared/lens/public/visualizations/datatable/` \|
36
37	Many visualizations use shared components (in `shared_components/`) that accept different props per chart. Always check the visualization-specific wrapper to see which props are passed, rather than assuming all shared component options are available.
38
39	### EUI data visualization guidelines
40
41	- [Part-to-whole comparisons](https://eui.elastic.co/docs/dataviz/types/part-to-whole-comparisons/) (pie, donut, treemap)
42	- [Dashboard good practices](https://eui.elastic.co/docs/dataviz/dashboard-good-practices/)
43	- [Categorical color palettes](https://eui.elastic.co/docs/dataviz/guides/color-guidelines/)
44
45	### Existing content to check
46
47	- Main Lens page: `explore-analyze/visualize/lens.md` — check for content to reference or deduplicate.
48	- Other chart pages: `explore-analyze/visualize/charts/*.md` — follow established patterns.
49	- Shared snippets: `explore-analyze/_snippets/lens-*.md` — reuse instead of duplicating.
50
51	Key snippets:
52
53	\| Snippet \| Purpose \|
54	\|---------\|---------\|
55	\| `lens-prerequisites.md` \| Prerequisites paragraph (data views, ES\\|QL mode) \|
56	\| `lens-rank-by-options.md` \| Top values rank-by options \|
57	\| `lens-value-advanced-settings.md` \| Advanced settings for value/metric dimensions \|
58	\| `lens-breakdown-advanced-settings.md` \| Breakdown advanced settings \|
59	\| `lens-histogram-settings.md` \| Date histogram settings \|
60	\| `line-chart-legend-settings.md` \| Legend settings including Statistics (line/area) \|
61	\| `line-chart-style-settings.md` \| Style settings (line/area) \|
62
63	When creating a new chart page, update `lens.md` to link to it and remove any duplicated content.
64
65	## File location and frontmatter
66
67	Place the file at `explore-analyze/visualize/charts/<chart-type>.md` with this frontmatter:
68
69	```yaml
70	---
71	navigation_title: <Chart type> charts
72	description: Instructions and best practices for building <chart type> charts with Kibana Lens in Elastic.
73	---
74	```
75
76	## Chart-specific dimensions
77
78	\| Chart type \| Primary dimensions \| Additional dimensions \|
79	\|------------\|-------------------\|----------------------\|
80	\| Pie / Donut \| Slice by, Metric \| (none) \|
81	\| Bar / Line / Area \| Horizontal axis, Vertical axis \| Breakdown \|
82	\| Metric \| Primary metric \| Secondary metric, Maximum value \|
83	\| Gauge \| Metric \| Minimum value, Maximum value, Goal \|
84	\| Table \| Metrics, Rows \| Split metrics by \|
85
86	## Page structure
87
88	Follow this exact section order. Every chart page uses it consistently.
89
90	### 1. Title and introduction
91
92	```
93	# Build <chart type> charts with {{kib}}
94	```
95
96	- One paragraph (2-3 sentences): what the chart does and when it's useful. Focus on purpose.
97	- Weave in specific actionable constraints (e.g., "works best with a maximum of 6 slices"). Skip generic advice

People who liked this also viewed

6 picks

Type

lens-chart-page

71stars10forks

View on GitHub

How to install lens-chart-page?

elastic/elastic-docs-skills/lens-chart-page

$npx -y skills add elastic/elastic-docs-skills --skill lens-chart-page

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
2	or more contributor license agreements. See the NOTICE file distributed with
3	this work for additional information regarding copyright
4	ownership. Elasticsearch B.V. licenses this file to you under
5	the Apache License, Version 2.0 (the "License"); you may
6	not use this file except in compliance with the License.
7	You may obtain a copy of the License at
8
9	http://www.apache.org/licenses/LICENSE-2.0
10
11	Unless required by applicable law or agreed to in writing,
12	software distributed under the License is distributed on an
13	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14	KIND, either express or implied. See the License for the
15	specific language governing permissions and limitations
16	under the License. -->
17
18	# Creating Lens Chart Documentation Pages
19
20	Use these instructions when creating or updating a documentation page for a Kibana Lens chart type in `explore-analyze/visualize/charts/`.
21
22	## Before writing: verify settings against source code
23
24	Use the lens-chart-settings skill to verify all UI labels, option values, and rendering order against the Kibana source code before documenting them. Never guess UI labels.
25
26	## Research resources
27
28	### Kibana source code paths
29
30	\| Chart type \| Source path \|
31	\|------------\|-------------\|
32	\| Partition (pie, donut, treemap, mosaic, waffle) \| `x-pack/platform/plugins/shared/lens/public/visualizations/partition/` \|
33	\| XY (bar, line, area) \| `x-pack/platform/plugins/shared/lens/public/visualizations/xy/` \|
34	\| Metric \| `x-pack/platform/plugins/shared/lens/public/visualizations/metric/` \|
35	\| Datatable \| `x-pack/platform/plugins/shared/lens/public/visualizations/datatable/` \|
36
37	Many visualizations use shared components (in `shared_components/`) that accept different props per chart. Always check the visualization-specific wrapper to see which props are passed, rather than assuming all shared component options are available.
38
39	### EUI data visualization guidelines
40
41	- [Part-to-whole comparisons](https://eui.elastic.co/docs/dataviz/types/part-to-whole-comparisons/) (pie, donut, treemap)
42	- [Dashboard good practices](https://eui.elastic.co/docs/dataviz/dashboard-good-practices/)
43	- [Categorical color palettes](https://eui.elastic.co/docs/dataviz/guides/color-guidelines/)
44
45	### Existing content to check
46
47	- Main Lens page: `explore-analyze/visualize/lens.md` — check for content to reference or deduplicate.
48	- Other chart pages: `explore-analyze/visualize/charts/*.md` — follow established patterns.
49	- Shared snippets: `explore-analyze/_snippets/lens-*.md` — reuse instead of duplicating.
50
51	Key snippets:
52
53	\| Snippet \| Purpose \|
54	\|---------\|---------\|
55	\| `lens-prerequisites.md` \| Prerequisites paragraph (data views, ES\\|QL mode) \|
56	\| `lens-rank-by-options.md` \| Top values rank-by options \|
57	\| `lens-value-advanced-settings.md` \| Advanced settings for value/metric dimensions \|
58	\| `lens-breakdown-advanced-settings.md` \| Breakdown advanced settings \|
59	\| `lens-histogram-settings.md` \| Date histogram settings \|
60	\| `line-chart-legend-settings.md` \| Legend settings including Statistics (line/area) \|
61	\| `line-chart-style-settings.md` \| Style settings (line/area) \|
62
63	When creating a new chart page, update `lens.md` to link to it and remove any duplicated content.
64
65	## File location and frontmatter
66
67	Place the file at `explore-analyze/visualize/charts/<chart-type>.md` with this frontmatter:
68
69	```yaml
70	---
71	navigation_title: <Chart type> charts
72	description: Instructions and best practices for building <chart type> charts with Kibana Lens in Elastic.
73	---
74	```
75
76	## Chart-specific dimensions
77
78	\| Chart type \| Primary dimensions \| Additional dimensions \|
79	\|------------\|-------------------\|----------------------\|
80	\| Pie / Donut \| Slice by, Metric \| (none) \|
81	\| Bar / Line / Area \| Horizontal axis, Vertical axis \| Breakdown \|
82	\| Metric \| Primary metric \| Secondary metric, Maximum value \|
83	\| Gauge \| Metric \| Minimum value, Maximum value, Goal \|
84	\| Table \| Metrics, Rows \| Split metrics by \|
85
86	## Page structure
87
88	Follow this exact section order. Every chart page uses it consistently.
89
90	### 1. Title and introduction
91
92	```
93	# Build <chart type> charts with {{kib}}
94	```
95
96	- One paragraph (2-3 sentences): what the chart does and when it's useful. Focus on purpose.
97	- Weave in specific actionable constraints (e.g., "works best with a maximum of 6 slices"). Skip generic advice

People who liked this also viewed

6 picks

Type