I am using a couple of charts in a single view, each chart being its own component. I have a LineChartComponent and a XRangeChartComponent. I am using a styles file with XRangeChartComponent and overriding some classes. But the styles are not getting applied in the chart.
After inspection, I found out that the styles file was modified by angular to append a class to conform to the shadow DOM. So, I used encapsulation: ViewEncapsulation.None in XRangeChartComponent. Now the styles are also getting applied for LineChartComponent.
How do I proceed?
The demo I am attaching has 2 line charts but it reproduces my issue.
In order for template elements to make use of component styles with view encapsulation, they should be created by Angular compiler. These elements are created by third-party library that accesses DOM directly and thus cannot be styled this way.
In order to be used with default ViewEncapsulation, styles should use shadow-piercing combinator:
:host ::ng-deep .highcharts-series-0 .highcharts-point {
fill: #ff0000;
stroke: #0000ff;
}