[LineChart] Error with axis d3 transitions in time-series based line chart

I am submitting a…

• Feature request
• Design defect
• Source code defect
• Demo/documentation defect
• Other

charts version: 0.32.3

Issue description

Steps to produce the issue

I am trying to render the example line chart with time series. The the linear series works fine, but I get an error thrown when the chart is trying to render the axes. Current dependences:

"@carbon/charts": "^0.32.3",
"@carbon/charts-angular": "^0.32.3",
"d3": "~5.14.2",

I also have a devDependency "@types/d3": "^4.13.2" that I’m not sure about. Does this need to be updated as well, and if so what to what version?

Current behavior

I get the following error when trying to render the line chart in the eventlisteners for the d3 Transitions:

HomepageComponent.html:49 ERROR Error: unknown type: cancel
    at dispatch.js:19
    at Array.map (<anonymous>)
    at parseTypenames (dispatch.js:16)
    at Dispatch.on (dispatch.js:28)
    at HTMLHtmlElement.<anonymous> (on.js:20)
    at Transition.each (each.js:5)
    at Transition.on (on.js:31)
    at Transitions.push../node_modules/@carbon/charts/services/essentials/transitions.js.Transitions.getTransition (transitions.js:43)
    at Axis.push../node_modules/@carbon/charts/components/axes/axis.js.Axis.render (axis.js:235)
    at two-dimensional-axes.js:79

I am also getting another weird error with the Transitions, where the app is not recognizing the end() function:

ERROR TypeError: transition.end is not a function
    at chart.js:72
    at Array.map (<anonymous>)
    at LineChart.push../node_modules/@carbon/charts/chart.js.Chart.update (chart.js:70)
    at LineChart.push../node_modules/@carbon/charts/chart.js.Chart.init (chart.js:46)
    at new LineChart (line.js:29)
    at LineChartComponent.ngAfterViewInit (carbon-charts-angular.js:340)
    at callProviderLifecycles (core.js:32328)
    at callElementProvidersLifecycles (core.js:32293)
    at callLifecycleHooksChildrenFirst (core.js:32275)
    at checkAndUpdateView (core.js:44281)

Expected behavior

The chart should render fine without issues.

Screenshot or recording

[carmiele]

@mgangelov we were using ngx-charts previously, which conflicted with carbon-charts since this also depended on d3 (but a newer version than the one carbon charts supports).

[mgangelov]

Hi @carmiele, I’m encountering the same issue. By a conflicting charts library did you mean a different version of carbon-charts-react, or a completely different chart library? I have aligned the multiple d3 versions that we have in our product, however I still am not able to resolve the error.