Adding tooltips to Volume Profile Indicator

Normally, Volume Profile Indicator (as any other indicator) would display its hover data in a legend. This demo shows how we can create a custom theme to make tooltips pop up when directly hovering indicator’s bars.

Code

TypeScript

const root = am5.Root.new("chartdiv");

const myTheme = am5.Theme.new(root);

myTheme.rule("Grid", ["scrollbar", "minor"]).setAll({
  visible :false
});

const tooltip = am5.Tooltip.new(root, {
  autoTextColor: false,
  getFillFromSprite: false
});

tooltip.get("background").setAll({
  fill: am5.color(0xffffff),
  stroke :am5.color(0x000000),
  strokeOpacity: 0.3
});

tooltip.label.setAll({
  fill: am5.color(0x000000),
  fontSize: "0.8em"
});

myTheme.rule("RoundedRectangle", ["series", "column", "volumeprofile"]).setAll({
  tooltip: tooltip,
  tooltipX: am5.p100,
  tooltipText: "[#2E78E3]down: {down.formatNumber('0.0a')}[/] [#E3B30C]up: {up.formatNumber('0.0a')}[/] total: {total.formatNumber('0.0a')}"
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

JavaScript

var root = am5.Root.new("chartdiv");

var myTheme = am5.Theme.new(root);

myTheme.rule("Grid", ["scrollbar", "minor"]).setAll({
  visible :false
});

var tooltip = am5.Tooltip.new(root, {
  autoTextColor: false,
  getFillFromSprite: false
});

tooltip.get("background").setAll({
  fill: am5.color(0xffffff),
  stroke :am5.color(0x000000),
  strokeOpacity: 0.3
});

tooltip.label.setAll({
  fill: am5.color(0x000000),
  fontSize: "0.8em"
});

myTheme.rule("RoundedRectangle", ["series", "column", "volumeprofile"]).setAll({
  tooltip: tooltip,
  tooltipX: am5.p100,
  tooltipText: "[#2E78E3]down: {down.formatNumber('0.0a')}[/] [#E3B30C]up: {up.formatNumber('0.0a')}[/] total: {total.formatNumber('0.0a')}"
});

root.setThemes([
  am5themes_Animated.new(root),
  myTheme
]);

Example

Open in CodePen