[Bug] [Angular] "Missing CSS styles for Carbon Charts.."-error after rerendering

I am submitting a…

• Design defect or
• Source code defect not sure.

charts version:

@carbon/charts: 0.41.41 @carbon/charts-angular: 0.41.41

if relevant: Angular: ^10.0.0 carbon-components: ^10.30.0 carbon-components-angular: ^4.41.0"

Issue description

We use carbon charts for a statistic dashboard where we load the full dashboard information on startup as a JSON from our API and build the components based on that JSON (rows, cols, charts). When the dashboard is initially loading, everything works fine.

But we have simple functionality to refresh the dashboard, where the hole dashboard is loaded again from our API and the dashboard property of our main component is then updated with the new value. In Angular 8, everything worked fine and everything got rerendered correctly, but since updating to Angular 10 when the dashboard is rerendered due to the change of the main components property, the charts are broken and we get the “Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.”-error.

Did something change in the rerendering behavior of angular from 8 to 10 or carbon-charts after a property changes?

I tried a lot to fix this issue, even trying to add the checked CSS-properties to the <g>-Tag in the svg (I know i shouldn’t) which produces the missing-styles-error. But I can’t figure out where things go wrong.

Any idea or help would be much appreciated!

Steps to produce the issue

short version of the current code, don`t know what else I could share:

(Main Component) dashboard-shell.html

<div ibmGrid>
  <app-block-row-view
	ibmRow
	*ngFor="let blockRow of dashboard.rows; index as currentBlockRowIdx"
	[blockRow]=blockRow
	[currentBlockRowIdx]=currentBlockRowIdx
	[parentDashboardComponent]=this>
  </app-block-row-view>
</div>

dashboard-shell.ts

export class DashboardShellComponent implements OnInit, AfterViewInit {
  @Input() dashboard: Dashboard;

  ...

  loadDashboard(): void {
    // http-request to our API to get JSON converted to Dashboard-Type
    this.dashboard = response.json;
  }

---

app-block-row-view.html

<app-block-view ibmCol [columnNumbers]="{'sm': block.smallGridColumns, 'md': block.mediumGridColumns, 'lg': block.largeGridColumns}"
	*ngFor="let block of blockRow.blocks; index as currentBlockIdx"
	[ngStyle]="{
		'padding-bottom': '16px',
		'padding-top': '16px'
	}"
	[block]=block
	[currentBlockIdx]=currentBlockIdx>
</app-block-view>

(nothing interesting in .ts)

---

app-block-view.html

<app-diagram-view
	*ngFor="let diagram of block.charts; index as currentDiagramIdx"
	[ngStyle]="{}"
	[diagram]=diagram
	[currentDiagramIdx]=currentDiagramIdx
	[parentBlock]=block>
</app-diagram-view>

(nothing interesting in .ts)

---

app-diagram-view.html

<ibm-tile>
  <div id="diagram-{{ this.diagram.$hash }}"></div>
</ibm-tile>

app-diagram-view-ts

export class DiagramViewComponent implements OnInit, AfterViewInit {
  @Input() diagram: Diagram;
  private chart: any;

  ...

  ngAfterViewInit() {
    ...
    const chartHolder = document.getElementById(
      `diagram-${this.diagram.$hash}`
    );

   // ommited the other charts
   switch (this.diagram.type) {
      case DiagramType.Line: // Custom Enum
        this.chart = new LineChart(chartHolder, {
          data: this.diagram.data,
          options: this.diagram.options,
        });
        
        break;
        ...
    }

Current behavior

On rerendering the charts, we get the “Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide.” error.

Expected behavior

All charts should be rerendered without an error after the main property is changed

[code-asylum]

I’m sorry that I wasn’t responsive for so long. With the latest carbon-charts(-angular) Version and litte changes to the refresh logic we managed to solve this bug and charts are getting refreshed/repainted properly.

Thanks very much!

[number-00]

Hi, Is there any way to disable the validator? I am also facing same issue intermittently in react. I have also tried manually adding the min css file, but the error still comes and the complete page goes blank.