diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js
index 0b8b4be67b7a..3e5e335a9ea3 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.js
@@ -61,6 +61,7 @@ class TimeseriesPanelConfigUi extends Component {
axis_min: '',
legend_position: 'right',
show_grid: 1,
+ tooltip_mode: 'show_all',
};
const model = { ...defaults, ...this.props.model };
const { selectedTab } = this.state;
@@ -85,6 +86,22 @@ class TimeseriesPanelConfigUi extends Component {
value: 'left',
},
];
+ const tooltipModeOptions = [
+ {
+ label: intl.formatMessage({
+ id: 'visTypeTimeseries.timeseries.tooltipOptions.showAll',
+ defaultMessage: 'Show all values',
+ }),
+ value: 'show_all',
+ },
+ {
+ label: intl.formatMessage({
+ id: 'visTypeTimeseries.timeseries.tooltipOptions.showFocused',
+ defaultMessage: 'Show focused values',
+ }),
+ value: 'show_focused',
+ },
+ ];
const selectedPositionOption = positionOptions.find((option) => {
return model.axis_position === option.value;
});
@@ -134,6 +151,10 @@ class TimeseriesPanelConfigUi extends Component {
return model.legend_position === option.value;
});
+ const selectedTooltipMode = tooltipModeOptions.find((option) => {
+ return model.tooltip_mode === option.value;
+ });
+
let view;
if (selectedTab === 'data') {
view = (
@@ -356,6 +377,24 @@ class TimeseriesPanelConfigUi extends Component {
+
+
+
+
+
+
+
+
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
index b4c563f3c11f..ddfaf3c1428d 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -250,6 +250,7 @@ export class TimeseriesVisualization extends Component {
showGrid={Boolean(model.show_grid)}
legend={Boolean(model.show_legend)}
legendPosition={model.legend_position}
+ tooltipMode={model.tooltip_mode}
xAxisLabel={getAxisLabelString(interval)}
xAxisFormatter={this.xAxisFormatter(interval)}
annotations={this.prepareAnnotations()}
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
index 274b46bce271..c53482b5db07 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -61,6 +61,7 @@ export const TimeSeries = ({
showGrid,
legend,
legendPosition,
+ tooltipMode,
xAxisLabel,
series,
yAxis,
@@ -131,7 +132,7 @@ export const TimeSeries = ({
baseTheme={theme}
tooltip={{
snap: true,
- type: TooltipType.VerticalCursor,
+ type: tooltipMode === 'show_focused' ? TooltipType.Follow : TooltipType.VerticalCursor,
headerFormatter: tooltipFormatter,
}}
/>
diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts
index 2b0734ceb4d4..c06f94efb3c4 100644
--- a/src/plugins/vis_type_timeseries/public/metrics_type.ts
+++ b/src/plugins/vis_type_timeseries/public/metrics_type.ts
@@ -69,6 +69,7 @@ export const metricsVisDefinition = {
axis_scale: 'normal',
show_legend: 1,
show_grid: 1,
+ tooltip_mode: 'show_all',
},
component: VisEditor,
},
diff --git a/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts b/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts
index e8838f57ae36..bf2ea8651c5a 100644
--- a/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts
+++ b/src/plugins/vis_type_timeseries/server/routes/post_vis_schema.ts
@@ -247,6 +247,9 @@ export const visPayloadSchema = schema.object({
series: schema.arrayOf(seriesItems),
show_grid: numberIntegerRequired,
show_legend: numberIntegerRequired,
+ tooltip_mode: schema.maybe(
+ schema.oneOf([schema.literal('show_all'), schema.literal('show_focused')])
+ ),
time_field: stringOptionalNullable,
time_range_mode: stringOptionalNullable,
type: stringRequired,