AmCharts 4 tooltip negtive and positive color of single LineSeries

Question

https://www.amcharts.com/demos/date-based-line-chart/

In above have a LineSeries Chart with positive and negative values with different line colors but tooltip have only negative value color.

Can this possible to have positive line have different color of tooltip and negtive have another tooltip color?

Answer 1

Yes, it's totally possible.

Firstly, to adjust the background color of a tooltip, you'll need to kill its default behavior of grabbing color information from the calling object (in this case it gets the fill from the series). That's done via:

series.tooltip.getFillFromObject = false;

Then to adjust the background:

series.tooltip.background.fill = // color here

To switch its background color based on the value it's showing, one way we can do that is use an adapter for the series' tooltipText, because when that triggers we know the tooltip is being shown and/or changing. In there we can detect the current dataItem being sourced, check the value, and adjust the tooltip's background fill accordingly.

Sample code:

series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = "blue";
series.adapter.add("tooltipText", function(tooltipText) {
  if (series.tooltipDataItem.dataContext.visits < 0) {
    series.tooltip.background.fill = "red";
  } else {
    series.tooltip.background.fill = "blue";
  }
  return tooltipText;
});

Demo:

https://codepen.io/team/amcharts/pen/913514e19a189c8779e07ffcae861ce3