CSS not applied to C3.js chart in Angular 2 app

Question

I have implemented a C3.js chart in an Angular 2 application but the style in the C3.css file is not being applied to it. I know it is loading (I event copied it all into my component's scss file) but still doesnt work. Is it because the chart loads after css? Does anyone know how to solve this?

I get the data for the chart asynchronously in ngOnInit so I am thinking that the css is applied before the chart is drawn (which happens when the data is received). I am also thinking that it could be something with Angular throwing off the selectors.

ngOnInit() {
    // draw pie chart
    this.bitcoinService.getMapData()
        .subscribe(data => {
            var pieChartData = this.formatPieChartData(data);
            this.pieChartInit(pieChartData);  // call this.pieChartInit
        })
}


pieChartInit(data) {
  var chart = c3.generate({
      data: {
          columns: data, // example: [['data1', 30], ['data2', 120]]
          type: 'pie'
      }
});

I copied the C3 css right into my scss which is included like this which works for everything else in my component:

@Component({
  moduleId: module.id,
  selector: 'bitcoin-dashboard',
  styles: [require('./bitcoin-dashboard.component.scss')],
  template: require('./bitcoin-dashboard.component.html')
})

Also, when I d3.select an element of the chart after pieChartInit is called, the styling works. Example:

d3.selectAll('.c3-chart-arc path').style('stroke', 'white')

Any help is greatly appreciated!

@georgej see my detailed answer here: http://stackoverflow.com/a/42189051/704894 — Michał Miszczyszyn, Feb 12 '17 at 14:54

score -1 · Answer 1 · answered Feb 01 '17 at 05:34

-1

It does not matter when the CSS loads. Once it is loaded it is applied. Chances are CSS namespacing is at work and preventing the browser to match classes from the C3 css. Inspect the dom and classes in Chrome after everything is loaded.

answered Feb 01 '17 at 05:34

Ketan

5,861
3
32
39

score -1 · Answer 2 · edited May 23 '17 at 12:32

-1

HTML added by non-Angular code doesn't add the style encapsulation attributes and therefore styles are not applied. You can use the /deep/ (and the alias >>> which doesn't work with SASS though) to work around:

:host /deep/ .c3-chart-arc path {
  stroke: white;
}

CSS not applied to C3.js chart in Angular 2 app

2 Answers2