How to style yAxis scrollbar using CSS?

[manshi44]

Hi Jacub,

I wanted to style vertical scrollbar and make it look slick using CSS.
I found some APIs here https://api.highcharts.com/highstock/yAxis.scrollbar
But using these available properties I can not get the look I wanted. I want to style my scrollbar similar to this scrollbar in this image https://ibb.co/2KzMrzJ

I am using Highchart version 10.3.3 and I also saw scrollbar looks different in latest version 11.1.0. But I can not upgrade my version now
Here is my code link : https://stackblitz.com/edit/stackblitz- ... %2FApp.tsx

Basically I can change scollbar style using below css. Something similar I would like to achieve here in Gantt chart case as well

Code: Select all

body::-webkit-scrollbar {
  width: .5em;
}
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

Thanks in advance
Manohar

[dawid.d]

Hello,

Welcome to our forum and thanks for contacting us with your question!

I'm afraid that this may be very problematic because the scrollbar in Highcharts is custom-drawn using SVG. This could be done without CSS by editing the scrollbar rendering methods with wrap (see more: https://www.highcharts.com/docs/extendi ... highcharts). You would have to override the rendering methods found in the Scrollbar class. Therefore, a much better solution would be to simply update the Highcharts version to 11+.

If I may clarify any issues/matters I am available at your convenience.
Best regards