While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue:
https://i.stack.imgur.com/oSho1.png
After some testing in the browser, I found that changing it to 10px fixed the problem. So, I added the following rule to the component's CSS:
.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
margin-top: 10px !important;
}
However, despite trying various methods like using !important and ::ng-deep, the CSS for the legend items remained unaffected. How can I adjust the CSS of the legend-item to achieve the desired margin?
Below is the complete code for the component to replicate the issue shown in 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;
}