Search code examples
javascripttypescriptamchartsamcharts4

Wrap Long Text in AmCharts 4 Bullet Tooltip

How do I wrap text in a Bullet Tooltip? The code below produces a very large tooltip box that goes off the screen when I have a comment field that can contain many characters (500+).

const xyBullet = xySeries.bullets.push(new am4charts.CircleBullet());
xyBullet.tooltipText = '[bold]Comments[/]: {Comments}';

In AmCharts 3, I used BalloonText and set maxWidth on the balloon. In order to try to replicate this approach in AmCharts 4, I tried using:

xyBullet.tooltip.maxWidth = 300;

But that did not work.

Solution

  • You can set the label object from the series like this:

    xySeries.tooltip.label.wrap = true;

// optional
xySeries.tooltip.label.width = 300;

    Demo: https://jsfiddle.net/davidliang2008/5av8whb0/76/

    Related issue: https://github.com/amcharts/amcharts4/issues/1308