Modifying the inner CSS of ngx-charts

问题

When I spun up the ngx-charts Advanced Pie Chart example, my legend's numbers get cut off. Digging into the CSS, this seems to be because of a margin-top being set to -6px:

After experimenting in the browser, I've found that 10px makes things look as I'd like. So in the component's CSS, I added:

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

However, this doesn't affect the CSS of the legend items at all. I've tried variations on !important, ::ng-deep and more, but nothing I do seems to affect that CSS.

How can I modify the CSS of the legend-item so that it will have the proper margin?

Below is my full component to reproduce the screenshot:

pietest.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pietest',
  templateUrl: './pietest.component.html',
  styleUrls: ['./pietest.component.css']
})
export class PietestComponent {

  view: any[] = [1000, 500];

  single: any[] = [
    {
      "name": "Germany",
      "value": 8940000
    },
    {
      "name": "USA",
      "value": 5000000
    },
    {
      "name": "France",
      "value": 7200000
    },
      {
      "name": "UK",
      "value": 6200000
    }
  ];

  // options
  gradient: boolean = true;
  showLegend: boolean = true;
  showLabels: boolean = true;
  isDoughnut: boolean = false;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() { }
}

pietest.component.html

<ngx-charts-advanced-pie-chart
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  >
</ngx-charts-advanced-pie-chart>

pietest.component.css

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

回答1:

This problem doesn't occur in "@swimlane/ngx-charts": "^9.0.0". However if you want to change the style in your version to solve this, use the below code in your pietest.component.scss.

/deep/ .advanced-pie-legend /deep/ .legend-items-container /deep/ .legend-items /deep/ 
.legend-item /deep/ .item-value {
    margin-top: 10px !important;
}

Please be remind that the above code will apply to your whole application that match the rule since it's not encapsulated within your component when you do this and it is similar with putting the below code into your style.scss.

.advanced-pie-legend .legend-items-container .legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

回答2:

This code should eliminate the CSS component encapsulation so you can overwrite your style

add encapsulation: ViewEncapsulation.None to @Component section in pietest.component.ts file.

来源：https://stackoverflow.com/questions/60767731/modifying-the-inner-css-of-ngx-charts

标签

html

css

angular

ngx-charts