Ngx-charts: combo-chart error - Can't bind to 'xScale' since it isn't a known property of ':svg:g'

Created on 11 Jul 2017 · 11Comments · Source: swimlane/ngx-charts

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

Current behavior

importing combo-chart demo into my @angular/cli project
Expected behavior

browser console logs error:
_Can't bind to 'xScale' since it isn't a known property of ':svg:g'._

Reproduction of the problem

What is the motivation / use case for changing the behavior?

seems like something is missing in the setup instructions for @swimlane/ngx-charts

Please tell us about your environment:

OSX, ATOM, chrome Version 59.0.3071.115

ngx-charts version: x.x.x

@swimlane/ngx-charts v 6.0.0
Angular version: 2.x.x

@angular/cli 1.2.0
@angular/core 4.0.0

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

chrome, safari, firefox
Language: [all | TypeScript X.X | ES6/7 | ES5]
typescript 2.2.0, es5

Source

grimace

👍1

Most helpful comment

I finally got it to work, after hours of playing with it. Eventually by copying one thing after another from the demo project until I was able to get rid of the errors. The difficulty, IMHO, arises from the complexity of the demo and, from a novice's perspective, not knowing what fields or components are fundamentally required by a particular component. I had a similar, follow on experience with the bubble-chart, where after several hours found the right combination of things to get it to display.

The whole purpose of my exercise was to display shapes (pointers, squares, circles) on top of a multi-line graph, where the shapes coincide with X-Axis coordinates. From what I've read, the best approach is to build my own ( similar to combo-chart ) and modify that accordingly, by combining the line-chart with the bubble-chart and modifying the bubble chart to display things besides circles...

I would like to turn this into a feature request of: 'having simple demos' of the individual components that spell out exactly what things are required for a particular component.

I love the demo, but my head hurts trying to extract the things I need. That being said, thx for the great work!

grimace on 12 Jul 2017

👍11

All 11 comments

How are you importing the component? Are you declaring it in your module?

marjan-georgiev on 12 Jul 2017

I would like to turn this into a feature request of: 'having simple demos' of the individual components that spell out exactly what things are required for a particular component.

I love the demo, but my head hurts trying to extract the things I need. That being said, thx for the great work!

grimace on 12 Jul 2017

👍11

Great! Yeah, we need more documentation on the individual components along with examples. Pull requests in that direction are welcome.

I'm going to close this one because the original issue has been resolved.

marjan-georgiev on 12 Jul 2017

@grimace What did you have to do to get this working? I'm running into the same error.

jvincilione on 3 Oct 2017

@grimace Can you please provider the example, I want line and bubble combined chart.

praveen-uppula on 31 Oct 2017

Since at least 4 of us have run into this, I thought I'd post the solution. When you are creating the components in your own project, make sure you create both: ComboChartComponent and ComboSeriesVerticalComponent. I wrongly assumed the ComboSeriesVerticalComponent was something I didn't need (thinking it was just a different version of the same thing).