React colorscales 🌈

A React UI component for picking and modifying colorscales, based on Chroma-js.

Part of Plotly's React Component Suite for building data visualization Web apps and products.

Demo

👉 DEMO

👉 Demo source code

👉 Wrapper for Dash apps (Python)

Install

npm install react-colorscales

yarn add react-colorscales

🚗 Quick Start

import{Colorscale}from'react-colorscales';importColorscalePickerfrom'react-colorscales';constviridisColorscale=['#fafa6e','#9cdf7c','#4abd8c','#00968e','#106e7c','#2a4858'];// Show a single colorscale<Colorscalecolorscale={viridisColorscale}onClick={()=>{}}width={150}/>// Show the colorscale picker<ColorscalePickeronChange={this.onChange}colorscale={viridisColorscale}/>

API

Colorscale component

<Colorscale /> generates a single color scale palette:

prop	Description
onClick	Function to be called when colorscale is clicked.
colorscale	Colorscale as an array of color strings (HEX or RGB). See Quick Start above.
width	Optional: Width of an individual color swatch. Defaults to 20px.
maxWidth	Optional: Maximum width of colorscale palette. If set, maxWidth overrides swatch width.
label	Optional: Label positioned on the left side of color scale palette

ColorscalePicker component

<ColorscalePicker /> generates a UI panel for selecting a color scale palette:

prop	Description
onChange	Passes back a new color scale when a scale is chosen or modified.
colorscale	Default colorscale as an array of color strings (HEX or RGB). See Quick Start above.
nSwatches	Optional: Number of discrete colors or "swatches" in the default color scale.
fixSwatches	Optional: If set to true, hides the swatches slider and fixes swatches to `nSwatches.
colorscaleType	Optional: If set, sets ColorPicker Dropdown to specific colorscale, one of COLORSCALE_TYPES
width	Optional: Can set width of component
className	Optional: Can add className to base level component
disableSwatchControls	Optional: Does not show swatch related controls in ColorPicker
scaleLength	Optional: Can specify the lengh of the Colorscales used in the ColorPicker

See the demo app source code for an example of importing and using these components.

Features

• Preloaded with ColorBrewer, cmocean, and cube helix color scales
• Log color scales
• Set custom scale breakpoints
• Set the number of discrete colors ("swatches") in a color scale

Screenshots

Credit

• Cynthia Brewer's ColorBrewer colorscales
• Kristen Thyng's cmocean color scales
• Dave Green's cube helix color scales
• Gregor Aisch's chroma-js for easy access to the aforementioned color scales in JavaScript.