Skip to content
A React UI component for picking and modifying colorscales
Branch: master
Clone or download
Latest commit 8a5edaf Jan 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build v0.7.3 Jan 16, 2019
config
docs
scripts Simplify build and dev env Jul 20, 2018
src add classNames and adjust width if no label Jan 16, 2019
.babelrc Simplify build and dev env Jul 20, 2018
.gitignore Simplify build and dev env Jul 20, 2018
.travis.yml Initial commit Aug 22, 2017
LICENSE Initial commit Aug 22, 2017
README.md
package.json v0.7.3 Jan 16, 2019
webpack.config.js Simplify build and dev env Jul 20, 2018
webpack.config.prod.js

README.md

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';
import ColorscalePicker from 'react-colorscales';

const viridisColorscale = ['#fafa6e', '#9cdf7c', '#4abd8c', '#00968e', '#106e7c', '#2a4858'];

// Show a single colorscale

<Colorscale
    colorscale={viridisColorscale}
    onClick={() => {}}
    width={150}
/>

// Show the colorscale picker

<ColorscalePicker 
    onChange={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

react-colorscales-screenshot

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.
You can’t perform that action at this time.