2

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;
}
scohe001
  • 15,110
  • 2
  • 31
  • 51

2 Answers2

3

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;
}
Ken
  • 96
  • 8
  • Yup, this did it. How do you know that this doesn't occur in `^9.0.0`? Is this a known bug? And if so, can you point me to the issue on GitHub? – scohe001 Mar 20 '20 at 13:08
  • Because i am using ^9.0.0, and I've pasted your sample code into my application and it just worked fine. Not sure if anyone had reported this issue. – Ken Mar 21 '20 at 14:21
  • Is there anyway this cold be done with the .css type stylesheet? i cant use the scss just to the component i have used this while all others are in css, or would end up changing everything to scss which i am little reluctant to do at the moment... – Ak777 Jul 03 '20 at 02:18
  • you can add the second code of my answer into your styles.css instead of style.scss. Or you can add encapsulation: ViewEncapsulation.None into your component as pointed out by Ali Safari. – Ken Jul 03 '20 at 03:04
1

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.

Ali Safari
  • 137
  • 6