Skip to content

Update @elastic/charts to v70, remove legacy time axis support#210579

Merged
markov00 merged 51 commits intoelastic:mainfrom
walterra:remove-legacy-time-axis-support
Jun 6, 2025
Merged

Update @elastic/charts to v70, remove legacy time axis support#210579
markov00 merged 51 commits intoelastic:mainfrom
walterra:remove-legacy-time-axis-support

Conversation

@walterra
Copy link
Contributor

@walterra walterra commented Feb 11, 2025

Summary

Part of #193683. Replaces renovate bot PR #216102 for Elastic Charts v70 (see that PR for fully embedded release notes).

  • Upgrade Elastic Charts from v69 to v70
  • Remove MULTILAYER_TIME_AXIS_STYLE constants and imports
  • Remove timeAxisLayerCount parameters from Axis components
  • Add explanatory comments to all xScaleType={ScaleType.Time} usages
  • Fix a regression in data visualizer column charts by disabling grid lines

close #221509

Release Notes

Updates time based charts to use the multi-layer time axis by default, providing a better time window context and improved label positioning.

Before:

image

After:

image

Remove Legacy Time Axis Support

  • This PR leaves the advanced setting visualization:useLegacyTimeAxis in place but the setting will no longer be picked up in the UI and charts with time axis will be rendered using the multi layer time axis. The removal of the advanced setting will be done in a follow up
  • Removes the MULTILAYER_TIME_AXIS_STYLE constant and related styling, this is now covered by Elastic Charts itself.

Code that was previously using custom styles and settings to use the multilayer time axis, now updated to use the multi layer time axis by default now:

  • vis_types/xy
  • vis_types/timeseries
  • chart_expressions/expression_xy
  • lens/xy
  • ML: Data visualizer components
  • ML: AIOps document count histogram

Checklist

  • Unit or functional tests were updated or added to match the most common scenarios
  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

Identify risks

Risk of layout regressions because of removal of the legacy time axis. This PR needs manual testing of the affected components.

For Reviewers

If you are pinged, is probably do to the changes we are doing at the timeseries chart level. These are visual changes that, without our direct ping on code, can probably go unnoticed. So we kindle ask you to pull the PR locally and verify if the timeseries charts within your solutions/apps looks ok. Thanks

@walterra walterra self-assigned this Feb 11, 2025
@walterra walterra force-pushed the remove-legacy-time-axis-support branch from 18fd766 to 2ae4450 Compare March 3, 2025 12:14
@walterra walterra force-pushed the remove-legacy-time-axis-support branch from 2ae4450 to e1a6d2f Compare May 2, 2025 08:26
@prodsecmachine
Copy link
Collaborator

prodsecmachine commented May 2, 2025

🎉 Snyk checks have passed. No issues have been found so far.

security/snyk check is complete. No issues have been found. (View Details)

license/snyk check is complete. No issues have been found. (View Details)

@walterra walterra force-pushed the remove-legacy-time-axis-support branch 3 times, most recently from a53f32b to c647359 Compare May 5, 2025 14:20
@elastic elastic deleted a comment from github-actions bot May 5, 2025
@elastic elastic deleted a comment from github-actions bot May 5, 2025
@walterra walterra force-pushed the remove-legacy-time-axis-support branch 3 times, most recently from ff5d7a6 to 9601e32 Compare May 7, 2025 09:00
@walterra walterra changed the title Remove legacy time axis support May 7, 2025
labelFormat={useLegacyTimeAxis ? undefined : () => ''}
timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
labelFormat={() => ''}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested data drift charts before/after show no regressions:

es70-data-drift-02-after

position={Position.Bottom}
showOverlappingTicks={true}
tickFormat={(value) => xAxisFormatter.convert(value)}
// temporary fix to reduce horizontal chart margin until fixed in Elastic Charts itself
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested data drift charts before/after show no regressions:

es70-data-visualizer-dv-02-after

labelFormat={useLegacyTimeAxis ? undefined : () => ''}
timeAxisLayerCount={useLegacyTimeAxis ? 0 : 2}
style={useLegacyTimeAxis ? {} : MULTILAYER_TIME_AXIS_STYLE}
labelFormat={() => ''}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested AIOps document count charts before/after show no regressions:

es70-log-rate-analysis-02after

@walterra walterra force-pushed the remove-legacy-time-axis-support branch from 1f508b6 to c54f22d Compare May 8, 2025 09:57
@walterra walterra force-pushed the remove-legacy-time-axis-support branch from c54f22d to 81a07f6 Compare May 9, 2025 10:21

await dashboard.clickExitFullScreenLogoButton();
expect(percentDifference).to.be.lessThan(0.029);
expect(percentDifference).to.be.lessThan(0.29);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Temporarily updated the value here, but I'd like to update the baseline.

Existing baseline:

es70-ftr-area_chart-01-before

This PR:

es70-ftr-area_chart-02-after

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reverted the assertions in 5c97a7e. Updated this baseline image in 547c80f.


await dashboard.clickExitFullScreenLogoButton();
expect(percentDifference).to.be.lessThan(0.022);
expect(percentDifference).to.be.lessThan(0.15);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Temporarily updated the value here, but I'd like to update the baseline.

Existing baseline:

es70-tsvb_dashboard-01-before

This PR:

es70-tsvb_dashboard-02-after

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you still planning on updating the baseline snapshots?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I'll do that. There was an issue with grabbing the updated baselines from CI but I'm on to fixing that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reverted the assertions in 5c97a7e. Updated this baseline image in 41b45d1.

@walterra walterra force-pushed the remove-legacy-time-axis-support branch 2 times, most recently from 71bbcd1 to bb07c4f Compare May 21, 2025 07:42
exclude: 'ios',
});
await act('viz_1', { x: 105, y: 115 });
await act('viz_1', { x: 143, y: 123 });
Copy link
Contributor Author

@walterra walterra May 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes in axis and margins caused the click to hit the data point to trigger the filter modal. This updates the coordinates to make it pass again.

Screenshot main after click with old time axis:

CleanShot 2025-05-21 at 12 18 20@2x

Screenshot of this branch before the click with the new axis:

CleanShot 2025-05-21 at 14 13 31@2x

await visualBuilder.setIntervalValue('1w');

await act('vis_2', { x: -100, y: 10 });
await act('vis_2', { x: -130, y: 10 });
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in axis and margins caused the click on wrong bar, this updates the coordinates to click Win 7 again.

CleanShot 2025-05-21 at 15 31 44@2x

'2015-09-22 00:00',
'2015-09-23 00:00',
];
const xAxisLabels = ['September 2015', '19th', '20th', '21st', '22nd', '23rd'];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switches assertions to the labels of the multi layer time axis.

@walterra walterra force-pushed the remove-legacy-time-axis-support branch 2 times, most recently from c377767 to 103aa45 Compare May 22, 2025 12:37
@klacabane
Copy link
Contributor

@flash1293 agreed this is more readable now, perhaps we should keep the interval logged somewhere ? I'll create an issue to follow up

Copy link
Contributor

@viduni94 viduni94 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Obs AI Assistant changes LGTM

Copy link
Contributor

@PhilippeOberti PhilippeOberti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Desk tested and code change LGTM for the @elastic/security-threat-hunting-investigations team!

@elasticmachine
Copy link
Contributor

elasticmachine commented Jun 5, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
charts 162 160 -2

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
@kbn/management-settings-ids 126 125 -1
charts 255 231 -24
total -25

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
aiops 506.3KB 506.1KB -144.0B
cloudSecurityPosture 541.6KB 541.6KB +11.0B
dashboard 622.7KB 622.5KB -150.0B
dataVisualizer 670.8KB 670.6KB -215.0B
eventAnnotationListing 204.1KB 204.0KB -149.0B
expressionXY 100.0KB 99.8KB -297.0B
filesManagement 102.9KB 102.7KB -149.0B
graph 370.2KB 370.0KB -149.0B
lens 1.5MB 1.5MB -147.0B
logsShared 200.8KB 200.8KB +11.0B
maps 3.0MB 3.0MB -149.0B
securitySolution 9.3MB 9.3MB -34.0B
slo 987.2KB 987.1KB -175.0B
streamsApp 551.3KB 551.3KB +22.0B
visTypeTimeseries 438.8KB 438.5KB -284.0B
visTypeXy 41.2KB 41.2KB -80.0B
visualizations 373.3KB 373.1KB -149.0B
total -2.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
aiops 17.8KB 17.7KB -135.0B
charts 36.2KB 35.8KB -352.0B
dataVisualizer 26.7KB 26.5KB -135.0B
expressionXY 40.2KB 40.0KB -240.0B
kbnUiSharedDeps-npmDll 6.3MB 6.3MB +1.1KB
triggersActionsUi 111.7KB 111.6KB -135.0B
visTypeTimeseries 17.6KB 17.5KB -135.0B
visTypeXy 28.9KB 28.7KB -143.0B
total -132.0B
Unknown metric groups

API count

id before after diff
@kbn/management-settings-ids 127 126 -1
charts 271 247 -24
total -25

History

cc @walterra @markov00

Copy link
Contributor

@Zacqary Zacqary left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Response Ops changes LGTM

@markov00 markov00 merged commit 5af2dc6 into elastic:main Jun 6, 2025
12 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.19

https://github.com/elastic/kibana/actions/runs/15488562865

@kibanamachine
Copy link
Contributor

💔 All backports failed

Status Branch Result
8.19 Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 210579

Questions ?

Please refer to the Backport tool documentation

@markov00
Copy link
Contributor

markov00 commented Jun 6, 2025

💚 All backports created successfully

Status Branch Result
8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

justinkambic added a commit that referenced this pull request Jun 9, 2025
## Summary

Resolves #212242.

This resolves an accessibility failure in the `MetricItem` component
where Elastic Charts renders an svg with `role="img"` but no `alt`.

The svg renders an `aria-labelledby` attribute that is generated from
the supplied chart ID. This PR will create an ID for each chart and pass
it as a prop, and then reverse-engineer the expected ID to apply to the
wrapper div, which also contains a label that specifies some of the data
we are passing to `MetricItem`. This will allow screen reader users to
have an idea of the information displayed for a given `MetricItem` if
they choose to zero in on any of the charts on the page.

_NOTE:_ we cannot merge this until Kibana bumps its dependency of
Elastic Charts to
[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),
because I had to make an upstream contribution to fix a bug with the
generated `aria-labelledby` ID.

Needs to be tested once #210579 is
merged.
markov00 added a commit that referenced this pull request Jun 10, 2025
…#210579) (#222977)

# Backport

This will backport the following commits from `main` to `8.19`:
- [Update @elastic/charts to v70, remove legacy time axis support
(#210579)](#210579)

<!--- Backport version: 10.0.0 -->

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

<!--BACKPORT [{"author":{"name":"Walter
Rafelsberger","email":"walter.rafelsberger@elastic.co"},"sourceCommit":{"committedDate":"2025-06-06T10:34:33Z","message":"Update
@elastic/charts to v70, remove legacy time axis support (#210579)\n\n##
Summary\n\nPart of #193683. Replaces renovate bot PR #216102 for Elastic
Charts v70\n(see that PR for fully embedded release notes).\n\n- Upgrade
Elastic Charts from v69 to v70\n- Remove `MULTILAYER_TIME_AXIS_STYLE`
constants and imports\n- Remove `timeAxisLayerCount` parameters from
Axis components\n- Add explanatory comments to all
`xScaleType={ScaleType.Time}` usages\n- Fix a regression in data
visualizer column charts by disabling grid\nlines\n\nclose
https://github.com/elastic/kibana/issues/221509\n\n### Release
Notes\n\nUpdates time based charts to use the multi-layer time axis by
default,\nproviding a better time window context and improved label
positioning.\n\nBefore:\n\n\n![image](https://github.com/user-attachments/assets/ac038f77-ecbd-4cd3-9ac4-9deccecf6f70)\n\nAfter:\n\n\n![image](https://github.com/user-attachments/assets/7a151ee4-381a-4708-9e7c-452b4e804745)\n\n###
Remove Legacy Time Axis Support\n\n- This PR leaves the advanced setting
`visualization:useLegacyTimeAxis`\nin place but the setting will no
longer be picked up in the UI and\ncharts with time axis will be
rendered using the multi layer time axis.\n[The removal of the advanced
setting will be done in a
follow\nup](https://github.com/elastic/kibana/issues/213780)\n- Removes
the `MULTILAYER_TIME_AXIS_STYLE` constant and related styling,\nthis is
now covered by Elastic Charts itself.\n\nCode that was previously using
custom styles and settings to use the\nmultilayer time axis, now updated
to use the multi layer time axis by\ndefault now:\n\n- vis_types/xy\n-
vis_types/timeseries\n- chart_expressions/expression_xy\n- lens/xy\n-
ML: Data visualizer components\n- ML: AIOps document count
histogram\n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [x] The PR
description includes the appropriate Release Notes section,\nand the
correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n###
Identify risks\n\nRisk of layout regressions because of removal of the
legacy time axis.\nThis PR needs manual testing of the affected
components.\n\n### For Reviewers\n\nIf you are pinged, is probably do to
the changes we are doing at the\ntimeseries chart level. These are
visual changes that, without our\ndirect ping on code, can probably go
unnoticed. So we kindle ask you to\npull the PR locally and verify if
the timeseries charts within your\nsolutions/apps looks ok.
Thanks\n\n---------\n\nCo-authored-by: Marco Vettorello
<marco.vettorello@elastic.co>\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"5af2dc6b054ef119700ce0628cc879a2d5b74f0a","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:Visualizations","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0"],"title":"Update
@elastic/charts to v70, remove legacy time axis
support","number":210579,"url":"https://github.com/elastic/kibana/pull/210579","mergeCommit":{"message":"Update
@elastic/charts to v70, remove legacy time axis support (#210579)\n\n##
Summary\n\nPart of #193683. Replaces renovate bot PR #216102 for Elastic
Charts v70\n(see that PR for fully embedded release notes).\n\n- Upgrade
Elastic Charts from v69 to v70\n- Remove `MULTILAYER_TIME_AXIS_STYLE`
constants and imports\n- Remove `timeAxisLayerCount` parameters from
Axis components\n- Add explanatory comments to all
`xScaleType={ScaleType.Time}` usages\n- Fix a regression in data
visualizer column charts by disabling grid\nlines\n\nclose
https://github.com/elastic/kibana/issues/221509\n\n### Release
Notes\n\nUpdates time based charts to use the multi-layer time axis by
default,\nproviding a better time window context and improved label
positioning.\n\nBefore:\n\n\n![image](https://github.com/user-attachments/assets/ac038f77-ecbd-4cd3-9ac4-9deccecf6f70)\n\nAfter:\n\n\n![image](https://github.com/user-attachments/assets/7a151ee4-381a-4708-9e7c-452b4e804745)\n\n###
Remove Legacy Time Axis Support\n\n- This PR leaves the advanced setting
`visualization:useLegacyTimeAxis`\nin place but the setting will no
longer be picked up in the UI and\ncharts with time axis will be
rendered using the multi layer time axis.\n[The removal of the advanced
setting will be done in a
follow\nup](https://github.com/elastic/kibana/issues/213780)\n- Removes
the `MULTILAYER_TIME_AXIS_STYLE` constant and related styling,\nthis is
now covered by Elastic Charts itself.\n\nCode that was previously using
custom styles and settings to use the\nmultilayer time axis, now updated
to use the multi layer time axis by\ndefault now:\n\n- vis_types/xy\n-
vis_types/timeseries\n- chart_expressions/expression_xy\n- lens/xy\n-
ML: Data visualizer components\n- ML: AIOps document count
histogram\n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [x] The PR
description includes the appropriate Release Notes section,\nand the
correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n###
Identify risks\n\nRisk of layout regressions because of removal of the
legacy time axis.\nThis PR needs manual testing of the affected
components.\n\n### For Reviewers\n\nIf you are pinged, is probably do to
the changes we are doing at the\ntimeseries chart level. These are
visual changes that, without our\ndirect ping on code, can probably go
unnoticed. So we kindle ask you to\npull the PR locally and verify if
the timeseries charts within your\nsolutions/apps looks ok.
Thanks\n\n---------\n\nCo-authored-by: Marco Vettorello
<marco.vettorello@elastic.co>\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"5af2dc6b054ef119700ce0628cc879a2d5b74f0a"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210579","number":210579,"mergeCommit":{"message":"Update
@elastic/charts to v70, remove legacy time axis support (#210579)\n\n##
Summary\n\nPart of #193683. Replaces renovate bot PR #216102 for Elastic
Charts v70\n(see that PR for fully embedded release notes).\n\n- Upgrade
Elastic Charts from v69 to v70\n- Remove `MULTILAYER_TIME_AXIS_STYLE`
constants and imports\n- Remove `timeAxisLayerCount` parameters from
Axis components\n- Add explanatory comments to all
`xScaleType={ScaleType.Time}` usages\n- Fix a regression in data
visualizer column charts by disabling grid\nlines\n\nclose
https://github.com/elastic/kibana/issues/221509\n\n### Release
Notes\n\nUpdates time based charts to use the multi-layer time axis by
default,\nproviding a better time window context and improved label
positioning.\n\nBefore:\n\n\n![image](https://github.com/user-attachments/assets/ac038f77-ecbd-4cd3-9ac4-9deccecf6f70)\n\nAfter:\n\n\n![image](https://github.com/user-attachments/assets/7a151ee4-381a-4708-9e7c-452b4e804745)\n\n###
Remove Legacy Time Axis Support\n\n- This PR leaves the advanced setting
`visualization:useLegacyTimeAxis`\nin place but the setting will no
longer be picked up in the UI and\ncharts with time axis will be
rendered using the multi layer time axis.\n[The removal of the advanced
setting will be done in a
follow\nup](https://github.com/elastic/kibana/issues/213780)\n- Removes
the `MULTILAYER_TIME_AXIS_STYLE` constant and related styling,\nthis is
now covered by Elastic Charts itself.\n\nCode that was previously using
custom styles and settings to use the\nmultilayer time axis, now updated
to use the multi layer time axis by\ndefault now:\n\n- vis_types/xy\n-
vis_types/timeseries\n- chart_expressions/expression_xy\n- lens/xy\n-
ML: Data visualizer components\n- ML: AIOps document count
histogram\n\n### Checklist\n\n- [x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios\n- [x] The PR
description includes the appropriate Release Notes section,\nand the
correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n\n###
Identify risks\n\nRisk of layout regressions because of removal of the
legacy time axis.\nThis PR needs manual testing of the affected
components.\n\n### For Reviewers\n\nIf you are pinged, is probably do to
the changes we are doing at the\ntimeseries chart level. These are
visual changes that, without our\ndirect ping on code, can probably go
unnoticed. So we kindle ask you to\npull the PR locally and verify if
the timeseries charts within your\nsolutions/apps looks ok.
Thanks\n\n---------\n\nCo-authored-by: Marco Vettorello
<marco.vettorello@elastic.co>\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"5af2dc6b054ef119700ce0628cc879a2d5b74f0a"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@walterra walterra deleted the remove-legacy-time-axis-support branch June 10, 2025 14:13
pmuellr pushed a commit to pmuellr/kibana that referenced this pull request Jun 11, 2025
…ic#210579)

## Summary

Part of elastic#193683. Replaces renovate bot PR elastic#216102 for Elastic Charts v70
(see that PR for fully embedded release notes).

- Upgrade Elastic Charts from v69 to v70
- Remove `MULTILAYER_TIME_AXIS_STYLE` constants and imports
- Remove `timeAxisLayerCount` parameters from Axis components
- Add explanatory comments to all `xScaleType={ScaleType.Time}` usages
- Fix a regression in data visualizer column charts by disabling grid
lines

close elastic#221509

### Release Notes

Updates time based charts to use the multi-layer time axis by default,
providing a better time window context and improved label positioning.

Before:


![image](https://github.com/user-attachments/assets/ac038f77-ecbd-4cd3-9ac4-9deccecf6f70)

After:


![image](https://github.com/user-attachments/assets/7a151ee4-381a-4708-9e7c-452b4e804745)

### Remove Legacy Time Axis Support

- This PR leaves the advanced setting `visualization:useLegacyTimeAxis`
in place but the setting will no longer be picked up in the UI and
charts with time axis will be rendered using the multi layer time axis.
[The removal of the advanced setting will be done in a follow
up](elastic#213780)
- Removes the `MULTILAYER_TIME_AXIS_STYLE` constant and related styling,
this is now covered by Elastic Charts itself.

Code that was previously using custom styles and settings to use the
multilayer time axis, now updated to use the multi layer time axis by
default now:

- vis_types/xy
- vis_types/timeseries
- chart_expressions/expression_xy
- lens/xy
- ML: Data visualizer components
- ML: AIOps document count histogram

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Risk of layout regressions because of removal of the legacy time axis.
This PR needs manual testing of the affected components.

### For Reviewers

If you are pinged, is probably do to the changes we are doing at the
timeseries chart level. These are visual changes that, without our
direct ping on code, can probably go unnoticed. So we kindle ask you to
pull the PR locally and verify if the timeseries charts within your
solutions/apps looks ok. Thanks

---------

Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
pmuellr pushed a commit to pmuellr/kibana that referenced this pull request Jun 11, 2025
…ic#220298)

## Summary

Resolves elastic#212242.

This resolves an accessibility failure in the `MetricItem` component
where Elastic Charts renders an svg with `role="img"` but no `alt`.

The svg renders an `aria-labelledby` attribute that is generated from
the supplied chart ID. This PR will create an ID for each chart and pass
it as a prop, and then reverse-engineer the expected ID to apply to the
wrapper div, which also contains a label that specifies some of the data
we are passing to `MetricItem`. This will allow screen reader users to
have an idea of the information displayed for a given `MetricItem` if
they choose to zero in on any of the charts on the page.

_NOTE:_ we cannot merge this until Kibana bumps its dependency of
Elastic Charts to
[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),
because I had to make an upstream contribution to fix a bug with the
generated `aria-labelledby` ID.

Needs to be tested once elastic#210579 is
merged.
nickpeihl pushed a commit to nickpeihl/kibana that referenced this pull request Jun 12, 2025
…ic#210579)

## Summary

Part of elastic#193683. Replaces renovate bot PR elastic#216102 for Elastic Charts v70
(see that PR for fully embedded release notes).

- Upgrade Elastic Charts from v69 to v70
- Remove `MULTILAYER_TIME_AXIS_STYLE` constants and imports
- Remove `timeAxisLayerCount` parameters from Axis components
- Add explanatory comments to all `xScaleType={ScaleType.Time}` usages
- Fix a regression in data visualizer column charts by disabling grid
lines

close elastic#221509

### Release Notes

Updates time based charts to use the multi-layer time axis by default,
providing a better time window context and improved label positioning.

Before:


![image](https://github.com/user-attachments/assets/ac038f77-ecbd-4cd3-9ac4-9deccecf6f70)

After:


![image](https://github.com/user-attachments/assets/7a151ee4-381a-4708-9e7c-452b4e804745)

### Remove Legacy Time Axis Support

- This PR leaves the advanced setting `visualization:useLegacyTimeAxis`
in place but the setting will no longer be picked up in the UI and
charts with time axis will be rendered using the multi layer time axis.
[The removal of the advanced setting will be done in a follow
up](elastic#213780)
- Removes the `MULTILAYER_TIME_AXIS_STYLE` constant and related styling,
this is now covered by Elastic Charts itself.

Code that was previously using custom styles and settings to use the
multilayer time axis, now updated to use the multi layer time axis by
default now:

- vis_types/xy
- vis_types/timeseries
- chart_expressions/expression_xy
- lens/xy
- ML: Data visualizer components
- ML: AIOps document count histogram

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Risk of layout regressions because of removal of the legacy time axis.
This PR needs manual testing of the affected components.

### For Reviewers

If you are pinged, is probably do to the changes we are doing at the
timeseries chart level. These are visual changes that, without our
direct ping on code, can probably go unnoticed. So we kindle ask you to
pull the PR locally and verify if the timeseries charts within your
solutions/apps looks ok. Thanks

---------

Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
nickpeihl pushed a commit to nickpeihl/kibana that referenced this pull request Jun 12, 2025
…ic#220298)

## Summary

Resolves elastic#212242.

This resolves an accessibility failure in the `MetricItem` component
where Elastic Charts renders an svg with `role="img"` but no `alt`.

The svg renders an `aria-labelledby` attribute that is generated from
the supplied chart ID. This PR will create an ID for each chart and pass
it as a prop, and then reverse-engineer the expected ID to apply to the
wrapper div, which also contains a label that specifies some of the data
we are passing to `MetricItem`. This will allow screen reader users to
have an idea of the information displayed for a given `MetricItem` if
they choose to zero in on any of the charts on the page.

_NOTE:_ we cannot merge this until Kibana bumps its dependency of
Elastic Charts to
[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),
because I had to make an upstream contribution to fix a bug with the
generated `aria-labelledby` ID.

Needs to be tested once elastic#210579 is
merged.
justinkambic added a commit to justinkambic/kibana that referenced this pull request Jun 13, 2025
…ic#220298)

## Summary

Resolves elastic#212242.

This resolves an accessibility failure in the `MetricItem` component
where Elastic Charts renders an svg with `role="img"` but no `alt`.

The svg renders an `aria-labelledby` attribute that is generated from
the supplied chart ID. This PR will create an ID for each chart and pass
it as a prop, and then reverse-engineer the expected ID to apply to the
wrapper div, which also contains a label that specifies some of the data
we are passing to `MetricItem`. This will allow screen reader users to
have an idea of the information displayed for a given `MetricItem` if
they choose to zero in on any of the charts on the page.

_NOTE:_ we cannot merge this until Kibana bumps its dependency of
Elastic Charts to
[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),
because I had to make an upstream contribution to fix a bug with the
generated `aria-labelledby` ID.

Needs to be tested once elastic#210579 is
merged.

(cherry picked from commit 5f69154)

# Conflicts:
#	x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item.tsx
justinkambic added a commit that referenced this pull request Jun 20, 2025
…#220298) (#223925)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Synthetics] Receive `aria-labelledby` from Elastic Charts svg
(#220298)](#220298)

<!--- Backport version: 10.0.0 -->

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

<!--BACKPORT [{"author":{"name":"Justin
Kambic","email":"jk@elastic.co"},"sourceCommit":{"committedDate":"2025-06-09T20:44:03Z","message":"[Synthetics]
Receive `aria-labelledby` from Elastic Charts svg (#220298)\n\n##
Summary\n\nResolves #212242.\n\nThis resolves an accessibility failure
in the `MetricItem` component\nwhere Elastic Charts renders an svg with
`role=\"img\"` but no `alt`.\n\nThe svg renders an `aria-labelledby`
attribute that is generated from\nthe supplied chart ID. This PR will
create an ID for each chart and pass\nit as a prop, and then
reverse-engineer the expected ID to apply to the\nwrapper div, which
also contains a label that specifies some of the data\nwe are passing to
`MetricItem`. This will allow screen reader users to\nhave an idea of
the information displayed for a given `MetricItem` if\nthey choose to
zero in on any of the charts on the page.\n\n_NOTE:_ we cannot merge
this until Kibana bumps its dependency of\nElastic Charts
to\n[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),\nbecause
I had to make an upstream contribution to fix a bug with the\ngenerated
`aria-labelledby` ID.\n\nNeeds to be tested once
#210579
is\nmerged.","sha":"5f691543417198f6ece584fe7ad587d8608f41ae","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","backport
missing","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0"],"title":"[Synthetics]
Receive `aria-labelledby` from Elastic Charts
svg","number":220298,"url":"https://github.com/elastic/kibana/pull/220298","mergeCommit":{"message":"[Synthetics]
Receive `aria-labelledby` from Elastic Charts svg (#220298)\n\n##
Summary\n\nResolves #212242.\n\nThis resolves an accessibility failure
in the `MetricItem` component\nwhere Elastic Charts renders an svg with
`role=\"img\"` but no `alt`.\n\nThe svg renders an `aria-labelledby`
attribute that is generated from\nthe supplied chart ID. This PR will
create an ID for each chart and pass\nit as a prop, and then
reverse-engineer the expected ID to apply to the\nwrapper div, which
also contains a label that specifies some of the data\nwe are passing to
`MetricItem`. This will allow screen reader users to\nhave an idea of
the information displayed for a given `MetricItem` if\nthey choose to
zero in on any of the charts on the page.\n\n_NOTE:_ we cannot merge
this until Kibana bumps its dependency of\nElastic Charts
to\n[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),\nbecause
I had to make an upstream contribution to fix a bug with the\ngenerated
`aria-labelledby` ID.\n\nNeeds to be tested once
#210579
is\nmerged.","sha":"5f691543417198f6ece584fe7ad587d8608f41ae"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/220298","number":220298,"mergeCommit":{"message":"[Synthetics]
Receive `aria-labelledby` from Elastic Charts svg (#220298)\n\n##
Summary\n\nResolves #212242.\n\nThis resolves an accessibility failure
in the `MetricItem` component\nwhere Elastic Charts renders an svg with
`role=\"img\"` but no `alt`.\n\nThe svg renders an `aria-labelledby`
attribute that is generated from\nthe supplied chart ID. This PR will
create an ID for each chart and pass\nit as a prop, and then
reverse-engineer the expected ID to apply to the\nwrapper div, which
also contains a label that specifies some of the data\nwe are passing to
`MetricItem`. This will allow screen reader users to\nhave an idea of
the information displayed for a given `MetricItem` if\nthey choose to
zero in on any of the charts on the page.\n\n_NOTE:_ we cannot merge
this until Kibana bumps its dependency of\nElastic Charts
to\n[v70.0.1](https://github.com/elastic/elastic-charts/releases/tag/v70.0.1),\nbecause
I had to make an upstream contribution to fix a bug with the\ngenerated
`aria-labelledby` ID.\n\nNeeds to be tested once
#210579
is\nmerged.","sha":"5f691543417198f6ece584fe7ad587d8608f41ae"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
walterra added a commit that referenced this pull request Jun 23, 2025
## Summary

Follow up to #210579. Close #193683.

This PR removes the deprecated `visualization:useLegacyTimeAxis`
advanced setting and all related code. This setting was previously used
to enable legacy time axis behavior for charts in Lens, Discover,
Visualize and TSVB, but has been deprecated and is no longer needed. All
usage of the setting was already removed in #210579, this PR just cleans
up the advanced setting itself.

## Changes

- Removed the `visualization:useLegacyTimeAxis` UI setting registration
from the charts plugin
- Removed `LEGACY_TIME_AXIS` constant export from charts common module
- Cleaned up related TypeScript configuration dependencies
- Removed telemetry schema entries for the deprecated setting
- Removed translation strings for the deprecated setting
- Adds a saved object migration to remove the setting (see [advanced
settings
migrations](https://docs.elastic.dev/kibana-dev-docs/tutorials/advanced-settings#registering-migrations))

### Identify risks

- Identified that a saved object migration needs to be added for the
removal of the setting. See this
[PR](#157699) for reference.
- Advanced settings [can be
overridden](https://www.elastic.co/docs/extend/kibana/ui-settings-service#uisettings-overrides)
in `kibana.yml`. If the setting is present in `kibana.yml` and we remove
support for it, if verification of the file was too strict, it would
fail to start Kibana. I verified that Kibana still starts when support
for the advanced setting was removed but it's still present in
`kibana.yml`.

## Release note 

Removal of the deprecated `visualization:useLegacyTimeAxis` advanced
setting.
akowalska622 pushed a commit to akowalska622/kibana that referenced this pull request Jun 25, 2025
## Summary

Follow up to elastic#210579. Close elastic#193683.

This PR removes the deprecated `visualization:useLegacyTimeAxis`
advanced setting and all related code. This setting was previously used
to enable legacy time axis behavior for charts in Lens, Discover,
Visualize and TSVB, but has been deprecated and is no longer needed. All
usage of the setting was already removed in elastic#210579, this PR just cleans
up the advanced setting itself.

## Changes

- Removed the `visualization:useLegacyTimeAxis` UI setting registration
from the charts plugin
- Removed `LEGACY_TIME_AXIS` constant export from charts common module
- Cleaned up related TypeScript configuration dependencies
- Removed telemetry schema entries for the deprecated setting
- Removed translation strings for the deprecated setting
- Adds a saved object migration to remove the setting (see [advanced
settings
migrations](https://docs.elastic.dev/kibana-dev-docs/tutorials/advanced-settings#registering-migrations))

### Identify risks

- Identified that a saved object migration needs to be added for the
removal of the setting. See this
[PR](elastic#157699) for reference.
- Advanced settings [can be
overridden](https://www.elastic.co/docs/extend/kibana/ui-settings-service#uisettings-overrides)
in `kibana.yml`. If the setting is present in `kibana.yml` and we remove
support for it, if verification of the file was too strict, it would
fail to start Kibana. I verified that Kibana still starts when support
for the advanced setting was removed but it's still present in
`kibana.yml`.

## Release note 

Removal of the deprecated `visualization:useLegacyTimeAxis` advanced
setting.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels ci:project-deploy-observability Create an Observability project release_note:enhancement Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v8.19.0 v9.1.0