Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 (<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 (<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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

carmielecommented, Oct 12, 2020

@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).

mgangelovcommented, Oct 8, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Time series line chart is not sync with axis - Stack Overflow
The problem is that the chart is not in sync with the axis. Both the chart and the axis is translating by the...
Read more >
D3 v3 time-series line chart - gists · GitHub
D3 timeseries chart. the D3 chart currently displayed on metacat UI; issue: the line and area shapes interpolate across missing data; features:.
Read more >
Line Chart - How to Show Data on Mouseover using D3.js
This article will help you explore the following core concepts of D3: How to add an axis label to a chart using D3.js?...
Read more >
Line chart with zoom in d3.js - The D3 Graph Gallery
This post describes how to build a line chart with zooming option in d3.js. Brushing is used to select the zone to zoom...
Read more >
Line chart | nivo
Line chart with stacking ability. Given an array of data series having an id and a nested array of points (with x, y...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found