Adding tooltips to Volume Profile Indicator

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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

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
]);

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

See the Pen
Stock Chart with Volume Profile by amCharts team (@amcharts)
on CodePen.0