Home > Docs > states

states

Configuration Structure

states: {
  hover: { ... },
    filter: { ... },
      type: 'none' | 'lighten' | 'darken',
      value: number,
  active: { ... },
    allowMultipleDataPointsSelection: boolean,
    filter: { ... },
      type: 'none' | 'lighten' | 'darken',
      value: number,
}

hover

filter

states.hover.filter

type

states.hover.filter.type
Default: 'lighten'

The filter function to apply on hover state.
The available filter functions are:

  • none
  • lighten
  • darken

active

allowMultipleDataPointsSelection

states.active.allowMultipleDataPointsSelection
Default: false

Whether to allow selection of multiple datapoints and give them active state or allow one dataPoint selection at a time.

filter

states.active.filter

type

states.active.filter.type
Default: 'darken'

The filter function to apply on active state.
The available filter functions are:

  • none
  • lighten
  • darken

value

states.hover.filter.value

Blend strength toward white for lighten or black for darken, from 0 to 1. Defaults to 0.15.

The shift is proportional to the base colour's head-room, so an already-light colour is lightened only slightly and an already-dark one darkened only slightly. Neither washes out.

value

states.active.filter.value

Blend strength for the active state, on the same scale and with the same head-room behaviour as hover.filter.value.