Setting minimal width of Scrollbar thumb

XY#scrollbar#zooming

This tutorial will explain how you can set minimal width/height of the chart Scrollbar’s “thumb” - draggable middle section.

The problem

OK, so you added a scrollbar (or a couple of) to your chart. This is great because it allows your users to zoom the chart as well as pan the selection. The thumb - grayer mid section that comes between two grip buttons - can be used to pan the selection.

However, if you zoom in even further, the thumb becomes so small, you can even see it, let along drag.

The solution

The solution us actually super-simple: just set minWidth (or minHeight if it’s a vertical scrollbar) to a minimum number of pixels you don’t want your thumb to shrink beyond.

TypeScript

chart.scrollbarX.thumb.minWidth = 50;

JavaScript

chart.scrollbarX.thumb.minWidth = 50;

JSON

{  // ...  "scrollbarX": {    "type": "Scrollbar",    "thumb": {      "minWidth": 50    }  }}

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Setting minimal width of scrollbar thumbsetting-minimal-width-of-scrollbar-thumb