[8.x] [Docs] Update Dashboard docs for chart switch redesign in 8.16.0 (

#197543) (#197738)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Docs] Update Dashboard docs for chart switch redesign in 8.16.0
(#197543)](#197543)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"wajihaparvez","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-24T21:55:01Z","message":"[Docs]
Update Dashboard docs for chart switch redesign in 8.16.0
(#197543)\n\n## Summary\r\n\r\nUpdated visuals in Dashboard docs for
chart switch redesign and related\r\nchanges.\r\n\r\nCloses:
[#538](https://github.com/elastic/platform-docs-team/issues/538)\r\nRel:
#187475","sha":"7ceaf32fa4014977be80b0c67f12fed44a0fe664","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0"],"title":"[Docs]
Update Dashboard docs for chart switch redesign in
8.16.0","number":197543,"url":"https://github.com/elastic/kibana/pull/197543","mergeCommit":{"message":"[Docs]
Update Dashboard docs for chart switch redesign in 8.16.0
(#197543)\n\n## Summary\r\n\r\nUpdated visuals in Dashboard docs for
chart switch redesign and related\r\nchanges.\r\n\r\nCloses:
[#538](https://github.com/elastic/platform-docs-team/issues/538)\r\nRel:
#187475","sha":"7ceaf32fa4014977be80b0c67f12fed44a0fe664"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197543","number":197543,"mergeCommit":{"message":"[Docs]
Update Dashboard docs for chart switch redesign in 8.16.0
(#197543)\n\n## Summary\r\n\r\nUpdated visuals in Dashboard docs for
chart switch redesign and related\r\nchanges.\r\n\r\nCloses:
[#538](https://github.com/elastic/platform-docs-team/issues/538)\r\nRel:
#187475","sha":"7ceaf32fa4014977be80b0c67f12fed44a0fe664"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: wajihaparvez <[email protected]>

docs/user/dashboard/lens.asciidoc

@@ -371,7 +371,7 @@ The following component menus are available:
 
 When creating or editing a visualization, you can customize the way the legend gets displayed, and the data it displays. To do that, look for the image:images/legend-icon.svg[Legend icon] icon.
 
-image::images/legend-popover.png[Menu with options to customize the legend of a visualization, width=40%]
+image::images/legend-popover-8.16.0.png[Menu with options to customize the legend of a visualization, width=50%]
 
 NOTE: The options available can vary based on the type of chart you're setting up. For example, showing additional statistics is only possible for time series charts.
 

docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc

@@ -60,7 +60,7 @@ To create the visualizations in this tutorial, you'll use the following fields:
 Click a field name to view more details, such as its top values and distribution.
 
 [role="screenshot"]
-image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltff29bc11413cc5d8/66fdc386762d3a15135abec4/tutorial-field-top-values-distribution.gif[Clicking a field name to view more details]
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt25c7a05e0f5daaa3/671966b9b1d3dd705a2ae650/tutorial-field-more-info.gif[Clicking a field name to view more details]
 
 [discrete]
 [[view-the-number-of-website-visitors]]
@@ -73,12 +73,12 @@ The only number function that you can use with *clientip* is *Unique count*, als
 . Open the *Visualization type* dropdown, then select *Metric*.
 +
 [role="screenshot"]
-image::images/lens_visualizationTypeDropdown_8.4.0.png[Visualization type dropdown]
+image::images/visualization-type-dropdown-8.16.0.png[Visualization type dropdown]
 
 . From the *Available fields* list, drag *clientip* to the workspace or layer pane.
 +
 [role="screenshot"]
-image::images/lens_metricUniqueCountOfClientip_8.4.0.png[Metric visualization of the clientip field]
+image::images/tutorial-unique-count-of-client-ip-8.16.0.png[Metric visualization of the clientip field]
 +
 In the layer pane, *Unique count of clientip* appears because the editor automatically applies the *Unique count* function to the *clientip* field. *Unique count* is the only numeric function that works with IP addresses.
 
@@ -133,12 +133,12 @@ To save space on the dashboard, hide the axis labels.
 . Open the *Left axis* menu, then select *None* from the *Axis title* dropdown.
 +
 [role="screenshot"]
-image::images/lens_lineChartMetricOverTimeLeftAxis_8.7.png[Left axis menu]
+image::images/line-chart-left-axis-8.16.0.png[Left axis menu, width=50%]
 
 . Open the *Bottom axis* menu, then select *None* from the *Axis title* dropdown.
 +
 [role="screenshot"]
-image::images/lens_lineChartMetricOverTimeBottomAxis_8.7.png[Bottom axis menu]
+image::images/line-chart-bottom-axis-8.16.0.png[Bottom axis menu, width=50%]
 
 . Click *Save and return*
 
@@ -180,7 +180,7 @@ The chart labels are unable to display because the *request.keyword* field conta
 . Open the *Visualization type* dropdown, then select *Table*.
 +
 [role="screenshot"]
-image::images/lens_end_to_end_2_1_2.png[Table with top values of request.keyword by most unique visitors]
+image::images/table-with-request-keyword-and-client-ip-8.16.0.png[Table with top values of request.keyword by most unique visitors, width=70%]
 
 . In the layer pane, click *Top 5 values of request.keyword*.