Angular (ngx charts) pass optional input

Question

I am starting with Angula 8 and ngx-charts.

I want to display graphs from configuration files. To do that, I allow the configuration file to provide several graphics options (basicaly, almost all options from https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart )

and I have a basic component looking like this :

<ngx-charts-bar-vertical
    [results]="results"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    [view]="displayOptions.view"
    [scheme]="displayOptions.scheme"
    [schemeType]="displayOptions.schemeType"
    [customColors]="displayOptions.customColors"
    [animations]="displayOptions.animations"
    [legend]="displayOptions.legend"
    [legendPosition]="displayOptions.legendPosition"
    [gradient]="displayOptions.gradient"
    [tooltipDisabled]="displayOptions.tooltipDisabled"
    [xAxis]="displayOptions.xAxis"
    [yAxis]="displayOptions.yAxis"
    [showXAxisLabel]="displayOptions.showXAxisLabel"
    [showYAxisLabel]="displayOptions.showYAxisLabel"
    [showGridLines]="displayOptions.showGridLines"
    [xAxisTicks]="displayOptions.xAxisTicks"
    [yAxisTicks]="displayOptions.yAxisTicks"
    [showDataLabel]="displayOptions.showDataLabel"
    [barPadding]="displayOptions.barPadding"
    (select)="onSelect($event)"
>
</ngx-charts-bar-vertical>

My issue is that I want to use defaults values from ngx-charts if user does not provide options. But ngx-charts does not allow null input for some inputs. For example, if "displayOptions.scheme" is null, ngx-charts can't display the graph.

ERROR Error: Cannot read property 'scaleType' of undefined

https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts (juste have to remove the colorScheme object). Even if i provide a empty array for colorScheme.domain, it does not use default value.

In fact, I just want to do not pass any "scheme" Input to ngx-charts-bar-vertical component if there is no "displayOptions.scheme".

Is there a way to do this ? I didn't find any way to condition an use of input in Angular.

There are much better chart engines echarts.apache.org/examples/en/index.html. If you can't achieve what you want try echarts. — Seryoga

dufaux dufaux · Accepted Answer · 2020-01-24T13:46:38

What I gonna do is to copy default value of inputs, I will check source code on github. I don't know if there is a way to get default value of input dynamically.

In fact some default value are specific (scheme is an object but the default value is string) and that's why an empty/null value is not working as the default value.

    <ngx-charts-bar-vertical
    [results]="results"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    [scheme]="this.displayOptions.scheme ? this.displayOptions.scheme : 'cool'"
    [schemeType]="this.displayOptions.schemeType ? this.displayOptions.schemeType : 'ordinal'"
    [customColors]="displayOptions.customColors"
    [animations]="this.displayOptions.animations ? this.displayOptions.animations : true"
    [legend]="this.displayOptions.legend ? this.displayOptions.legend : false"
    [gradient]="displayOptions.gradient"
    [tooltipDisabled]="this.displayOptions.tooltipDisabled ? this.displayOptions.tooltipDisabled : false"
    [xAxis]="displayOptions.xAxis"
    [yAxis]="displayOptions.yAxis"
    [showXAxisLabel]="displayOptions.showXAxisLabel"
    [showYAxisLabel]="displayOptions.showYAxisLabel"
    [showGridLines]="this.displayOptions.showGridLines ? this.displayOptions.showGridLines : false"
    [xAxisTicks]="displayOptions.xAxisTicks"
    [yAxisTicks]="displayOptions.yAxisTicks"
    [showDataLabel]="this.displayOptions.showDataLabel ? this.displayOptions.showDataLabel : false"
    [barPadding]="this.displayOptions.barPadding ? this.displayOptions.barPadding : 8"
    (select)="onSelect($event)">
</ngx-charts-bar-vertical>

Angular (ngx charts) pass optional input

1 Answers