Qliksense: Is it possible to style the scrollbar for bar charts?

[ol_dev]

Hi,

We are wondering if it is possible to style the CSS for horizontal scrollbars on bar charts, as the one shown from my screenshot? We would like to make the scrollbar height bigger, similar to how it is possible with tables in which we can select 3 different heights for scrollbar.

However, this is not possible with Qliksense, though I believe it should be possible with custom CSS? I know there is a multi-KPI visualization that we can use to add CSS to Qliksense, but I have not been able to understand how to make this happen. Tried to style with webkit for scrollbar, as well as the class .scrollbar-track, nothing seems to work. Can someone please help? Thanks. 

[Frank_S]

Hello @ol_dev 

I did not see that your requirement can be met in app nor via custom themes as per information available in the links below:

https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Apps/style-app.htm

https://qlik.dev/extend/create-custom-themes/custom-themes-objects-extended-examples/

If you wish to see a specific feature added, please feel free to write a feature request here:

Ideas | Qlik Community

Kind regards...

[Dataintellinalytics]

Hi,

Try these in the CSS.

.scrollbar-thumb{background-color: #007bff !important;}

.scrollbar--thumb{background: #007bff !important;}

.scrollbar-thumb.active, .touch-off .scrollbar-thumb:hover {background: #007bff !important;}

Refer:

https://youtu.be/O-aYzzZGx3k?si=WFHB5rdUVRChtXL5

[ol_dev]

@Dataintellinalytics 

Thx for your answer, it does change the background color of the scrollbars correctly for bar charts, but it does not seem to work when I adjust the height/thickness of the scrollbar. Tried to use this css 'height: 16px !important;' in all the scrollbar classes, and the scrollbar's height remains the same anyway. Is this not possible to change? 

Edit: Actually, it is possible to reduce the height of the scrollbar, so the CSS does work to some extent. However, I cannot seem to increase scrollbar's height beyond the default value, I do not know why it is like this, perhaps there is a parent div that I need to style as well? 

[lennart_mo]

Hi @ol_dev,

to adjust the height of a scrollbar through the Multi-KPI Styling you need to use the following CSS

[data-key="scrollbar"] {height: 16px !important; 
top: calc(100% - 20px) !important;}

The height of the scrollbar is limited by this html element and not set through scrollbar--thumb.

You'll need to adjust the position of the element as well, since the bar won't be displayed at full height for 16px / cut off at the bottom.

Hope this helps!

[ol_dev]

@lennart_mo 

Thank you so much, I'm able to get the scrollbar to look thicker now.

However, it seems that the top half of the scrollbar is not draggable, instead it attempts to select the date ranges when I attempt to drag it to the right. I suppose this happens because the the chart area covers part of the scrollbar. I tried to set the z-index for the scrollbar so it will appear on top, but does not seem to work.

Is there a way I can resize the chart to be its current height - 8px so the scrollbar is fully draggable from both the top and bottom half? Thanks again. 

[Frank_S]

If you can't get the scrollbar just as you need it with the custom theme, I would like suggest an in app workaround. 

You may find it helpful to use  the 'appearance>presentation>scrollbar>minichart' as your as your scrollbar object.

This gives you a much wider area to click, hold then scroll. 

Just a thought.

Kind regards...

[ol_dev]

@Frank_S 

I appreciate the suggestion and I am aware of the option to use minichart, though our current priority is still to use CSS to get the scrollbar to work. We will only switch to minichart as last resort, which we believe is not necessary as we already have an almost working solution, just need to make a minor adjustment to work perfectly. 

[Dataintellinalytics]

Glad it was helpful. Please try the below to adjust scroll bar height.

.scrollbar-track.horizontal .scrollbar-thumb {

    bottom: 0; 

   height: 150%;

   }

Adjust the height percentage as per your need.

[ol_dev]

@Dataintellinalytics 

Thx for your help, it does seem to work though @lennart_mo's solution of styling [data-key="scrollbar"] was already able to increase the height of the scrollbar. Right now I am having a different issue, that the scrollbar looks bigger but the top part of the scrollbar is undraggable, instead it ends up selecting the range of data. I was trying to figure out if this is possible to fix, and I will appreciate if you have some suggestions. Seems the height of the selectable chart area needs to be modified.