Adaptively changing tooltip orientation based on column value

XY#adapters#series#tooltip#xy

This demo shows how we can use an adapter to change the orientation of a ColumnSeries tooltip based on the column value.

Related code

The following code will change value of tooltip’s pointerOrientation to either point down or up based on whether target column’s value is above or below zero.

TypeScript

series.get("tooltip").adapters.add("pointerOrientation", function(orientation, target) {
  return target.dataItem && target.dataItem.get("valueY") < 0 ? "up": orientation;
});

JavaScript

series.get("tooltip").adapters.add("pointerOrientation", function(orientation, target) {
  return target.dataItem && target.dataItem.get("valueY") < 0 ? "up": orientation;
});

Demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Adaptive tooltip orientation based on valueadaptive-tooltip-orientation-based-on-value