Search code examples
htmlcssangularngx-charts

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:

Bad advanced pie chart legend

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;
}
Solution

  • 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 code below 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 reminded that the code above will apply to your whole application that match the rule since it's not encapsulated within your component anymore when you use /deep/ and it is similar with putting the code below into your style.scss.

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