picasso.js

v0.29.2

A charting library streamlined for building visualizations for the Qlik Sense Analytics platform.

experimental

picasso.js entry point

Parameters

cfg
object

No description

Returns

No description

Properties

component
experimental

Component registry

data
experimental

Data registry

formatter
experimental

Formatter registry

interaction
experimental

Interaction registry

renderer
experimental

Renderer registry

scale
experimental

Scale registry

version
experimental
string

picasso.js version

experimental

Parameters

plugin

No description

options
optional
object

No description

experimental

Parameters

definition

No description

Returns

No description

experimental

Parameters

registries
picassojs~registries

No description

options
object

No description

Properties

ranges
optional
Array<any>

Range configurations

Properties

key
optional
string

An identifier that represents the data source of the value

includeMin
optional, default=true
boolean

Whether or not the minimum value of a range should be included when determening if a value is brushed.

includeMax
optional, default=true
boolean

Whether or not the maximum value of a range should be included when determening if a value is brushed.

brush
()

interface

A brush context

Triggered when this brush is activated

Triggered when this brush is updated

Parameters

added
Array<any>

The added items

removed
Array<any>

The removed items

Triggered when this brush is deactivated

Configure the brush instance.

Parameters

config

No description

brushInstance.configure({
  ranges: [
    { key: 'some key', includeMax: false },
    { includeMax: true, includeMin: true },
  ]
})
emitsstart

Starts this brush context

Starts this brush context and emits a 'start' event if it is not already started.

Parameters

args
any

arguments to be passed to 'start' listeners

emitsend

Ends this brush context

Ends this brush context and emits an 'end' event if it is not already ended.

Parameters

args
any

arguments to be passed to 'end' listeners

Checks if this brush is activated

Returns true if started, false otherwise

Returns

boolean

No description

brushclear
()

function

Clears this brush context

Returns all brushes within this context

Returns

object

No description

Adds a primitive value to this brush context

If this brush context is not started, a 'start' event is emitted.
If the state of the brush changes, ie. if the added value does not already exist, an 'update' event is emitted.

Parameters

key
string

An identifier that represents the data source of the value

value
string | number

The value to add

brush.addValue('countries', 'Sweden');
brush.addValue('/qHyperCube/qDimensionInfo/0', 3);

Parameters

items
Array<any>

Items to add

Parameters

items
Array<any>

Items to set

Removes a primitive values from this brush context

If the state of the brush changes, ie. if the removed value does exist, an 'update' event is emitted.

Parameters

key
string

An identifier that represents the data source of the value

value
string | number

The value to remove

brush.removeValue('countries', 'Sweden');

Parameters

items
Array<any>

Items to remove

Add and remove values in a single operation
almost the same as calling addValues and removeValues but only triggers one 'update' event

If the state of the brush changes, an 'update' event is emitted.

Parameters

addItems
Array<any>

Items to add

removeItems
Array<any>

Items to remove

Toggles a primitive value in this brush context

If the given value exist in this brush context, it will be removed. If it does not exist it will be added.

Parameters

key
string

An identifier that represents the data source of the value

value
string | number

The value to toggle

brush.toggleValue('countries', 'Sweden');

Parameters

items
Array<any>

Items to toggle

Checks if a certain value exists in this brush context

Returns true if the values exists for the provided key, returns false otherwise.

Parameters

key
string

An identifier that represents the data source of the value

value
string | number

The value to check for

Returns

boolean

No description

brush.addValue('countries', 'Sweden');
brush.containsValue('countries', 'Sweden'); // true
brush.toggleValue('countries', 'Sweden'); // remove 'Sweden'
brush.containsValue('countries', 'Sweden'); // false

Adds a numeric range to this brush context

Parameters

key
string

An identifier that represents the data source of the range

range
object

The range to add to this brush

brush.addRange('Sales', { min: 20, max: 50 });

Parameters

items
Array<any>

Items containing the ranges to remove

Removes a numeric range from this brush context

Parameters

key
string

An identifier that represents the data source of the range

range
object

The range to remove from this brush

Parameters

items
Array<any>

Items containing the ranges to remove

Sets a numeric range to this brush context

Overwrites any active ranges identified by key

Parameters

key
string

An identifier that represents the data source of the range

range
object

The range to set on this brush

Parameters

items
Array<any>

Items containing the ranges to set

Toggles a numeric range in this brush context

Removes the range if it's already contained within the given identifier,
otherwise the given range is added to the brush.

Parameters

key
string

An identifier that represents the data source of the range

range
object

The range to toggle in this brush

Parameters

items
Array<any>

Items containing the ranges to toggle

Checks if a value is contained within a range in this brush context

Returns true if the values exists for the provided key, returns false otherwise.

Parameters

key
string

An identifier that represents the data source of the value

value
number

The value to check for

Returns

boolean

No description

brush.addRange('Sales', { min: 10, max: 50 });
brush.containsRangeValue('Sales', 30); // true
brush.containsRangeValue('Sales', 5); // false

Checks if a range segment is contained within this brush context

Returns true if the range segment exists for the provided key, returns false otherwise.

Parameters

key
string

An identifier that represents the data source of the value

range
object

The range to check for

Returns

boolean

No description

brush.addRange('Sales', { min: 10, max: 50 });
brush.containsRange('Sales', { min: 15, max: 20 }); // true - the range segment is fully contained within [10, 50]
brush.containsRange('Sales', { min: 5, max: 20 }); // false - part of the range segment is outside [10, 50]
brush.containsRange('Sales', { min: 30, max: 80 }); // false - part of the range segment is outside [10, 50]

Adds an event interceptor

Parameters

name
string

Name of the event to intercept

ic
function

Handler to call before event is triggered

brush.intercept('add-values', items => {
 console.log('about to add the following items', items);
 return items;
});

Removes an interceptor

Parameters

name
string

Name of the event to intercept

ic
function

Handler to remove

Removes all interceptors

Parameters

name
optional
string

Name of the event to remove interceptors for. If not provided, removes all interceptors.

Adds an alias to the given key

Parameters

key
string

Value to be replaced

alias
string

Value to replace key with

brush.addKeyAlias('BadFieldName', 'Region');
brush.addValue('BadFieldName', 'Sweden'); // 'BadFieldName' will be stored as 'Region'
brush.containsValue('Region', 'Sweden'); // true
brush.containsValue('BadFieldName', 'Sweden'); // true

Removes an alias

This will only remove the key to alias mapping for new manipulations of the brush,
no changes will be made to the current state of this brush.

Parameters

key
string

Value to remove as alias

brush.removeKeyAlias('BadFieldName');

Properties

type
string

Component type (ex: axis, point, ...)

preferredSize
optional
function

Function returning the preferred size

created
optional
function

No description

beforeMount
optional
function

No description

mounted
optional
function

No description

beforeUpdate
optional
function

No description

updated
optional
function

No description

beforeRender
optional
function

No description

beforeDestroy
optional
function

No description

destroyed
optional
function

No description

brush
optional
brush-setting
layout
optional
object

Layout settings

show
optional, default=true
boolean

If the component should be rendered

scale
optional
string

Named scale. Will be provided to the component if it ask for it.

formatter
optional
string

Named formatter. Fallback to create formatter from scale. Will be provided to the component if it ask for it.

Properties

element
HTMLElement

No description

data
Array<any>

No description

settings
chart-settings

No description

chart
()

interface

Properties

interactions
object

Get the all interactions instances

Update the chart with new settings and / or data

Parameters

chart

Chart definition

Destroy the chart instance.

Get all shapes associated with the provided context

Parameters

context
string

The brush context

mode
string

Property comparasion mode.

props
Array<any>

Which specific data properties to compare

key
string

Which component to get shapes from. Default gives shapes from all components.

Returns

Array<any>

Array of objects containing shape and parent element

Get all nodes matching the provided selector

Parameters

selector
string

CSS selector [type, attribute, universal, class]

Returns

Array<any>

Array of objects containing matching nodes

chart.findShapes('Circle') // [<CircleNode>, <CircleNode>]
chart.findShapes('Circle[fill="red"][stroke!="black"]') // [CircleNode, CircleNode]
chart.findShapes('Container Rect') // [Rect, Rect]

Get components overlapping a point.

Parameters

p

Point with x- and y-cooridnate. The coordinate is relative to the browser viewport.

Returns

Array<any>

Array of component contexts

Get all nodes colliding with a geometrical shape (circle, line, rectangle, point, polygon).

The input shape is identified based on the geometrical attributes in the following order: circle => line => rectangle => point => polygon.
Note that not all nodes on a scene have collision detection enabled.

Parameters

shape

A geometrical shape. Coordinates are relative to the top-left corner of the chart instance container.

opts
object

Options

Returns

Array<any>

Array of objects containing colliding nodes

chart.shapesAt(
 {
   x: 0,
   y: 0,
   width: 100,
   height: 100
 },
 {
   components: [
     { key: 'key1', propagation: 'stop' },
     { key: 'key2' }
   ],
   propagation: 'stop'
 }
);

Brush data by providing a collection of data bound shapes.

Parameters

shapes
Array<any>

An array of data bound shapes.

config
object

Options

const shapes = chartInstance.shapesAt(...);
const config = {
 components:[
   {
     key: 'key1',
     contexts: ['myContext'],
     data: [''],
     action: 'add'
   }
 ]
};
chartInstance.brushFromShapes(shapes, config);

Parameters

name
string

Name of scroll api

Returns

scroll

No description

Get

Parameters

key
string

Get the dataset identified by key

Returns

No description

Get all registered scales

Returns

Object

No description

Get all registered formatters

Returns

Object

No description

Get or create brush context for this chart

Parameters

name
string

Name of the brush context. If no match is found, a new brush context is created and returned.

Returns

No description

Get or create a scale for this chart

Parameters

v
string | object

Scale reference or scale options

Returns

scale

No description

instance.scale('nameOfMyScale'); // Fetch an existing scale by name
instance.scale({ scale: 'nameOfMyScale' }); // Fetch an existing scale by name
instance.scale({ source: '0/1', type: 'linear' }); // Create a new scale

Get or create a formatter for this chart

Parameters

v
string | object

Formatter reference or formatter options

Returns

formatter

No description

instance.formatter('nameOfMyFormatter'); // Fetch an existing formatter by name
instance.formatter({ formatter: 'nameOfMyFormatter' }); // Fetch an existing formatter by name
instance.formatter({ type: 'q' }); // Fetch an existing formatter by type
instance.formatter({
 formatter: 'd3',
 type: 'number',
 format: '1.0.%'
}); // Create a new formatter

Parameters

val
optional
boolean

Toggle brushing on or off. If value is omitted, a toggle action is applied to the current state.

Get a component context

Parameters

key
string

Component key

Returns

component-context

Component context

Discrete axis settings

Properties

labels
object

No description

ticks
object

No description

line
object

No description

paddingStart
optional, default=0
number

Padding in direction perpendicular to the axis

paddingEnd
optional, default=10
number

Padding in direction perpendicular to the axis

align
optional, default='auto'
string

Set the anchoring point of the axis. Avaialable options are auto/left/right/bottom/top. In auto the axis determines the best option. The options are restricted based on the axis orientation, a vertical axis may only anchor on left or right

Continuous axis settings

Properties

labels
object

No description

ticks
object

No description

minorTicks
object

No description

line
object

No description

paddingStart
optional, default=0
number

Padding in direction perpendicular to the axis

paddingEnd
optional, default=10
number

Padding in direction perpendicular to the axis

align
optional, default='auto'
string

Set the anchoring point of the axis. Avaialable options are auto/left/right/bottom/top. In auto the axis determines the best option. The options are restricted based on the axis orientation, a vertical axis may only anchor on left or right

Properties

type
default='axis'
string

No description

Properties

type
string

"box"

data

Box data

settings

Box settings

{
  type: "box",
  data: {
   mapTo: {
     min: { source: "/qHyperCube/qMeasureInfo/0" },
     start: { source: "/qHyperCube/qMeasureInfo/1" },
     med: { source: "/qHyperCube/qMeasureInfo/2" },
     end: { source: "/qHyperCube/qMeasureInfo/3" },
     max: { source: "/qHyperCube/qMeasureInfo/4" },
   },
   groupBy: {
     source: "/qHyperCube/qDimensionInfo/0"
   }
 },
 settings: {
   major: {
     scale: { source: "/qHyperCube/qDimensionInfo/0" }
   },
   minor: {
     scale: { source: ["/qHyperCube/qMeasureInfo/0",
              "/qHyperCube/qMeasureInfo/1",
              "/qHyperCube/qMeasureInfo/2",
              "/qHyperCube/qMeasureInfo/3",
              "/qHyperCube/qMeasureInfo/4"] }
   }
 }
}

Properties

major
object

No description

minor
object

No description

orientation
optional, default='vertical'
string

Which orientation to use (vertical or horizontal)

box
optional
object

Visual properties for the box shape in the box marker

line
optional
object

Visual properties for lines between min-start, end-max.

whisker
optional
object

All the visual properties for whiskers at min and max.

median
optional
object

Visual properties for the median

oob
optional
object

EXPERIMENTAL: Out of bounds symbol utilizing the symbol API

Properties

start
string

Reference to the data property of the start value along the major axis

end
string

Reference to the data property of the end value along the major axis

Properties

min
optional
number

Min

max
optional
number

Max

start
optional
number

Start of box

end
optional
number

End of box

med
optional
number

Median

Properties

lasso
optional
object

Lasso style settings

snapIndicator
optional
object

Snap indicator settings

startPoint
optional
object

Start point style settings

brush
optional
object

No description

Properties

x
object

No description

y
object

No description

ticks
optional
object

No description

minorTicks
optional
object

No description

Properties

type
optional, default='labels'
string

No description

settings
object

No description

Properties

settings
object

No description

Properties

settings
object

No description

Properties

settings
object

No description

Properties

scale
string

No description

type
default='legend-cat'
string

No description

settings
object

No description

Properties

fill
string

Reference to definition of sequential color scale

major
string

Reference to definition of linear scale

size
optional, default=15
number

Size in pixels of the legend, if vertical is the width and height otherwise

length
optional, default=1
number

A value in the range 0-1 indicating the length of the legend node

maxLengthPx
optional, default=250
number

Max length in pixels

align
optional, default=0.5
number

A value in the range 0-1 indicating horizontal alignment of the legend's content. 0 aligns to the left, 1 to the right.

justify
optional, default=0
number

A value in the range 0-1 indicating vertical alignment of the legend's content. 0 aligns to the top, 1 to the bottom.

padding
optional
object

No description

tick
optional
object

No description

title
optional
object

Title settings

Properties

type
default='line'
string

No description

Parameters

a
object

No description

b
object

No description

Properties

coordinates
object

No description

connect
optional, default=false
boolean

No description

orientation
optional, default='horizontal'
string

No description

layers
object

No description

Properties

startAngle
optional, default=0
number

Start angle of the pie, in radians

endAngle
optional
number

End angle of the pie, in radians

slice
object

No description

Properties

type
optional, default='pie'
string

No description

{
  type: 'pie',
  data: {
    extract: {
      field: 'Region',
      props: {
        num: { field: 'Population' }
      }
    }
  },
  settings: {
    startAngle: Math.PI / 2,
    endAngle: -Math.PI / 2,
    slice: {
      arc: { ref: 'num' },
      fill: 'green',
      stroke: 'red',
      strokeWidth: 2,
      strokeLinejoin: 'round',
      innerRadius: 0.6,
      outerRadius 0.8,
      opacity: 0.8,
      offset: 0.2
    }
  }
}

Properties

type
default='point'
string

No description

settings
object

No description

Parameters

d

No description

Properties

scale
optional
string

No description

fn

No description

ref
string

A reference to a datum-extract property

Properties

settings
object

No description

experimental

Properties

style
experimental
optional, default=refline-generic-style
refline-generic-style

x coordinate

lines
experimental
object

X & Y Lines

generic-text
experimental
object

No description

line
experimental
object

No description

line-label
experimental
object

No description

line-label-background
experimental
object

No description

generic-object
experimental
object

No description

Properties

type
optional, default='text'
string

No description

text
string | function

No description

settings

Text settings

{
 type: 'text',
 text: 'my title',
 dock: 'left',
 settings: {
   anchor: 'left',
   style: {
     fill: 'red'
   }
 }
}

Properties

paddingStart
optional, default=5
number

No description

paddingEnd
optional, default=5
number

No description

paddingLeft
optional, default=0
number

No description

paddingRight
optional, default=0
number

No description

anchor
optional, default='center'
string

Where to v- or h-align the text. Supports left, right, top, bottom and center

join
optional, default=', '
string

String to add when joining titles from multiple sources

maxLengthPx
optional
number

Limit the text length to this value in pixels

Properties

key
string

Unique identifier for this data source

type
string

The dataset type

data
any

No description

Properties

field
string

The field to extract data from

value
optional

The field value accessor

label
optional

The field label accessor

trackBy
optional

Track by value accessor

reduce
optional

Reducer function

reduceLabel

Label reducer function

filter
optional

Filter function

props
optional
object

Additional properties to add to the extracted item

Parameters

cell
any

The field cell

Returns

any

No description

Parameters

cell
any

The field cell

Returns

string

No description

Parameters

cell
any

The field cell

Returns

boolean

No description

Parameters

cell
any

The field cell

Returns

any

No description

Parameters

values
Array<any>

The collected values to reduce

Returns

any

No description

Parameters

labels
Array<any>

The collected labels to reduce

value
any

Reduced value

Returns

string

No description

Properties

value
any

The extracted value

label
string

The extracted value as a string

source
object

The data source of the extracted data

dataset
()

interface

datasetkey
()

function

Get the key identifying this dataset

Returns

string

No description

datasetraw
()

function

Get the raw data

Returns

any

No description

Find a field within this dataset

Parameters

query
string

The field to find

Returns

No description

Get all fields within this dataset

Returns

Array<any>

No description

Extract data items from this dataset

Parameters

config

No description

Returns

Array<any>

No description

Returns

null

No description

field

object

fieldid
()

function

Returns this field's id

Returns

string

No description

fieldkey
()

function

Returns this field's key

Returns

string

No description

fieldraw
()

function

Returns the input data

Returns

any

No description

fieldtags
()

function

Returns the tags.

Returns

Array<any>

No description

fieldtype
()

function

Returns this field's type: 'dimension' or 'measure'.

Returns

string

No description

fieldmin
()

function

Returns the min value of this field.

Returns

number

No description

fieldmax
()

function

Returns the max value of this field.

Returns

number

No description

fieldtitle
()

function

Returns this field's title.

Returns

string

No description

fielditems
()

function

Returns the values of this field.

Returns

Array<any>

No description

Returns a formatter adapted to the content of this field.

rect

object

Properties

x
number

X-coordinate

y
number

Y-coordinate

width
number

Width

height
number

Height

line

object

Properties

x1
number

Start x-coordinate

y1
number

Start y-coordinate

x2
number

End x-coordinate

y2
number

End y-coordinate

point

object

Properties

x
number

X-coordinate

y
number

Y-coordinate

circle

object

Properties

cx
number

Center x-coordinate

cy
number

Center y-coordinate

r
number

Circle radius

polygon

object

Properties

points
Array<any>

Array of connected points

polyline

object

Properties

points
Array<any>

Array of connected points

path

object

Properties

d
string

Path definition

Returns the preferred size of a component.
The return value of the function can either be a number representing the required size in the dock direction
or an object with a size and edgeBleed property.

Parameters

inner
optional
object

No description

outer
optional
object

No description

Returns

number | object

Returns the computed preferred size

dockConfig.computePreferredSize(() => 150); // Require a size of 150 in the dock direction

dockConfig.computePreferredSize(() => ({
 size: 150,
 edgeBleed: {
   left: 50,
   right: 50
 }
})); // Require a size of 150 in the dock direction and a bleed size of 50 to the left and right dock direction

dock
(val?)

function

Set the dock direction, supported values are left | right | top | bottom. Any other value will be interpreted as center dock.

Parameters

val
optional, default=''
string

Dock direction

Returns

this

The current context

dockConfig.dock('left');

The displayOrder property is used by the layout engine to lay out components.
Components are interpreted in the ascending order of the displayOrder value. The layout engine apply the value in two ways,
the first is the order in which components are rendererd. The second is the area components are laid out in
when they have a direction, i.e. docked to either top, bottom, left or right.

If docked at the same area, the component with a higher displayOrder will be rendered
on top of the component with a lower displayOrder. It can be seen as defining a z-index.
A lower displayOrder also means that a component will be laid out first in a given direction,
i.e. laid out closer to the central area (non-directional area) then a component with a higher displayOrder.
It can in this case be seen as the x-index or y-index.

Parameters

val
optional, default=0
number

The display order

Returns

this | number

The current context or display order

dockConfig.displayOrder(99);

The prioOrder property is used to define the order in which components are added to the layout engine,
this is done before any components are laid out. When there is not enough space to add any more components
to a given area, all components not all ready added, are then discarded. The prioOrder is interpreted
in the ascending order. Such that a lower value is added to the layout engine first.

Parameters

val
optional, default=0
number

The prio order

Returns

this | number

The current context or prio order

dockConfig.prioOrder(-1);

Ger or set the minimumLayoutMode

Parameters

val
optional
string | object

The minimum layout mode

Returns

string | object | this

If no parameter is passed the current context is returned, else the current layout mode.

dockConfig.minimumLayoutMode('L');
dockConfig.minimumLayoutMode({ width: 'S', height: 'L' });

show
(val?)

function

Set the component visibility. If false the component is not added to the layout engine.

Parameters

val
optional, default=true
boolean

Toggle visibility

Returns

this | boolean

The current context or show

Properties

logicalSize
optional
object

Logical size

center
optional
object

Define how much space the center dock area requires

layoutModes
optional
object

Dictionary with named sizes

Properties

type
optional, default='band'
string

No description

padding
optional
number
paddingInner
optional
number
paddingOuter
optional
number
align
optional
number
invert
optional, default=false
boolean

Invert the output range

maxPxStep
optional
number

Explicitly limit the bandwidth to a pixel value

label
optional
function

Callback label function, applied on each datum

value
optional
function

Callback value function, applied on each datum

range
optional, default=[0, 1]
array | function

Set range explicitly (ignored when maxPxStep takes effect)

Properties

type
optional, default='categorical-color'
string

No description

range
optional, default=false
Array<any>

CSS color values of the output range

unknown
optional
string
explicit
optional
object

Explicitly bind values to an output

Properties

type
optional, default='sequential-color'
string

No description

range
optional
Array<any>

CSS color values of the output range

invert
optional, default=false
boolean

Invert range

min
optional
number

Set an explicit minimum value

max
optional
number

Set an explicit maximum value

Properties

type
optional, default='threshold-color'
string

No description

domain
optional
Array<any>

Values defining the thresholds

range
optional
Array<any>

CSS color values of the output range

invert
optional, default=false
boolean

Invert range

min
optional
number

Set an explicit minimum value

max
optional
number

Set an explicit maximum value

nice
optional, default=false
boolean

If set to true, will generate 'nice' domain values. Ignored if domain is set.

Properties

type
optional, default='linear'
string

No description

expand
optional
number

Expand the output range

invert
optional, default=false
boolean

Invert the output range

include
optional
Array<any>

Include specified numbers in the output range

ticks
optional
object

No description

minorTicks
optional
object

No description

min
optional
number

Set an explicit minimum value

max
optional
number

Set an explicit maximum value

extendsnode-def

Properties

children
Array<any>

Array of child nodes

node-def

object

Properties

type
string

No description

fill
optional
stroke
optional
strokeWidth
optional
number
strokeDasharray
optional
string | Array<any>
opacity
optional
number
transform
optional
string
data
optional
object

Data object, may contain any properties

desc
optional
object

Meta-data object, may contain any properties

tag
optional
string

White-space seperated list of tags

id
optional
string

Unique identifier of the node

collider
optional
object

No description

Properties

type
string

No description

stops
Array<any>

No description

degree
optional
number

Gradient rotation angle

experimental

Properties

type
experimental
'pattern'

No description

fill
experimental
string

No description

width
experimental
number

No description

height
experimental
number

No description

shapes
experimental
Array<any>

No description

Stripe pattern
```js
{
  type: 'pattern',
  fill: 'red',
  width: 4,
  height: 4,
  shapes: [
    { type: 'rect', x: 3, y: 0, width: 1, height: 1 },
    { type: 'rect', x: 2, y: 1, width: 1, height: 1 },
    { type: 'rect', x: 1, y: 2, width: 1, height: 1 },
    { type: 'rect', x: 0, y: 3, width: 1, height: 1 },
  ]
}
extendsnode-def

Properties

text
string

No description

x
number
y
number
dx
optional
number
dy
optional
number
fontSize
optional
string
fontFamily
optional
string
boundingRect
optional

Explicitly set the bounding rectangle of the node. Has predence over textBoundsFn

textBoundsFn
optional
function

Implicitly set the bounding rectangle of the node, the function must return an object with x, y, width and height attributes

baseline
optional
string

Alias for dominantBaseline

dominantBaseline
optional
string
anchor
optional
string

Alias for textAnchor

textAnchor
optional
string
wordBreak
optional
string

Word-break option

maxWidth
optional
number

Maximum allowed text width

maxHeight
optional
number

Maximum allowed text height. If both maxLines and maxHeight are set, the property that results in the fewest number of lines is used

maxLines
optional
number

Maximum number of lines allowed

lineHeight
optional, default=1.2
number

Line height

Read-only object representing a node on the scene.

Properties

children
Array<any>

Get child nodes

parent

Get parent node

type
string

Node type

data
any

Get the associated data

attrs
object

Node attributes

element
HTMLElement

Element the scene is attached to

key
string

Key of the component this shape belongs to

bounds

Bounding rectangle of the node. After any transform has been applied, if any, but excluding scaling transform related to devicePixelRatio.
Origin is in the top-left corner of the scene element.

localBounds

Bounding rectangle of the node withing it's local coordinate system.
Origin is in the top-left corner of the scene element.

collider

Collider of the node. Transform on the node has been applied to the collider shape, if any, but excluding scaling transform related to devicePixelRatio.
Origin is in the top-left corner of the scene element.

If node has no collider, null is returned.

desc
object

Node description

tag
string

Node tag

Bounding rectangle of the node, relative a target.

If target is an HTMLElement, the bounds are relative to the HTMLElement.
Any other target type will return the bounds relative to the viewport of the browser.

Parameters

target
HTMLElement | any

No description

includeTransform
default=true
boolean

Whether to include any applied transforms on the node

Returns

No description

node.boundsRelativeTo($('div'));
node.boundsRelativeTo('viewport');

Properties

direction
optional, default='horizontal'
string

Direction of bar ('horizontal'|'vertical').

Properties

width
optional
number

Width of the diagonals

Mandatory symbol config

Properties

options
object

Options definition may contain any of the supported display-object attributes

Properties

direction
optional, default='horizontal'
string

Direction of line ('horizontal'|'vertical').

Properties

sides
optional, default=6
object

Number of sides on the regular polygon

startAngle
optional, default=0
object

Start drawing angle

Properties

width
optional
number

Width of the diagonals

Properties

points
optional, default=5
number

Number of points on the star

startAngle
optional, default=90
number

Start drawing angle

innerRadius
optional, default=size/2
number

Size of the star core. My not exceed size of symbol.

Properties

direction
optional, default='up'
string

Direction of the triangle ('up'|'down'|'left'|'right')

Parameters

key
string

No description

value
any

No description

Properties

key
string

Component key

contexts
optional
Array<any>

Name of the brushing contexts to affect

data
optional
Array<any>

The mapped data properties to add to the brush

action
optional, default='set'
string

Type of action to respond with

Properties

brush
object

No description

Properties

brush
object

No description

direction
optional, default='vertical'
string

Rendering direction [horizontal|vertical]

bubbles
optional
object

No description

target
optional
object

No description

Properties

bubble
optional
object

No description

line
optional
object

No description

target
optional
object

No description

Properties

brush
string | object

Brush context to apply changes to

scale
string

Scale to extract data from

direction
optional, default='vertical'
string

Rendering direction [horizontal|vertical]

bubbles
optional
object

No description

target
optional
object

No description

Properties

bubble
optional
object

No description

line
optional
object

No description

target
optional
object

No description

Properties

type
default='tooltip'
string

No description

settings
object

No description

Parameters

vx
vx

X-coordinate realative to the area

vy
vy

Y-coordinate realative to the area

Create a new canvas renderer

Parameters

sceneFn
function

Scene factory

Returns

A canvas renderer instance

renderer
()

interface

Get the element this renderer is attached to

Returns

HTMLElement

No description

Get the root element of the renderer

Returns

HTMLElement

No description

Parameters

element
HTMLElement

Element to attach renderer to

Returns

HTMLElement

Root element of the renderer

Parameters

nodes
Array<any>

Nodes to render

Returns

boolean

True if the nodes where rendered, otherwise false

Get nodes renderer at area

Parameters

geometry

Get nodes that intersects with geometry

Returns

Array<any>

No description

Get all nodes matching the provided selector

Parameters

selector
string

CSS selector [type, attribute, universal, class]

Returns

Array<any>

Array of objects containing matching nodes

Clear all child elements from the renderer root element

Returns

The renderer instance

Remove the renderer root element from its parent element

Set or Get the size definition of the renderer container.

Parameters

opts

Size definition

Returns

The current size definition

Parameters

opts
object

No description

Returns

object

Width and height of text

measureText({
 text: 'my text',
 fontSize: '12px',
 fontFamily: 'Arial'
}); // returns { width: 20, height: 12 }

Calculates the bounding rectangle of a text node. Including any potential line breaks.

Parameters

node

No description

Returns

The bounding rectangle

Properties

x
optional
number

x-coordinate

y
optional
number

y-coordinate

width
optional
number

Width

height
optional
number

Height

scaleRatio
optional
object

No description

margin
optional
object

No description

Create a new svg renderer

Parameters

treeFactory
function

Node tree factory

ns
string

Namespace definition

sceneFn
function

Scene factory

Returns

A svg renderer instance