Class PalettedFill<T>

Style class for describing a dynamically looked up fill color. Using a PalettedFill, each data point (or even pixel) can be colored individually. The basis of coloring can be configured extensively, with a variety of different option combinations (read below for details).

Instances of PalettedFill, like all LCJS style classes, are immutable, meaning that its setters don't modify the actual object, but instead return a completely new modified object.

Properties of PalettedFill:

  • lut: color lookup table. Essentially a list of colors paired with numeric values. See LUT for more details.
  • lookUpProperty: selects basis of color lookup. See LookUpProperty for possible options.

PalettedFill Usage:

PalettedFill can be used with a select group of features:

 // Example 1, paletted points fill by 'y' coordinates.
 PointSeries.setPointFillStyle(new PalettedFill({
     lookUpProperty: 'y',
     lut: new LUT({
         interpolate: true,
         steps: [
             { value: 0, color: ColorRGBA( 0, 0, 0 ) },
             { value: 10, color: ColorRGBA( 255, 0, 0 ) },
             { value: 20, color: ColorRGBA( 0, 255, 0 ) },
             { value: 30, color: ColorRGBA( 0, 0,255 ) },
         ]
     })
 }))

 // Example 2, paletted points fill by user supplied data point values.
 PointSeries
     .setPointFillStyle(new PalettedFill({
          lookUpProperty: 'value',
          lut: new LUT({
              interpolate: true,
              steps: [
                  { value: 0, color: ColorRGBA( 0, 0, 0 ) },
                  { value: 100, color: ColorRGBA( 255, 0, 0 ) },
              ]
          })
     }))
     .add([
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
         { x: Math.random() * 100, y: Math.random() * 100, value: Math.random() * 100 },
     ])

Related information:

For more fill styles, see:

Type Parameters

Hierarchy

  • PalettedFillStyleRecord
    • PalettedFill

Implements

Constructors

constructor

Properties

lookUpProperty lut type

Methods

getLookUpProperty getPalette setLookUpProperty

Constructors

constructor

  • Construct a PalettedFill object, specifying any amount of its properties.

     // Example 1, palette by 'y' coordinate.
     const paletteY = new PalettedFill({
         lookUpProperty: 'y',
         lut: new LUT({
             interpolate: true,
             steps: [
                 { value: 0, color: ColorRGBA( 0, 0, 0 ) },
                 { value: 10, color: ColorRGBA( 255, 0, 0 ) },
                 { value: 20, color: ColorRGBA( 0, 255, 0 ) },
                 { value: 30, color: ColorRGBA( 0, 0,255 ) },
             ]
         })
     })

     // Example 2, palette by user supplied data point values.
     const paletteValue = new PalettedFill({
         lookUpProperty: 'value',
         lut: new LUT({
             interpolate: true,
             steps: [
                 { value: 0, color: ColorRGBA( 0, 0, 0 ) },
                 { value: 100, color: ColorRGBA( 255, 0, 0 ) },
             ]
         })
     })

    For more details, see LUT, and LookUpProperty.

    Type Parameters

    Parameters

    Returns PalettedFill<T>

Properties

Readonly lookUpProperty

lookUpProperty: LookUpProperty

Identifier that points to a property to be used when picking colours from attached Look Up Table.

Possible values are:

  • "value"
  • "x"
  • "y"
  • "z"

Features that support assigning a PalettedFill contain additional per-feature information, which properties are supported, and how they behave.

Readonly lut

lut: LUT

Color lookup table, which describes the relation of lookUpProperty values to colors.

Readonly type

type: "fillstyle" = 'fillstyle'

Methods

getLookUpProperty

getPalette

  • Get LUT lookup table.

    Returns

    LUT object.

    Returns LUT

setLookUpProperty

Settings

Member Visibility

Theme