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

[ahyos]

This is the same issue as https://github.com/swimlane/ngx-charts/issues/476

but the autor or anyone provided the solution.

Basically I tried to reproduce the demo in my app, because its hard to understand.

[liuhaoXD]

Just import NgxChartsModule by doing this

@NgModule({
  imports: 
    ...
    NgxChartsModule,
    ...
  ],
   ...
})

A typical customized chart is like this:

  <svg:g [attr.transform]="transform" class="line-chart chart">
    <svg:g ngx-charts-x-axis
           *ngIf="xAxis"
           [xScale]="xScale"
           [dims]="dims">
    </svg:g>
  </svg>

Angular will failed to parse ngx-charts-x-axis if you didn't import NgxChartsModule.

Attribute g[ngx-charts-x-axis] is defined here and exported by AxesModule
and the AxesModule will be exported by ChartCommonModule
and the ChartCommonModule will be exported by NgxChartsModule

[vascofernandes]

I also get this problem with Ivy at version 9.0.0-next.3.

https://github.com/angular/angular/issues/30512

This is reproducible:

https://stackblitz.com/edit/vertical-bar-chart-box89u

1- Just download the project to your machine
2 - npm install
3 - ng serve
4 - See the browser console

[tmk1991]

It's definitely an IVY problem. 8.2.2 and 8.2.6 has the same issue. Turn off IVY and it works.

[bobbyg603]

Thanks @tmk1991 we were able to get around this for now by setting enableIvy to false under angularCompilerOptions in the tsconfig.app.json file.

[vascofernandes]

The issue is still present in Angular 9.0.0-next.9 with Ivy enabled

[marjan-georgiev]

This should be fixed in 13.0.0.

[mikegoodstadt]

Was this fixed in 13.0.0 ?

[mikegoodstadt]

Working on a legacy app - I tried unsuccessfully with IVY false :(
Any other suggestions? ( even if it means a fork of 12.1.0 )
Thanks!

[mikegoodstadt]

A temporary fix could be a fork where all directives are rewritten using the old AngularJS notation "ng-attr-*" e.g. ng-attr-[view]="{{view}}" ? This could be a version 12.1.1 for those who need it!

[ChandlerBaskins]

Running into these issues as well. Angular version 10.1. But in my case its more than just xScale. Any workaround?

[SonicReal]

Running into these issues as well. Angular version 10.1. But in my case its more than just xScale. Any workaround?

@ChandlerBaskins Try to use inline template instead of templateUrl. Helped me