Documentation

GrainPattern

Type class

Grain pattern.

Allows to add grain (noise) effect to your Graphics objects.

Note, grain pattern does not support fill and color setting.

Use colors setting to define colors of a grain pixels.

Note, rotation setting is not supported by this pattern.

Click here for more info
@since 5.5.0

Sources

GrainPattern can be used (imported) via one of the following packages.

// Import GrainPattern
import * as am5 from "@amcharts/amcharts5";

// Create GrainPattern
am5.GrainPattern.new(root, {
  // ... config if applicable
});

<!-- Load GrainPattern -->
<script src="index.js"></script>

<script>
// Create GrainPattern
am5.GrainPattern.new(root, {
  // ... config if applicable
});
</script>

Inheritance

GrainPattern extends Pattern.

GrainPattern is not extended by any other symbol.

Settings

Set these settings on a GrainPattern object using its set() and setAll() methods.

Read about settings concept.

color
#

Type Color

Inherited from IPatternSettings

Color of the pattern shape.

Click here for more info

colorOpacity
#

Type undefined | number

Inherited from IPatternSettings

Opacity of the pattern shape.

Click here for more info

colors
#

Type Array

Default [color(0x000000)]

An array of colors to randomly use for pixels.
density
#

Type undefined | number

Default 1

Density of noise.

Value range: 0 (no noise applied) to 1 (noise is applied to every pixel).

The bigger the value, the higher chance that pixel will have another pixel painted over with random opacity from minOpacity to maxOpacity.
fill
#

Type Color

Inherited from IPatternSettings

Color to fill gaps between pattern shapes.

Click here for more info

fillOpacity
#

Type undefined | number

Inherited from IPatternSettings

Opacity of the fill for gaps between pattern shapes.

Click here for more info

height
#

Type undefined | number

Inherited from IPatternSettings

Width of the pattern tile, in pixels.

Click here for more info

horizontalGap
#

Type undefined | number

Default 0

Horizontal gap between noise pixels measured in size.
id
#

Type undefined | string

Inherited from IEntitySettings

A custom string ID for the element.

If set, element can be looked up via am5.registry.entitiesById.

Will raise error if an element with the same ID already exists.
maxOpacity
#

Type undefined | number

Default 0.3

Maximum opacity of a noise pixel.
minOpacity
#

Type undefined | number

Default 0

Minimum opacity of a noise pixel.
repetition
#

Type "repeat" | "repeat-x" | "repeat-y" | "no-repeat"

Inherited from IPatternSettings

How pattern tiles are repeated when filling the area.

Click here for more info

rotation
#

Type undefined | number

Default 0

Inherited from IPatternSettings

Rotation of patterm in degrees. Supported values: -90 to 90.

Click here for more info

size
#

Type undefined | number

Default 1

Size of a grain in pixels.
stateAnimationDuration
#

Type undefined | number

Inherited from IEntitySettings

Duration of transition from one state to another.
stateAnimationEasing
#

Type $ease.Easing

Inherited from IEntitySettings

Easing of transition from one state to another.
strokeDasharray
#

Type number[] | number

Inherited from IPatternSettings

Stroke (border or line) dash settings.

Click here for more information

strokeDashoffset
#

Type undefined | number

Inherited from IPatternSettings

Stroke (border or line) dash offset.

Click here for more information

strokeWidth
#

Type undefined | number

Default 1

Inherited from IPatternSettings

Width of the pattern's line elements.
themeTags
#

Type Array

Inherited from IEntitySettings

Tags which can be used by the theme rules.

Click here for more info

themeTagsSelf
#

Type Array

Inherited from IEntitySettings

Tags which can be used by the theme rules.

These tags only apply to this object, not any children.

Click here for more info

themes
#

Type Array

Inherited from IEntitySettings

A list of themes applied to the element.
userData
#

Type any

Inherited from IEntitySettings

A storage for any custom user data that needs to be associated with the element.
verticalGap
#

Type undefined | number

Default 0

Vertical gap between noise pixels measured in size.
width
#

Type undefined | number

Inherited from IPatternSettings

Width of the pattern tile, in pixels.

Click here for more info

There are 18 inherited items currently hidden from this list.

Private settings

Properties

adapters
#

Type Adapters

Default new Adapters(this)

Inherited from Entity
canvas
#

Type HTMLCanvasElement

Default document.createElement("canvas")
className
#

Static

Type string

Default "GrainPattern"
classNames
#

Static

Type Array

Default "GrainPattern", "Pattern", "Entity"
context
#

Type CanvasRenderingContext2D

Default this.canvas.getContext("2d")!
events
#

Type EventDispatcher

Default this._createEvents()

Inherited from Entity
pattern
#

Type IPattern | undefined | null

Inherited from Pattern
root
#

Type Root

Inherited from Entity

An instance of Root object.

@readonly
@since 5.0.6

states
#

Type States

Default new States(this)

Inherited from Entity
template
#

Type Template | undefined

Inherited from Entity

@todo needs description

uid
#

Type number

Default ++counter

Inherited from Settings

Unique ID.
There are 7 inherited items currently hidden from this list.

Methods

animate(

options: AnimationOptions

)

#

Returns Animation

Inherited from Settings

Animates setting values from current/start values to new ones.

Click here for more info

dispose()

#

Returns void

Inherited from Settings

Disposes this object.

get(

key: Key,
fallback: F

)

#

Returns NonNullable | F

Inherited from Entity

Returns settings value for the specified key.

If there is no value, fallback is returned instead (if set).

Click here for more info

has(

key: Key

)

#

Returns boolean

Inherited from Settings

Returns true if the setting exists.

Click here for more info

isDisposed()

#

Returns boolean

Inherited from Settings

Returns true if this element is disposed.

isType(

type: string

)

#

Returns this

Inherited from Entity

Checks if element is of certain class (or inherits one).

new(

root: Root,
settings: ITSettings,
template?: Template

)

#

Static

Returns T

Inherited from Entity

Use this method to create an instance of this class.

Click here for more info

off(

key: Key,
callback?: undefined | ( value: [""], target: this, key: Key) => void

)

#

Returns void

Inherited from Settings

Removes a callback for when value of a setting changes.

Click here for more info
@since 5.9.2

offPrivate(

key: Key,
callback?: undefined | ( value: [""], target: this, key: Key) => void

)

#

Returns void

Inherited from Settings

Removes a callback for when value of a private setting changes.

Click here for more info
@since 5.9.2

on(

key: Key,
callback: ( value: [""], target: this, key: Key) => void

)

#

Returns IDisposer

Inherited from Settings

Sets a callback function to invoke when specific key of settings changes or is set.

Click here for more info

onPrivate(

key: Key,
callback: ( value: [""], target: this, key: Key) => void

)

#

Returns IDisposer

Inherited from Settings

Sets a callback function to invoke when specific key of private settings changes or is set.

Click here for more info

remove(

key: Key

)

#

Returns void

Inherited from Entity

Removes a setting value for the specified key.

Click here for more info

removeAll()

#

Returns void

Inherited from Settings

Removes all keys;

Click here for more info

set(

key: Key,
value: Value

)

#

Returns Value

Inherited from Entity

Sets a setting value for the specified key, and returns the same value.

Click here for more info

setAll(

settings: Partial

)

#

Returns void

Inherited from Settings

Sets multiple settings at once.

settings must be an object with key: value pairs.

Click here for more info

setTimeout(

fn: () => void,
delay: number

)

#

Returns IDisposer

Inherited from Entity

Creates and returns a "disposable" timeout.
There are 16 inherited items currently hidden from this list.

Events

GrainPattern does not have any events.