Ngx-charts: Add spline interpolation option for lines and areas

[marjan-georgiev]

Add an input property to line and area charts that specifies the interpolation algorithm used to generate the paths.

The available values would be 'linear', 'cardinal', and 'monotone'.

Example:
http://bl.ocks.org/mbostock/4342190

[marjan-georgiev]

Added an input called curve to the line and all area charts. The type is one of d3's curve functions:
https://github.com/d3/d3-shape#curves

[curve]="d3.shape.curveLinear"

[dtsanan]

hi,

can you please provide a working plunker for this?

i found myself struggling with implementing this curve.

thanks a lot.

[valentinbdv]

+1 don't understand exactly how to make it work?

I guess we have to put our own curve function or import the d3 library?

Thanks!

[olliechick]

See https://github.com/swimlane/ngx-graph/issues/50 for some pointers

[parthdevloper]

I have understood how it works 💯

to get Linear type, here is the solution :
component.html

<ngx-charts-polar-chart
  [view]="view]"
  [scheme]="colorScheme"
  [results]="_Data"
  [legend]="Legend"
  [xAxis]="XAxis"
  [curve]="linearCurve"
>
</ngx-charts-polar-chart>

component.ts

import * as shape from 'd3-shape';

  linearCurve= shape.curveLinearClosed;

and you will get linear curve.

Hope you find this solution helpful 👍

Here are different inbuilt functions :

>>reference<<