Skip to content

fix: Show tooltips in all series when multiple series are set

Miguel Rincon requested to merge fix-multiple-series-finder into master

What does this MR do?

This MR ensures the tooltip is present when there are multiple series active.

Problem

The position of the tooltip was not calculated correctly when multiple axis were used.

The echarts convertToPixel function was called to find the tooltip data in the default grid, but this does not work when multiple coordinate systems are active.

Solution

The data can be found in the correct coordinate system by indicating which series should be searched.

I use a different finder, so as not to search on the default grid, and instead search by seriesId for the specific data.

https://www.echartsjs.com/en/api.html#echartsInstance.convertToPixel

Example

2 y axis, with different coordinate systems are setup by having separate sets of data:

yAxis: [
  {
    boundaryGap: [0.1, 0.1],
    scale: true,
    name: this.yAxisLabel,
    axisLabel: {
      formatter: num => roundOffFloat(num, 3).toString(),
    },
  },
  {
    name: __('Deployments'),
    type: 'time',
    show: false,
    min: 0,  // ------- DIFFERENT COORDINATE SYSTEMS
    max: 100, // ------ DIFFERENT COORDINATE SYSTEMS
    axisLabel: {
      formatter: num => roundOffFloat(num, 3).toString(),
    },
  },
],

Before

Tooltip is not place correctly because the position is only found for data in one series:

2020-02-12_10.13.49

After

Tooltip is available for both series, bacause position can be located

2020-02-12_10.14.42

Edited by 🤖 GitLab Bot 🤖

Merge request reports

Loading