Colors

The colors attribute manages the coloring of the main bar. Its functionality is primarily based on chroma.js, so you may want to check their documentation as well.

No value

The colors attribute without a value returns the turbo colormap, which is not included in chroma.js.

Code

<dv-scalebar colors></dv-scalebar>

Result

Single value

When a single value is provided in the colors attribute, the scale interpolates between white and that color.

Note: The rgb and hsl color formats use space-separated notation. Commas are used to separate multiple values. Therefore, the legacy color notation with commas is not supported.

Code

<dv-scalebar colors="teal"></dv-scalebar>
<dv-scalebar colors="#4ea"></dv-scalebar>
<dv-scalebar colors="rgb(70 70 250 / .5)"></dv-scalebar>
<dv-scalebar colors="hsl(190 60% 50%)"></dv-scalebar>

Result

Multiple values

To provide multiple colors, use a comma-separated list.

Code

<dv-scalebar colors="yellow,#008ae5"></dv-scalebar>
<dv-scalebar colors="yellow,red,black"></dv-scalebar>

Result

Named Colormaps

You can also use the ColorBrewer palettes as they are included in chroma.js.

Code

<dv-scalebar colors="YlGnBu"></dv-scalebar>
<dv-scalebar colors="Spectral"></dv-scalebar>
<dv-scalebar colors="Viridis"></dv-scalebar>

Result