1

Trying to hide all the tooltips of an XY area chart when the value is 0.

Have found a solution for amcharts4, but this is not possible for amcharts5. The labelText key of the tooltip is a string and no function.

Solution for amcharts4: https://www.amcharts.com/docs/v4/tutorials/do-not-show-tooltip-for-zero-value-columns/

function createSeries(field: string) {
 const series = chart.series.push(
        LineSeries.new(root, {
          name,
          xAxis,
          yAxis,
          valueXField: 'timestamp',
          valueYField: field,
          categoryXField: 'timestamp',
          legendValueText: '{valueY}',
          tooltip: Tooltip.new(root, {
            pointerOrientation: 'horizontal',
            labelText: // --> this needs to be a string
              '[bold]{name}[/]\n{timestamp.formatDate()}: {field} {valueY}',
          }),
        })
      );
}

for (const key of data.keys) {
  createSeries(key);
}

DEMO

CodeSandBox

enter image description here

Tomas Vancoillie
  • 3,463
  • 2
  • 29
  • 45
  • Did you try not sending zero-value via `createSeries` ? Just I think what happens if you pass your values to `createSeries ` fn without zero ? – Batuhan Oct 11 '22 at 09:48
  • Good suggestion but can't exclude an entire data set because one value is 0. We could have something like this. [{ timestamp: 1, value: 20 }, { timestamp: 2, value: 0 }, { timestamp: 3, value: 40 }]. So not excluding the whole series for one 0 value. – Tomas Vancoillie Oct 11 '22 at 11:03
  • OK got it. Can you reproduce your issue on a playground ? This might be helpful for others. – Batuhan Oct 11 '22 at 11:20
  • Added sandbox to the question – Tomas Vancoillie Oct 11 '22 at 12:09

2 Answers2

1

You can also do this with amCharts 5 using an adapter.

The following code should be inside your createSeries() function, right after the series constant declaration and initialization:

series.get("tooltip").adapters.add("visible", (visible, target) => {
  return target.dataItem?.dataContext[field] > 0;
});

Adapters are custom functions that can be used to dynamically alter value of an element's setting.

Adapters – amCharts 5 Documentation

So here we put an adapter on the series tooltip to alter its visibility. If target.dataItem exists, then we can test the value stored in dataContext for the given key. If this value is strictly positive, the Boolean expression is evaluated as true, which means that the tooltip will be visible. Otherwise, the Boolean expression is evaluated as false and the tooltip will be hidden.

Badacadabra
  • 8,043
  • 7
  • 28
  • 49
0

I had the same issue today and the code below did the trick in my case:

series.get( "tooltip" )?.adapters.add( "visible", ( visible, target ) => {
    const field: any = target.dataItem?.component?._settings;
    const target2: any = target.dataItem?.dataContext;
    if ( field?.valueYField && target2 ) {
        return target2[ field.valueYField ] > 0;
    }
    return visible;
} );

As explained in the previous answer, we use an adapter for the series tooltip in order to alter the visibility of the tooltip for the columns in the stack where the value is zero.

For that, we first get the name of the key associated with each column, this key is stored in target.dataItem.component._settings.valueYField.

If this key exists, we then check if the value of this key for the targeted data object stored in target.dataItem.dataContext is above zero, in this case the tooltip will be visible, otherwise it will be hidden.

If the key doesn't exist or if the targeted data object cannot be found, we return the default value of the visibility state for the tooltip.

gasp.ounet
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 07 '23 at 10:56