Line chart colors are not rendering when the chart is inside a module other than the app module

[pachabelle]

In the .ts file, my colors are defined as:

public chartColors: Color[] = [ { // blueberry backgroundColor: '#cdd9e6', borderColor: '#064180', pointBackgroundColor: '#064180', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: '#cdd9e6' }, ... ]

In the .html file: <canvas baseChart width="800" height="400" [datasets]="lineChartData" [labels]="lineChartLabels" [colors]="chartColors" [legend]="false" chartType="line">

Using the exact same code in the main application module the colors are rendering fine, however, when inside a module that is lazy loaded, the colors are not rendering - the line chart chart colors are all grey. Is there an extra step that I am missing to get this to work correctly in a module other than the app module?

[GitHubish]

I have the same problem in the polarChart, everything is grey. Has anyone found a solution? By adding an *ngIf it works sometimes but never when the page first loads by doing F5

[0x4a61636f62]

I am experiencing a similar issue with nested components where my chart will not appear when NgModule is imported into the app module. Only if I import it into the same module as the component will it appear.

[santam85]

Chart.js does not behave consistently if rendering to an invisible canvas. Be sure to call refresh or using responsive: true when navigating to lazy loaded routes. Good information about this should be added to the docs.