Search code examples
javascriptamcharts4

Tooltips at right of the columns of an amcharts4 horizontal barchart


I have an amcharts 4 horizontal bar chart as in this fiddle. I want to have the tooltips at the right of the columns, with the tooltip pointer touching the extremity of the column.

I have tried

tooltip.adapter.add("dx", (x, target) => {
  return valueAxis.valueToPoint(target.dataItem.valueX).x;
})

but that does not provide the wanted result. I have also tried to play with horizontalCenter, rotation, but unsuccessfully.


Solution

  • I have found the solution.

        tooltip.dx = 0;
        tooltip.rotation = 180;
        tooltip.label.verticalCenter = "bottom";
        tooltip.label.rotation = 180;
    
        columnTemplate.adapter.add("tooltipX", (x, target) => {
          if (target.dataItem.valueX > 0) {
            return valueAxis.valueToPoint(target.dataItem.valueX + minValue).x;
          } else {
            return 0;
          }
        });
    

    If the value is negative, then the tooltip is at the left of the column. This is also what I wanted.

    Fiddle: jsfiddle.