Ngx-charts: Provide documentation for curve implementation

Created on 30 Jan 2020  路  4Comments  路  Source: swimlane/ngx-charts

Is your feature request related to a problem? Please describe.
I've been unable to successfully implement curveBasis (or any other d3 curve function) with the curve input for ngx-charts-line-chart. There is a real lack of documentation for proper use. When trying to import d3 or d3-shape, I get typescript errors like this:

/node_modules/@types/d3-shape/index"' has no exported member 'curveBasis'.

Describe the solution you'd like
Documentation for implementing a curve function (i.e: how to import d3 or d3-shape to get various curve options.)... or at least some support on this issue. There is already a ticket open for this but has not had a resolution.,, the plunkr is also out of date.

Update/Add Curve Documentation #720

Additional context
Software Package Versions:

@angular/animations: 8.2.11
@angular/cdk: 8.2.3
@angular/common: 8.2.11
@angular/compiler: 8.2.11
@angular/core: 8.2.11
@angular/flex-layout: 8.0.0-beta.26
@angular/forms: 8.2.11
@angular/material: 8.2.3"
@angular/platform-browser: 8.2.11
@angular/platform-browser-dynamic: 8.2.11
@angular/router: 8.2.11
@swimlane/ngx-charts: 13.0.2
@types/d3-shape: 1.3.2"
New Feature

Most helpful comment

instead of importing as
import * as shape from 'd3-shape';

I tried
import {curveBasis} from 'd3-shape';

and then defined my curve var as
curve: any = curveBasis;

Previously examples have shown to use shape.curveBasis. Found a solution after looking at usage in ngx-charts source code. :) Probably should still have some documentation on how to use this... or updating any demos.

All 4 comments

instead of importing as
import * as shape from 'd3-shape';

I tried
import {curveBasis} from 'd3-shape';

and then defined my curve var as
curve: any = curveBasis;

Previously examples have shown to use shape.curveBasis. Found a solution after looking at usage in ngx-charts source code. :) Probably should still have some documentation on how to use this... or updating any demos.

@shinkhouse you a legend! Really appreciate it. Saved me a lot of effort.

@shinkhouse Thank you so much !!!!!!! Although i changed curveBasis to curveMonotoneX so that the curve will still fit the points.

[view]="view"
[scheme]="colorScheme"
[legend]="legend"
[curve]="curve"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxis]="xAxis"
[yAxis]="yAxis"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[timeline]="timeline"
[results]="multi_data"
(select)="onSelect($event)"
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)">

TS:-
import { BrowserModule } from "@angular/platform-browser";
import { NgxChartsModule } from "@swimlane/ngx-charts";
import { curveLinear } from 'd3-shape';

curve: any = curveLinear;

Is it the correct way of importing customized curves in ngx-charts? Shape is not reflecting. Could anyone please help me?
I appreciate it in advance

Was this page helpful?
0 / 5 - 0 ratings

Related issues

stephanrauh picture stephanrauh  路  4Comments

ianfdk picture ianfdk  路  3Comments

Jacquers picture Jacquers  路  3Comments

amcdnl picture amcdnl  路  4Comments

DZDomi picture DZDomi  路  4Comments