We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart Tooltip is transparent in safari

Thread ID:

Created:

Updated:

Platform:

Replies:

141890 Jan 9,2019 03:47 PM UTC Jan 17,2019 10:26 AM UTC Angular - EJ 2 3
loading
Tags: Chart
Patrick
Asked On January 9, 2019 03:47 PM UTC

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 [Syncfusion]
Replied On January 10, 2019 11:22 AM UTC

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. 
 
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
Replied On January 15, 2019 09:48 AM UTC

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 [Syncfusion]
Replied On January 17, 2019 10:26 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;