Dynamic chart crosshair and tooltip not visible

[Aruna]

Hi,

I have a implementation of dynamic chart in the app.popup-dialog.component.ts within the createChartComponents() method:

    const chartComponent = new ChartComponent(

      this.ngEle,

      this.renderer,

      this.viewContainerRef,

      this.injector

    );

I have configured the crosshair and tooltip as follows:

    chartComponent.crosshair = {

      enable: true,

      lineType: 'Vertical',

    };

    chartComponent.tooltip = {

      enable: true,

      shared: true,

      header: '${point.x}',

      format: '${series.name} : <b>${point.y}</b>',

      fadeOutDuration: 80,

      enableAnimation: false,

      enableMarker: true,

      showNearestPoint: false,

      border: {

        color: 'blue',

      },

      opacity: 0.6,

    };

However, crosshair and tooltip are not visible.

I'm seeking assistance to make the crosshair and tooltip work in the following sample:

https://stackblitz.com/edit/github-c4skq5?file=src%2Fapp.component.ts

Thanks,

Aruna

[Swetha Babu]

Hi Aruna,

Greeting from Syncfusion.

We have considered the reported scenario as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on 2^nd July, 2024. Please find the below feedback link to keep track of the reported scenario.

Feedback link: https://www.syncfusion.com/feedback/58836/tooltip-and-crosshair-is-not-displayed-in-charts

If you have any more specifications/precise replication procedure to be followed, please add it as a comment in the portal.

Regards,

Swetha

[Swetha Babu]

Hi Aruna,

Sorry for the delay.

When we checked the provided sample, we noticed that you have rendered the chart using the Javascript and you have created a div. So, the reported scenario occurs. To resolve this scenario, we suggest using the angular component to render the chart based on your requirement where the tooltip will be displayed properly. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/angular-vf3kuz-t1zzsh?file=src%2Fapp.component.ts

Code Snippet:

public tooltip: Object = {

    enable: true,

      shared: true,

      header: '${point.x}',

      format: '${series.name} : <b>${point.y}</b>',

      fadeOutDuration: 80,

      enableAnimation: false,

      enableMarker: true,

      showNearestPoint: false,

      border: {

        color: 'blue',

      },

Screenshot:

Kindly revert us if you have any concerns.