Does the formatter support inserting components

[zChanges]

Expected behaviour

formatter supports inserting components (dropdown ui components)

Actual behaviour

Live demo with steps to reproduce

https://stackblitz.com/edit/angular-ivy-lgbfxr?file=src%2Fapp%2Fchart%2Fchart.component.ts

Product version

Affected browser(s)

[mateuszkornecki]

@zChanges Hello,

Unfortunately for now `highcharts-angular` doesn't support such behavior. The only thing that could be returned there is a number, string, or string containing a valid HTML element. The reason for that is that under the hood we are using our custom-made `SVGRenderer` to render chart elements. It can manipulate the DOM but just can't handle any custom component.

For the future for general tech support, please contact us through one of the support channels see www.highcharts.com/support.

[mateuszkornecki]

@zChanges

I thought about it for a while and it seems that I was wrong. You can achieve such behavior using Angular CDK portals.

Live demo: https://stackblitz.com/edit/highcharts-angular-portal-usage?file=src/app/app.component.ts

References: https://material.angular.io/cdk/portal/overview

[mateuszkornecki]

Closing since the issue is resolved.

The demo of the portal's usage will be added in the upcoming wrapper release.

[Haribalajiravi]

Hi @mateuszkornecki above solution you have provided is fine. but using setTimeout is not a good approach, also its breaking tooltip width. Remove these from above stackblitz link:

      backgroundColor: null,
      borderWidth: 0,

For the first time if we hover, the default tooltip container looks shrank because, its taking the empty div containers width and height.

Any way to solve these kind of issues?

[karolkolodziej]

Those two properties (backgroundColor and borderWidth) were added to prevent such a thing.

Could you please explain what are you trying to achieve, preferably by recreating that in the demo?

[Haribalajiravi]

If you can open up this link Forked Stackblitz

When you hover, we can notice the shortest content have some extra height... Why so? how could we get rid of those?

Happening because as per my understanding.... Firstly empty div htmlString getting return from formatter() method So at that time, formatter calculating . After a while(setTimeout) content get initiated... but still it has previously calculated height.

Even though we set (backgroundColor and borderWidth) still the height is flaky. How could we fix that thing?

Note: If you can't open up that link: replace the below content on files on the above stackblizt example that you have shared.

app.component.ts

  addTooltipPortal() {
    this.tooltipPortalOutlet = new DomPortalOutlet(
      document.querySelector('#tooltipHost'),
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );
    document.querySelector('#tooltipHost').innerHTML = '';
    const comp = this.tooltipPortal.attach(this.tooltipPortalOutlet);
    // sample flow to show when there is different sized tooltip content
    comp.instance.data1 = this.randBool;
    this.randBool = !this.randBool;
    comp.changeDetectorRef.detectChanges();
  }

tooltip.component.html

<div *ngIf="!data1">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy
</div>

<div *ngIf="data1">
  t is a long established fact that a reader will be distracted by the readable
  content of a page when looking at its layout. The point of using Lorem Ipsum
  is that it has a more-or-less normal distribution of letters, as opposed to
  using 'Content here, content here', making it look like readable English. Many
  desktop publishing packages and web page editors now use Lorem Ipsum as their
  default model text, and a search for 'lorem ipsum' will uncover many web sites
  still in their infancy. Various versions have evolved over the years,
  sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

tooltip.component.ts

// declare this in tooltip class
 data1 = true;

[karolkolodziej]

I see two posible solutions for this:

1. If the div container for the tooltip is created earlier (before formatter), it works correctly. I presume this might be treated as a potential workaround. Demo: https://stackblitz.com/edit/highcharts-angular-portal-usage-pviute

2. The second workaround might be to force the tooltip to render when the chart is created. Then you can hide it instantly. Demo: https://stackblitz.com/edit/highcharts-angular-portal-usage-nb44m2

[karolkolodziej]

Closing due to inactivity.