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"
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.
[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
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.