Ngx-charts: Update/Add Curve Documentation

[cole21771]

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
In the documentation for line-chart (and probably all other charts that support changing curves), it says that you can change the curve with the curve by providing it with other d3 curves. It links to a list of these curves, but nowhere does it actually list the curves that you can input or how you would input them. After a lot of searching, I found the list of supported curves, but this doesn't help either as inputting the label's name's doesn't seem to work.

Expected behavior
I expect to be told how to actually use the curve directive so that I can use it if I would like.

Reproduction of the problem

1. Check the documentation
2. Pretend you had no previous knowledge of how ngx-charts works
3. Attempt to change the curve type.

What is the motivation / use case for changing the behavior?
New users will be able to use the library to its fullest by knowing how to use it's features.

Please tell us about your environment:
N/A

• ngx-charts version:
  Probably 7.something?

• Angular version: 4.x.x

• Browser: [all]

• Language: [all]

[marjan-georgiev]

Hi there!

The curve input accepts a function. You can pass it any d3 curve function, or any other function compatible with them.

The list you found in the demo code is not a list of supported functions, but a demo of several d3 curve functions.

Here's the plunkr updated with a curve defined on the chart:
https://plnkr.co/edit/qJG072EtCUvLP4Ebdchi?p=preview

[cole21771]

That is great to know, however, I think it would be helpful to give more instruction on how to do this by either linking to a plunker or to another md file explaining how to use it.

[opahopa]

just a word here - i've spent whole day trying to figure out a solution to change a curve to curveBasis. tried installing d3-shape, d3 itself, etc, got through all the docs. working if i make a purely d3 chart and didn't figure out a solution to use it with ngx-charts -> switched to ng2-charts. At least properly documented.

[samdeniyi]

@marjan-georgiev that doesnt work in Angular5
I got the error below
error TS7016: Could not find a declaration file for module 'd3-shape'. 'C:/path/node_modules/d3-shape/dist/d3-shape.js' implicitly has an 'any' type. Try `npm install @types/d3-shape` if it exists or add a new declaration (.d.ts) file containing `declare module 'd3-shape';

[kevinkicho]

@samdeniyi doing this helped me resolve the issue.

npm install -g typings
typings install d3

[MichaelJFordham]

For anyone searching (like I was), here's what you need to do:

In the terminal run: npm install @types/d3-shape (typings is now depreciated)

In the component, import: import * as shape from 'd3-shape';

Then declare a variable like: curve = shape.curveCardinal.tension(0);

And finally in the ngx-chart component inputs, use this:

<ngx-charts-line-chart
            ...(other inputs)...
            [curve]="curve"
></ngx-charts-line-chart>

There are more curve functions here if you don't want .curveCardinal.tension(0).