Angular5中ngx-charts-gauge中心大标题颜色无法修改求助

Hey there! I’ve dealt with this exact frustration when working with ngx-charts-gauge in Angular 5, so I know how tricky it can be to track down the right styles to override. Let’s break down why your initial CSS didn’t work and how to fix it properly.

Why .chart-container { color: white; } didn’t work #

Angular uses View Encapsulation by default, which means styles defined in your component’s CSS file won’t leak into child components (like ngx-charts-gauge). Plus, the gauge’s center title has its own specific CSS class that takes precedence over the parent container’s color property.

Solution 1: Use ::ng-deep to penetrate encapsulation #

Add this to your component’s CSS file to target the gauge’s center value text directly:

::ng-deep .ngx-charts .gauge-value-text {
  color: white; /* Replace with your desired color */
}

If you also need to change the smaller label text below the value, add this too:

::ng-deep .ngx-charts .gauge-label-text {
  color: white;
}

Note: ::ng-deep is fully supported in Angular 5 and works well here—even though it’s marked as deprecated in newer Angular versions, it’s totally safe for your use case.

Solution 2: Add styles to your global stylesheet #

If you prefer to avoid ::ng-deep, you can add the same styles to your global styles.css (or styles.scss) file. Global styles automatically apply to all components, so no encapsulation workaround is needed:

.ngx-charts .gauge-value-text {
  color: white;
}

.ngx-charts .gauge-label-text {
  color: white;
}

Double-check with DevTools #

If neither solution works right away, open your browser’s DevTools (F12), inspect the center title element, and confirm the exact CSS class being used. Sometimes minor version differences in ngx-charts can tweak class names, but .gauge-value-text is the standard for the main center value.

Hope this gets that title color changed for you! 🎨

内容的提问来源于stack exchange，提问作者Loturno