Ngx-charts: Error: Cannot read property 'getColor' of undefined - Stacked Area Chart

[ImanCocquyt]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

I'm trying to display a Stacked Area Chart

<ngx-charts-bar-horizontal-stacked
   [view]="[400, 300]"
   [results]="results"
   [xAxis]="true"
   [yAxis]="true"
   [legend]="true"
   [legendPosition]="'below'"
   [scheme]="colorScheme"
   [xAxisLabel]="'Date'"
   [yAxisLabel]="'Number'"
   [showXAxisLabel]="true"
   [showYAxisLabel]="true">
</ngx-charts-bar-horizontal-stacked>

_Current behavior_

In browser logs:

ERROR TypeError: Cannot read property 'getColor' of undefined
    at Object.eval [as updateDirectives] (AreaSeriesComponent.html:6)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkAndUpdateView (core.js:38376)
    at callViewAction (core.js:38742)
    at execComponentViewsAction (core.js:38670)
    at checkAndUpdateView (core.js:38383)
    at callViewAction (core.js:38742)
    at execEmbeddedViewsAction (core.js:38699)
    at checkAndUpdateView (core.js:38377)
    at callViewAction (core.js:38742)

_Expected behavior_

Display the Stacked Area Chart in browser.

Please tell us about your environment:

• macOS Mojave: version 10.14.6
• Google Chrome: version 77.0.3865.90 (Official Build) (64-bit)
• @swimlane/ngx-charts: ^12.0.1
• Angular: 8.1.3

[ImanCocquyt]

Error for _Normalized and Stacked Vertical Bar Chart_:

ERROR TypeError: this.xScale is not a function
    at BarVerticalNormalizedComponent.push.../../node_modules/@swimlane/ngx-charts/release/esm.js.BarVerticalNormalizedComponent.groupTransform (esm.js:8276)
    at Object.eval [as updateRenderer] (BarVerticalNormalizedComponent.html:44)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)
    at checkAndUpdateView (core.js:38382)
    at callViewAction (core.js:38742)
    at execEmbeddedViewsAction (core.js:38699)
    at checkAndUpdateView (core.js:38377)
    at callViewAction (core.js:38742)
    at execComponentViewsAction (core.js:38670)
    at checkAndUpdateView (core.js:38383)

[ImanCocquyt]

Error for _Normalized and Stacked Horizontal Bar Chart_:

ERROR TypeError: this.yScale is not a function
    at BarHorizontalNormalizedComponent.push.../../node_modules/@swimlane/ngx-charts/release/esm.js.BarHorizontalNormalizedComponent.groupTransform (esm.js:6873)
    at Object.eval [as updateRenderer] (BarHorizontalNormalizedComponent.html:44)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)
    at checkAndUpdateView (core.js:38382)
    at callViewAction (core.js:38742)
    at execEmbeddedViewsAction (core.js:38699)
    at checkAndUpdateView (core.js:38377)
    at callViewAction (core.js:38742)
    at execComponentViewsAction (core.js:38670)
    at checkAndUpdateView (core.js:38383)

[mister-10k]

Same error on the line chart: TypeError: Cannot read property 'getColor' of undefined.

[KingDarBoja]

@ImanCocquyt @mister-10k Looks like a bug on the library, but can't tell why at the moment. I do think it is being triggered for some unproper colorScheme data being passed as Input.

Can you provide some stackblitz to chedck what is going on?

[aacebo]

This issue can also be reproduced when passing SingleSeries data into a chart that only takes MultiSeries

[Airblader]

We're seeing this as well using ngx-charts-line-chart and ngx-charts in version 11.2.0. The issue only appears in a production build, not in a dev build.

[Airblader]

The problem seems to be in ngx-charts-line-series (used by ngx-charts-line-chart) which instantiates ngx-charts-area and tries to call colors.getColor:

[fill]="hasGradient ? gradientUrl : colors.getColor(data.name)"

I haven't yet figured out what has changed since this used to work for us.

[Airblader]

I believe this may be related to #1288. It appears the downgrade mentioned there fixes our issue.

[oliveirabc]

We're also using the ngx-charts-line-chart and we're getting the same error although not using the "d3-time-format" specified at #1288.
We have tested it with both ngx-charts v10.1.0 and v12.0.1 and both have the same problem.
We on angular v7.2.10

[AScarberry]

@oliveirabc check for "d3-time-format" as a sub-dependency of "d3" in your package-lock.json file.

[oliveirabc]

Thanks @AScarberry, you’re right. Downgrading the d3 worked for us.

[cunderwood-va]

See also https://github.com/swimlane/ngx-charts/issues/1291; if updating @angular-devkit/build-angular fixes it, that's probably the better outcome rather than pinning a library.

[pantonis]

Can anyone who resolved the issue post their packages.json here please?

[shral]

Got the error when I put in [scheme]="colorScheme" for colorScheme the whole array instead of choosing one of the objects from the colorSets.
Causing error:

 colorSchema = [
   {
     domain:["#bf9d76", "#e99450", "#d89f59"]
   }, 
    {
     domain:["#a8385d", "#7aa3e5", "#a27ea8"]
   }
 ]

Causing NO error:

colorScheme = {
        domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
    };

[chasebaker21]

I was able to fix this issue by adding the scheme type and setting it to ordinal.

Seems to act like the default value of 'ordinal' isn't working.

in html
<ngx-charts-bar-horizontal-2d [view]="view" [scheme]="colorScheme" [schemeType]="schemeType" [results]="initalSourcesData" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [legendPosition]="legendPosition" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel"> </ngx-charts-bar-horizontal-2d>

in ts
schemeType: string = "ordinal"

Hope that helps someone