Feature Request: A way to add shadow to charts

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior Currently, there’s no way to add shadow to charts.

Expected behavior A component that creates shadow to charts and add shadows attribute in the usage chart template.

Please let me know if this looks fine to you. I’ll create a PR for this.

Please tell us about your environment:

• OS - MAC
• IDE - Code
• NPM
• Node

• ngx-charts version: x.x.x 5.0.0

• Angular version: 2.x.x 4.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Hypercubed]

@richavyas The filter definition doesn’t need to be in the same SVG. One way we could do it is to add a ngx-charts-svg-shadow component, like you have suggested, then use classes for each chart to apply shadow.

For the user it could look like this:

<ngx-charts-svg-shadow
</ngx-charts-svg-shadow>
<!-- defines the shadow globally for the page, only needed once -->

<ngx-charts-bar-horizontal
  class="svg-shadow-filter" ... >
</ngx-charts-bar-horizontal>

The ngx-charts-svg-shadow component and CSS class will have to be defined in ngx-charts. I foresee some issue with IDs, since they need to be unique. If you add any attributes to ngx-charts-svg-shadow-filter how do you ensure the CSS references to the correct url(#id)?

An alternative, and perhaps the most flexible, allowing users to define their own filters. This could look something like:

<svg>
  <defs>
    <filter id="someUniqueId" #myShadowFilter ... />
       ...
    </filter>
  </defs>
</svg>

<ngx-charts-bar-vertical
  [barFilter]="myShadowFilter" ... > <!-- references the filter by template reference or id -->
</ngx-charts-bar-vertical>

Might be interesting to explore creating declarative components for SVG filter definitions in ngx-charts to hide some of the complexity and ensure unique IDs. Perhaps looking like this:

<ngx-charts-svg-shadow
  #myShadowFilter
  [color]="color"
  [dx]="dx"
  [dy]="dy" ...>
</ngx-charts-svg-shadow>

<ngx-charts-bar-vertical
  [barFilterRef]="myShadowFilter" ... >
</ngx-charts-bar-vertical>

This is all suggestions. Any thoughts?

[Hypercubed]

Hi @richavyas , this can be done using a SVG filter definition and css. I’m not sure about the browser compatibility. Here is an example in plnkr:

https://plnkr.co/edit/isOUub?p=preview