Ngx-charts: header style inside legend conflicts with the global header class

[jkjha]

Describe the bug
With VMware Clairty Design (https://vmware.github.io/clarity/), when I use any chart, its legend breaks styling and displays an ugly black box. This is probably because the header tag used in the legend conflicts with Clarity's global header tag.

Please see this stackblitz.: https://stackblitz.com/edit/clarity-eguqas?file=app/app.component.ts

To Reproduce
Steps to reproduce the behavior:

1. Use ngx chart in VMware clarity desing system with legend On.

Expected behavior
The black box legend should not be visible.
Screenshots
If applicable, add screenshots to help explain your problem.

Demo
Provide an online demo (stackblitz, codesandbox, or similar) where the issue can be reproduced
https://stackblitz.com/edit/clarity-eguqas?file=app/app.component.ts

ngx-charts version
"@swimlane/ngx-charts": "^12.0.1",

Please let me know if you need any more info.

[tofiqquadri]

One way to solve this issue is using ViewEncapsulation.Shadow in your component that uses ngx chart.

Note: If you use this then your application styles won't get applies to the components under shadow dom but this might be what you are looking for.

[tofiqquadri]

I figured out the Solution for this issue as I also have VM Ware clarity and Ngx Chart due to which the Ngx chart header inherits VMWare clarity header styles. To fix it follow these steps:

• Create an SCSS file in you application if you don't have it already and add it to your project's angular.json file.

• Now add following styles to you SCSS file:

.no-clarity-header {

  .chart-legend {

    .header,
    header {
      display: -webkit-box;
      display: inherit;
      color: inherit;
      height: inherit;
      white-space: nowrap;
    }

    header,
    header.header-1 {
      background-color: inherit;
    }
  }

}

• Once you add this styles to your SCSS file, just add the class name "no-clarity-header" as a wrapper above your ngx charts like this:

<div class="areachart-wrapper no-clarity-header">

    <ngx-charts-area-chart 
        [view]="view" 
        [scheme]="colorScheme" 
        [results]="data" 
        [gradient]="gradient" 
        [xAxis]="showXAxis"
        [yAxis]="showYAxis" 
        [legend]="showLegend" 
        [showXAxisLabel]="showXAxisLabel" 
        [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel" 
        [yAxisLabel]="yAxisLabel" 
        [autoScale]="autoScale" 
        [curve]="curve" 
        (select)="onSelect($event)">
    </ngx-charts-area-chart>

 </div>

This has worked perfectly fine for me. Here is the demo image:

[jkjha]

Great thanks @tofiqquadri , this seems to work well. However I will keep this bug open for swimline team to fix from there side as well.

[tofiqquadri]

It has been more than a year and the issue is still open @jkjha ngx-charts should fix this now and if the issue is resolved close it.

[mrqc]

The ugly thing here is, that I want to focus on my data analysis but instead I have to focus on workarounds for this library. ;(