javascriptamcharts5

Hide tooltip when value is zero on amcharts5

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

Solution

  • 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.