Generating a Scrolling Legend

legend:
  {
  scroll: {
     enabled: boolean,
     size: number, 
     color: 'string',  
     handle: { 
        color: 'string',
        hoverColor: 'string',
        border: {
            width: number, 
            color: 'string',
            dash: 'string'
                    }
                  }
           }
  }

where:

enabled: boolean

Controls whether the legend will be scrollable when necessary. Valid values are:

• true, which enables legend scrolling.
• false, which disables legend scrolling. This is the default value.

size: number

Defines the width of the scroll bar in pixels. The default value is 15.

color: 'string'

Is a color or gradient definition string the defines the fill color of the scroll bar. The default color is 'rgb(240, 240, 240)'.

handle:

Defines properties of the scroll bar handle.

color: 'string'

Is a color definition string that defines the color of the scroll bar handle. The default color is 'grey'.

hoverColor: 'string'

Is a color definition string that defines the color of the scroll bar handle when the mouse hovers over it or clicks on it. The default color is 'rgb(88, 88, 88)'.

border:

Defines properties of the scroll bar handle border.

width: number

Defines the width of the handle border in pixels. The default value is 0.

color: 'string'

Is a color definition string that defines the color of the handle border. The default value is 'transparent'.

dash: 'string'

Is a string that defines the dash style of the border. The default value is '' (a solid line). Use a string of numbers that defines the width of a dash in pixels followed by the width of the gap between dashes in pixels (for example, dash: '1 1' draws a dotted line).

Multiple dashes can be defined within the dash string (for example, '2 4 4 2'), in which case, the dash types will alternate along the border.