Color palette picker
Use EuiColorPalettePicker to select palettes to apply colors to data visualization like maps and charts.
Use the
palettes prop to pass your palettes as an array strings or an array of ColorStops in the form of { stop: number, color: string }. For each object, you should pass a palette (array of hex values) and specify the type. Use fixed palettes for categorical data and gradient palettes for continuous data.
Each of the palettes, excluding type='text' palettes, can use the append prop to append an element to the right of the title.
Color palette display
Use EuiColorPaletteDisplay to show the palette in use for a data visualization.
Use the palette prop to pass your palette as an array of color strings or an array of ColorStops in the form of { stop: number, color: string }. Use fixed palettes for categorical data and gradient palettes for continuous data.
In cases you need to apply a palette, it's recommended to use the EuiColorPalettePicker.
Props
EuiColorPalettePicker
Prop | Description and type | Default value |
|---|---|---|
Prop palettes# | Description and type An array of one of the following objects: #EuiColorPalettePickerPaletteText, #EuiColorPalettePickerPaletteFixed, #EuiColorPalettePickerPaletteGradient EuiColorPalettePickerPaletteProps[] | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after input. PrependAppendType | Default value |
Prop prepend# | Description and type Creates an input group with element(s) coming before input. PrependAppendType | Default value |
Prop name# | Description and type Type: string | Default value |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop isLoading# | Description and type Type: boolean | Default value false |
Prop onFocus# | Description and type Type: (event?: FocusEvent<Element, Element>) => void | Default value |
Prop onBlur# | Description and type Type: (event?: FocusEvent<Element, Element>) => void | Default value |
Prop onChange# | Description and type You must pass an (value: string) => void | Default value |
Prop buttonRef# | Description and type Type: Ref<HTMLButtonElement> | Default value |
Prop readOnly# | Description and type Type: boolean | Default value false |
Prop compressed# | Description and type Type: boolean | Default value false |
Prop placeholder# | Description and type Placeholder to display when the current selected value is empty. ReactNode | Default value |
Prop isOpen# | Description and type Controls whether the options are shown. Default: false boolean | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value false |
Prop valueOfSelected# | Description and type Type: string | Default value |
Prop itemClassName# | Description and type Classes for the context menu item string | Default value |
Prop popoverProps# | Description and type Optional props to pass to the underlying EuiInputPopover. Does not accept a nested Partial<CommonProps & Omit<EuiInputPopoverProps, "isOpen">> | Default value |
Prop selectionDisplay# | Description and type Specify what should be displayed after a selection: a "title" | "palette" | Default value palette |