Chart Tooltip is transparent in safari

[Patrick]

Hello,

for a project we're using the Syncfusion's grid's and chart's to display data. When we click on a item on the Grid we fetch new data for the charts and call refresh to display the new data. Right now we are having an issue with Safari where the tooltip of the chart is having by default a transparent background and we don't know why this is happening.

The Html file looks like this:

<div class='d-flex justify-content-center align-items-center' [style.height.vh]='height'>

  <app-loading-indicator [ngClass]="isLoading == 0 ? 'd-flex' : 'd-none'"></app-loading-indicator>

  <ejs-chart #chart [primaryXAxis]="primaryXAxis" [titleStyle]="titleStyle" [title]="title" [legendSettings]="legendSettings"

    [palettes]="palette" (loaded)=loaded($event); [tooltip]='tooltip' style="height: 100%; width: 100%;">

  </ejs-chart>

</div>

and the code behind is:

export class ChartSfComponent implements AfterViewInit, OnInit {

  @Input()

  public chartInput: Subject<RealChartItem>;

  @Input()

  public isChartLoading: Subject<LoadingHelper>;

  @Input()

  public height: number;

  @Input()

  public isCustomLegend: boolean;

  @Input()

  public tooltipFormat: Object;

  @Input()

  public labelRotate: string;

  @Input()

  public clearChart: Subject<string>;

  public isLoading: LoadingHelper = 0;

  public realChartItem: RealChartItem = new RealChartItem();

  //Chart variables

  @ViewChild("chart")

  public chart: Chart;

  public primaryXAxis: Object;

  public titleStyle: Object;

  public legendSettings: Object;

  public title: string;

  public palette: string[];

  private width: number;

  private numOfChars: number;

  public tooltip: Object;

  //Constructor

  constructor() {}

  ngOnInit(): void {

    this.titleStyle = {

      textAlignment: "Near",

      textOverflow: "Wrap"

    };

    this.primaryXAxis = {

      valueType: "Category",

      interval: 1,

      majorGridLines: { width: 0 },

      labelIntersectAction: this.labelRotate

    };

    this.tooltip = {

      enable: true,

     /* template:

        "<div class='d-flex-column bg-transparent text-white border border-secondary' style='width:8rem; height: 4rem;'><h6 class='d-flex justify-content-center align-items-center no-padding'>${point.tooltip}</h6><div class='d-flex justify-content-center align-items-center'><hr class='no-padding' style='width: 75%; height:1px; background-color:white;'></hr></div><h6 class='d-flex justify-content-center align-items-center no-padding'>${y}</h6><div style='position: absolute; top:0; left:0; right:0; bottom:0; background-color:black; opacity: 0.75; z-index:-1;'></div></div>" */

    };

    if (this.isCustomLegend)

      if (this.chart != undefined)

        this.chart.resized.subscribe(data => {

          this.legendSettings = {

            visible: true,

            position: "Custom",

            location: {

              x: data.currentSize.width - this.numOfChars * 10.5,

              y: 15

            }

          };

        });

    if (isNullOrUndefined(this.isCustomLegend)) this.isCustomLegend = true;

    this.updateChart();

  }

  updateChart() {

    if (

      isNullOrUndefined(this.chart) ||

      isNullOrUndefined(this.realChartItem) ||

      isNullOrUndefined(this.realChartItem.itemSource)

    ) {

      return;

    }

    this.title = this.realChartItem.legend;

    this.palette = this.realChartItem.pallete;

    if (this.chart != undefined) {

      this.chart.series = [];

      let series = [];

      this.numOfChars = 0;

      this.realChartItem.itemSource.forEach(item => {

        let model = {

          dataSource: item.chartItems,

          xName: "month",

          yName: "value",

          type: ChartStyle[item.style],

          legendShape: "Circle",

          name: item.title,

          tooltipMappingName: item.title

        };

        this.numOfChars +=

          item.title.length * 14 + 40 / this.realChartItem.itemSource.length;

        series.push(model);

      });

      if (this.isCustomLegend)

        this.legendSettings = {

          visible: true,

          position: "Custom",

          location: {

            x: this.width - this.numOfChars,

            y: 15

          }

        };

      setTimeout(() => {

        this.chart.series = series;

        this.chart.refresh();

      }, 250);

    }

  }

  loaded(event) {

    this.width = event.chart.availableSize.width;

  }

  ngAfterViewInit(): void {

    this.chartInput.subscribe(chartItem => {

      this.realChartItem = chartItem;

      this.updateChart();

    });

    this.isChartLoading.subscribe(state => {

      this.isLoading = state;

    });

    this.clearChart.subscribe(clear => {

      this.chart.series = new Array();

      this.chart.refresh();

    });

  }

}

We have one chart component for different charts which we set dynamically in updatechart. When new data comes the chartInput calls updateChart() which changes the model of the chartcomponent. In the attachment is a zip with screenshots of the tooltip.

I already tried the example of customizing the tooltip, which was not having any effect and my last attempt was to create a custom tooltip template but since only the x and y values can be used it is not really viable for our solution. The funny part is when we load a basic chart example like https://ej2.syncfusion.com/angular/demos/#/material/chart/column in our solution the tooltip appears normally. One thing i'd like also to mention is, that in a page there are normally two chart components both having the #chart from the chart component.

  this.tooltip = {
                enable: true,
                format: '${series.name} ${point.x} : ${point.y}',
                fill: '#7bb4eb',
                border: {
                   width: 2,
                   color: 'grey'
                }
        };

Attachment: IN71_9ab1d5e5.zip

[Dharanidharan Dharmasivam]

Hi Patrick, 

 

Greetings from Syncfusion. 

 

We have analyzed the reported scenario. We have created sample in which based on the filtered data from grid we have displayed the chart. And the reported issue is not replicated at our end with safari browser. Sample used for testing can be found from below link. 

https://stackblitz.com/edit/angular-w9koav-iwehcm?file=line.component.ts  

 

Screenshot: 

 

 

We have ensured with the below safari version. 

 

 

Since we are not aware on the exact scenario in which the issue is reproduced, kindly revert us with the following information. This will be much helpful in further analysis and provide you the solution sooner. 

 

·       Try to reproduce the reported issue with the attached sample 

·       Or provide your sample with replication steps. 

·       Do you have used <base rel='nofollow' href=”./”> tag in your application? 

·       Browser version details. 

Note: In the provided sample, initially we have loaded empty chart and kindly change the data in grid using paging, so that based on the filtered data chart will be rendered. 

 

Thanks, 

Dharani. 

[Patrick]

Hey, 

we were able to narrow down the error a bit. Right now the charts appear after login in with Okta Authorization. Before the login the tooltip appears normally, after the login and redirect the tooltip becomes transparent. Could it be that something like the style gets unloaded while redirecting ?

[Dharanidharan Dharmasivam]

Hi Patrick, 

 

We would like to let you know that, we haven’t used any styles for chart, we have provided support through APIs, so styles might not get unloaded. Also, is it possible to provide the hosted link with temporary credentials with replication steps, so that we can check the reported issue at our end and provide you the solution sooner. 

 

Thanks, 

Dharani.