CODEWITHSUNDEEP
javascriptamcharts4
Stéphane Laurent
Stéphane Laurent

Reputation: 84679

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.

Upvotes: 1

Views: 357

Answers (1)

Stéphane Laurent
Stéphane Laurent

Reputation: 84679

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.

Upvotes: 1

Related Questions