Ngx-charts: Black chart on safari. Gradient dosnt work

[KamilKmitaLasoft]

[ x ] bug report
[ ] feature request
[ ] support request

On safari browser chart is black. All works fine , but color is black.
When i change [gradient]="true" to false is ok but without gradient 👎

  lineChartColorScheme = {
    domain: ['#C40536', '#6d6d6d']
  }

Angular 5.0.0
"d3": "^4.12.0",

[KamilKmitaLasoft]

some ideas ?

[oiricaud]

any solutions?

[oiricaud]

@KamilKmitaLasoft how did you resolve this?

[KamilKmitaLasoft]

i didnt :(

[lucabrasi83]

Same issue here

[GerardoLSJ]

This issue es because you have to pass the absolute route of the linearGradient in Safari

Back in version 3.1.0 they were using this approach :

https://github.com/swimlane/ngx-charts/blob/9b79199e909b0c4ea8959891fe63fa2835c2fb20/src/area-chart/area-chart.component.ts#L209

      let pageUrl = window.location.href;
      this.clipPathId = 'clip' + id().toString();
      this.clipPath = `url(${pageUrl}#${this.clipPathId})`;

But now i cant figure out how they're passing the "base ref" to the charts

Now theyre using a variable called : gradientUrl but cant figure out how they link the base ref there.

[splatyourbugs]

If anyone has a solution here that would be awesome. Love the gradient but the problem with it rendering on Safari and mobile is tough.

[jbaker-va]

Also looking for a fix here.

[splatyourbugs]

Agreed. A fix here would be most valuable.

[honzagula]

Following...

[eleon479]

This may potentially be the same issue as #1062 where the gradient works just fine unless the xaxis and yaxis properties are BOTH set to false. Setting either of them to true brings the gradient back but of course this isn't desired behavior. (Seems to be occurring on Chrome as well)

[bop10]

This happens on Safari, and iOS Devices.

[perotom]

Nobody found a workaround?

[oiricaud]

Nope lol

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Thomas [e-mail]
Sent: Thursday, June 13, 2019 12:05:32 PM
To: swimlane/ngx-charts
Cc: Ricaud, Oscar I; Comment
Subject: Re: [swimlane/ngx-charts] Black chart on safari. Gradient dosnt work (#672)

Nobody found a workaround?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fswimlane%2Fngx-charts%2Fissues%2F672%3Femail_source%3Dnotifications%26email_token%3DAC2RHMXSMSTD2KP4CJT4ZXDP2KD6ZA5CNFSM4EHU7S32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXUSAGY%23issuecomment-501817371&data=01%7C01%7Coiricaud%40miners.utep.edu%7C7f9e527774564df37f3a08d6f029ba4a%7C857c21d21a1643a490cfd57f3fab9d2f%7C1&sdata=d4leqzoRs0pGCwll8eVAOdomoqVebuKw%2Bx2IEtvBP1A%3D&reserved=0, or mute the threadhttps://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAC2RHMXEUQWAKKE3SKFWW3TP2KD6ZANCNFSM4EHU7S3Q&data=01%7C01%7Coiricaud%40miners.utep.edu%7C7f9e527774564df37f3a08d6f029ba4a%7C857c21d21a1643a490cfd57f3fab9d2f%7C1&sdata=gcpAdxVCP3Q6hQqEKqOZwPj8N9mWk5N8qjWJJEZBxzk%3D&reserved=0.

[koutsenko]

Lol... still no gradient.

[ngnkabylbai]

Any updates?

[TayyabKML]

Anybody found a way to solve this issue?

[Drake62610]

Hello this is my workaround for the problem, when i load my chart or change the data I just update gradient with a little delay :

@ViewChild(AreaChartComponent, { static: true }) chart: AreaChartComponent;

public ngAfterViewInit() {

        setTimeout(() => {
            this.chart.gradient = true;
            this.chart.update();
        }, 10);
    }

Hope this will solve your issue.

[Meghana1991]

Hi @Drake62610

Please share how did you get the reference of the Chart?

Thanks

[automagicxyz]

This issue es because you have to pass the absolute route of the linearGradient in Safari

Back in version 3.1.0 they were using this approach :

https://github.com/swimlane/ngx-charts/blob/9b79199e909b0c4ea8959891fe63fa2835c2fb20/src/area-chart/area-chart.component.ts#L209

      let pageUrl = window.location.href;
      this.clipPathId = 'clip' + id().toString();
      this.clipPath = `url(${pageUrl}#${this.clipPathId})`;

But now i cant figure out how they're passing the "base ref" to the charts

Now theyre using a variable called : gradientUrl but cant figure out how they link the base ref there.

This is the reason why gradient doesn't work in safari. Safari needs to take absolute path.
Workaround:

Option 1: Use HashLocationStrategy for angular route
RouterModule.forRoot(routes, { useHash: true }

Option 2: Keep using PathLocationStrategy but append current url to fill: url(#id) after view initialized

ngAfterViewInit() {
    this.updateGradient();
    // New path will be rendered on resize
    window.onresize = () => {
      this.updateGradient();
    }
  }

  updateGradient() {
    setTimeout(_ => {
      const areas = document.querySelectorAll('path.area');
      areas.forEach(area => {
        const fill = area.getAttribute('fill');
        const id = fill.match(/#.+/)[0];
        area.setAttribute('fill', `url(${window.location.href + id}`);
      });
    }, 200);
  }

[bobbyg603]

We have published a mirrored version ngx-charts that should fix this issue via @bugsplat/ngx-charts and opened PR #1637