Axis formatter should default to global Axis

[nickofthyme]

When using multiple y-axes and a single global x-axis. Each of the supplied series will use their respective y-axis per groupId and share the x-axis as a fallback.

However, the tick formatter for the x-axis is not associated to the global x-axis, and leaves the tooltip header values unformatted even though the series is using the global x-axis as a default.

Screenshot

Notice the x-axis time has ticks formatted given the tickFormat on the AxisSpec. However, the header value is not formatted.

Solution

The code below, chooses the x or y axis based on rotation or uses the explicit tooltipHeaderFormatter

elastic-charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts

Lines 180 to 185 in a79e899

	if (!header) {
	// if we have a tooltipHeaderFormatter, then don't pass in the xAxis as the user will define a formatter
	const xAxisFormatSpec = [0, 180].includes(chartRotation) ? xAxis : yAxis;
	const formatterAxis = tooltipHeaderFormatter ? undefined : xAxisFormatSpec;
	header = formatTooltip(indexedGeometry, spec, true, false, hasSingleSeries, formatterAxis);
	}

However, given this configuration the xAxis will always be undefined as getAxesSpecForSpecId will only associate axis to their groudId.

elastic-charts/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.ts

Line 144 in a79e899

const { xAxis, yAxis } = getAxesSpecForSpecId(axesSpecs, spec.groupId);

Currently, this is fixed by supplying the tooltipHeaderFormatter to the tooltip but this seems unnecessary.

I think the fix, in this case, is to change getAxesSpecForSpecId to return global spec as a fallback possibly optionally based on an argument.

Note: The global tooltipHeaderFormatter should always override any axis formatter.

[nickofthyme]

A temporary workaround would be to use the headerFormatter on the Tooltip spec.

<Tooltip
  headerFormatter={(pointerValue) =>
    timeFormatter('DD-MM-YYYY hh:mm A')(pointerValue.value)
  }
/>