search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.3k stars 1.15k forks source link

Gradient option in line charts has no effect #1224

Open qortex opened 5 years ago

qortex commented 5 years ago

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 commented 5 years ago

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

image

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

qortex commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

Thanks, I used the area chart instead.

qortex commented 5 years ago

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 commented 5 years ago

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.