Ngx-charts: Gradient option in line charts has no effect

[qortex]

Describe the bug

When using the gradient option, nothing changes in the Line Charts.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart
2. Click on "Options / Use Gradients"
3. No change appears on the chart

Expected behavior

I would expect gradients to be always enabled (same effect as hovering one of the line charts).

ngx-charts version
Last at least.

Additional context

Maybe the gradients option does not have this meaning?

[AmirSavand]

I want the chart to have this gradient background always enabled like this:

But I can't get this working, I think it's related to this issue.

[qortex]

Yes, definitely.
https://github.com/swimlane/ngx-charts/blob/master/src/line-chart/line-series.component.ts has the facilities for gradients, but it seems that https://github.com/swimlane/ngx-charts/blob/master/src/line-chart/line-chart.component.ts never actually uses it.

It does not look too complicated to work a PR out, but it would certainly be easier for someone with familiarity with the codebase :)

[marjan-georgiev]

@AmirSavand you can use the area chart if you want the area under the line visible at all times.

The gradient option in line charts has no effect (as pointed out correctly by @MicMicMon) and should be removed.

[qortex]

Ah ok, got it. The proper way is to use Area chart with the gradient option.

I tried and it works, thanks. Is there a canonical way to customize the way gradients are computed? I find them too dark, and would like to use lower opacity values. Is there an easy way to achieve that?

I looked around and I fear values are hardcoded in https://github.com/swimlane/ngx-charts/blob/master/src/common/color.helper.ts :(

[AmirSavand]

Thanks, I used the area chart instead.

[qortex]

Opened a feature request for the gradient customization as it seems it is not readily available: https://github.com/swimlane/ngx-charts/issues/1234

[qortex]

Actually found how to always enable gradient under the line-chart in this issue I overlooked initially: https://github.com/swimlane/ngx-charts/issues/1103

Kind of hacky, but does the trick.