Facing problems hiding pointer using ngx-charts if click event is not available

Question

since yesterday I am trying to tinker around the swimlane/ngx-charts library to hide the pointer from the graphs on mouse hover. We are using pie chart from this library and this is how the default cursor looks upon hovering on the chart:

Many of our clients are getting confused due to this because they think there is some click action associated with it and on clicking it does nothing. So, is it possible to tweak this to hide the hand pointer and only show default "arrow" pointer if there is no call to action associated on click?

We have multiple graphs; some does nothing on click (show default "arrow" pointer here) whereas others navigate users to some internal routes when clicked (show hand pointer on hover in this scenario).

What I tried:

I tried reading about an issue which is just similar to mine here:

https://github.com/swimlane/ngx-charts/issues/525

but it talks about editing the library files, which in my case are part of node_modules and I don't wish to edit those files as it will create problems in the future.

I also tried adding css code like this in my styles.scss:

.ngx-charts {
  .circle,
  .bar,
  .arc {
    cursor: default !important;
  }
}

but again this hides the hand-pointer completely, even from the graphs that has a call to action associated with the click.

What I am expecting:

It'd be great if you can help me to enable hand-pointer only when there is specific action associated with the click on the graph, for all other scenarios when there is no click action associated, I would like to show only a default "arrow" pointer.

EDIT

As per the comments by @Naren below, I am trying to add no pointer class manually to the chart I need but getting stuck because we have such nested structure:

I can only see the results if I add this class manually to the svg elements marked at 6th position, which I feel is very complicated.

Answer 1

i did not tried it but i think should work in your case 1st in css add

.no-pointer {
  cursor: default !important;
}

then for elements that have a call to action associated with the click, add the no-pointer class

<ngx-charts-bar-vertical
  [results]="barChartData"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [gradient]="gradient"
  [noPointer]="true" <!-- Add this line -->
></ngx-charts-bar-vertical>

as we have added the [noPointer]="true" attribute to the ngx-charts-bar-vertical component. This attribute can be used to conditionally apply the no-pointer class to the component.

now, in css rule to only apply the cursor: default rule to elements with the.no-pointer class .

.ngx-charts .circle,
.ngx-charts .bar,
.ngx-charts .arc {
  cursor: pointer;
}

.ngx-charts .no-pointer {
  cursor: default !important;
}

try it and let us know.