Overriding series’ tooltip fill color

Normally, a Tooltip that is displayed when you hover or touch a series' item - slice, column, etc. - is colored the same way as the related object. This quick tutorial will show you how to override that color.

To turn off "inheritance" of color from related object, we can set getFillFromObject = false for the series items template's tooltip.

Since that will leave us with transparent backgrounds, which we probably don't want, we'll need to set the background for the tooltip's background.

Here's how it would look for a Pie series slice:

pieSeries.tooltip.getFillFromObject = false;
pieSeries.tooltip.background.fill = am4core.color("#CEB1BE");

pieSeries.tooltip.getFillFromObject = false;
pieSeries.tooltip.background.fill = am4core.color("#CEB1BE");

{
  "series": [{
    // ...
    "tooltip": {
      "getFillFromObject": false,
      "background": {
        "fill": "#CEB1BE"
      }
    }
  }]
}

And here's how it looks like on a live chart (try hovering slices):

See the Pen amCharts 4: Overriding series' tooltip colors by amCharts (@amcharts) on CodePen.24419