When the data's changed for the line Chart, the gradient background on hover stay in opaque gray

[beubzz]

• [x ] bug report - search github for a similar issue or PR before submitting
• feature request
• support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
When the data's changed, the gradient background on hover stay in opaque gray (very dirty).
The linearGradient doesn't persist with the good color and gradient when the data's changed ...

Expected behavior
When the data's changed, i would like a gradient background with the good color like i declare on colorScheme.

Reproduction of the problem
When the data's changed, the linearGradient Id will be undefined but why ?

On init it's be perfect (on the over, i got a good gradient with good color) :

But when i change the data's, i have a bad gradient and color on the hover :

/!\ IT'S FOR A LINE-CHART /!\

Please tell us about your environment:
Windows10 - VisualCode (on local)

• ngx-charts version:
  @swimlane/ngx-charts: "10.1.0"

• Browser:
  Chrome

• Angular version:
  Angular 7.1.3

• Language:
  TypeScript : 3.1.6

the HTML declaration :
<ngx-charts-line-chart
[view]="view"
[showGridLines]="true"
[roundDomains]="true"
[scheme]="colorScheme"
[results]="selectedData"
[gradient]="true"
[xAxis]="true"
[yAxis]="true"
[autoScale]="true"
[timeline]="false"
[legend]="true"
[legendPosition]="'right'"
[showXAxisLabel]="false"
[showYAxisLabel]="false">

The ts declaration :
public view: any[] = [1000, 300];
public colorScheme = {
domain: ['#5AA454', '#A10A28']
};

On my ngOnInit :
// init the chart data
this.selectedData = new Array(this.data[0]);

when my input change, I fire this function :
public onChange(event) {
this.selectedData = new Array(this.data[this.data.findIndex(elem => elem.id === event.id)]);
}

My data's structure be like :
let data = [ { id: '15', name: 'Ligne 15', series: [ { name: '06h', value: 5 }, { name: '07h', value: 9 }, { name: '08h', value: 15 }, { name: '09h', value: 22 }, { name: '10h', value: 25 }, { name: '11h', value: 27 }, { name: '12h', value: 22 }, { name: '13h', value: 21 }, { name: '14h', value: 25 }, { name: '15h', value: 27 }, { name: '16h', value: 28 }, { name: '17h', value: 28 }, { name: '18h', value: 35 }, { name: '19h', value: 22 }, { name: '20h', value: 14 }, { name: '21h', value: 11 }, { name: '22h', value: 3 }, ] }, { id: '11', name: 'Ligne 11', series: [ { name: '06h', value: 2 }, { name: '07h', value: 5 }, { name: '08h', value: 8 }, { name: '09h', value: 12 }, { name: '10h', value: 15 }, { name: '11h', value: 15 }, { name: '12h', value: 12 }, { name: '13h', value: 12 }, { name: '14h', value: 17 }, { name: '15h', value: 17 }, { name: '16h', value: 19 }, { name: '17h', value: 22 }, { name: '18h', value: 22 }, { name: '19h', value: 15 }, { name: '20h', value: 11 }, { name: '21h', value: 3 }, { name: '22h', value: 0 }, ] } ];

Everythings works very well without the gradient color on the hover (on a point or on the legend it's the same opaque dirty gray ...)

[marjan-georgiev]

Could you create a stackblitz where this can be reproduced?

[xjose97x]

I can confirm this issue persists.

[Seguix]

Can someone solve this? The same thing happens to me.

[ron2702]

Hi everyone, I have the same issue.

[rickymohk]

Same issue in 2021

[bobbyg603]

@marjan-georgiev I have created a stackblitz that demonstrates this issue. To reproduce the bug, just hover over the topmost line once it appears. We tried to fix this locally but was unable to get npm link @swimlane/ngx-charts to work in our Angular 12 project. Any guidance you can give us would be greatly appreciated!

[bobbyg603]

@Seguix @xjose97x @ron2702 @rickymohk we've fixed this bug and have published @bugsplat/ngx-charts to npm. additionally, we opened #1631 in hopes of getting this fix merged with the official repo.

[bobbyg603]

Upon further inspection, the fix we proposed actually fills the line with a solid color (and breaks the gradient functionality).

[bobbyg603]

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