How to change the background colour of the tooltip in swimlane/ngx-charts

user_16517930 0
Viewed 752

When using ngx-charts, I want to change the color of the tooltip to white background with black text in a dark theme. The default setting provides the tooltip in black background with white text in both the light and dark themes.

What I have tried:

I tried passing the ng-template tooltip as below and added a class to my component as below:

<ng-template  #tooltipTemplate let-model="model">
  <div class="custom-tooltip" role="tooltip">custom tooltip</div>
</ng-template>

But this does not change the color of the entire tooltip but only a part of it.

Angular version: 12

@swimlane/ngx-charts : 17.0.1

UPDATE:

I was able to change the styles using the below styles, but this works in all the themes, I want to apply these styles only in dark themes, so I tried using the below styles inside:host-context(.dark){}, but that didn't help. any help is much appreciated.

::ng-deep ngx-tooltip-content.ngx-charts-tooltip-content.type-tooltip {
  .tooltip-caret.position-top {
    border-top-color: white;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }

  background-color: white;
  color: black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
angular
1 Answers

if you are referring to the dark theme in their demo, they are adding a .dark class, so you can put this in the global styles file:

.dark ngx-tooltip-content.ngx-charts-tooltip-content.type-tooltip {
  .tooltip-caret.position-top {
    border-top-color: white;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }

  background-color: white;
  color: black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
user_56137200
Related