picasso.js

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

Download specification

picasso.js entry point

Parameters

cfg object
Show cfg properties
- renderer object
  
  Show renderer properties
  
  prio Array< string >
  Required
- logger object
  
  Show logger properties
  
  level 0 | 1 | 2 | 3 | 4
  Required
- style object
- palettes Array< object >

Returns

picassojs
Required
Show properties
- chart() function
  Required
  Parameters
  
  definition ChartDefinition
  Required
  
  Returns
  
  Chart
  Required
- component registry
  Required
  Component registry
- data registry
  Required
  Data registry
- formatter registry
  Required
  Formatter registry
- interaction registry
  Required
  Interaction registry
- renderer registry
  Required
  Renderer registry
- scale registry
  Required
  Scale registry
- use() function
  Required
  Plugin registry
  Parameters
  
  plugin plugin
  Required
  
  options object
- version string
  Required
  picasso.js version

Properties

component registry
Required
Component registry
Show component properties
- registry() function
  Required
  Register a value with the given key. If value is omitted, returns the value of key.
  Parameters
  
  key string
  Required
  Name of the type to register
  
  value any
  Value to store in the registry.
  
  Returns
  
  any
  Required
  Registered value
data registry
Required
Data registry
formatter registry
Required
Formatter registry
interaction registry
Required
Interaction registry
renderer registry
Required
Renderer registry
scale registry
Required
Scale registry
version string
Required
picasso.js version

picassojs

import picasso from 'picasso.js';

const configuredPicasso = picasso({ renderer: { prio: ['canvas'] } }) // All components will render using the canvas renderer

Parameters

definition ChartDefinition
Required
Show definition properties
- beforeDestroy beforeDestroy
  
  Show beforeDestroy properties
  
  beforeDestroy() function
  Required
  Called before the chart has been destroyed
- beforeMount beforeMount
  
  Show beforeMount properties
  
  beforeMount() function
  Required
  Called before the chart has been mounted
- beforeRender beforeRender
  
  Show beforeRender properties
  
  beforeRender() function
  Required
  Called before the chart has been rendered
- beforeUpdate beforeUpdate
  
  Show beforeUpdate properties
  
  beforeUpdate() function
  Required
  Called before the chart has been updated
- created created
  
  Show created properties
  
  created() function
  Required
  Called when the chart has been created
- destroyed destroyed
  
  Show destroyed properties
  
  destroyed() function
  Required
  Called after the chart has been destroyed
- mounted mounted
  
  Show mounted properties
  
  mounted() function
  Required
  Called after the chart has been mounted
  Parameters
  
  element HTMLElement
  Required
  The element the chart been mounted to
- updated updated
  
  Show updated properties
  
  updated() function
  Required
  Called after the chart has been updated
- data Array< DataSource > | DataSource
  Required
  Chart data
- element HTMLElement
  Required
  Element to attach chart to
- settings ChartSettings
  Required
  Chart settings
  
  Show settings properties
  
  components Array< ComponentTypes >
  Components
  
  scales object
  Dictionary with scale definitions
  
  formatters object
  Dictionary with formatter definitions
  
  strategy DockLayoutSettings
  Dock layout strategy
  
  Show strategy properties
  
  logicalSize object
  Logical size
  
  Show logicalSize properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
  
  preserveAspectRatio boolean
  If true, takes the smallest ratio of width/height between logical and physical size ( physical / logical )
  default = false
  
  align number
  Normalized value between 0-1. Defines how the space around the scaled axis is spread in the container, with 0.5 meaning the spread is equal on both sides. Only applicable if preserveAspectRatio is set to true
  default = 0.5
  
  center object
  Define how much space the center dock area requires
  
  Show center properties
  
  minWidthRatio number
  Value between 0 and 1
  default = 0.5
  
  minHeightRatio number
  Value between 0 and 1
  default = 0.5
  
  minWidth number
  Width in pixels
  
  minHeight number
  Height in pixels
  
  layoutModes object
  Dictionary with named sizes
  
  size object
  Size is equal to that of the container (element) of the chart by default. It's possible to overwrite it by explicitly setting width or height
  
  Show size properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
  
  interactions Array< InteractionSettings >
  Interaction handlers
  
  collections Array< CollectionSettings >
  Collections

Returns

Chart
Required
Show properties
- brush() function
  Required
  Get or create brush context for this chart
  Parameters
  
  name string
  Required
  Name of the brush context. If no match is found, a new brush context is created and returned.
  
  Returns
  
  Brush
  Required
  
  Show properties
  
  addAndRemoveValues() function
  Required
  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< object >
  Required
  Items to add
  
  removeItems Array< object >
  Required
  Items to remove
  
  addKeyAlias() function
  Required
  Adds an alias to the given key
  Parameters
  
  key string
  Required
  Value to be replaced
  
  alias string
  Required
  Value to replace key with
  
  addRange() function
  Required
  Adds a numeric range to this brush context
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to add to this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
  
  addRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to remove
  
  addValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to add
  
  addValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to add
  
  brushes() function
  Required
  Returns all brushes within this context
  Returns
  
  object
  Required
  
  clear() function
  Required
  Clears this brush context
  
  configure() function
  Required
  Configure the brush instance.
  Parameters
  
  config BrushConfig
  Required
  
  Show config properties
  
  ranges Array< Ranges >
  Range configurations
  
  containsRange() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  range object
  Required
  The range to check for
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
  
  Returns
  
  boolean
  Required
  
  containsRangeValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value number
  Required
  The value to check for
  
  Returns
  
  boolean
  Required
  
  containsValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to check for
  
  Returns
  
  boolean
  Required
  
  end() function
  Required
  Ends this brush context
  
  Ends this brush context and emits an 'end' event if it is not already ended.
  Parameters
  
  args any
  Required
  arguments to be passed to 'end' listeners
  
  intercept() function
  Required
  Adds an event interceptor
  Parameters
  
  name string
  Required
  Name of the event to intercept
  
  ic function
  Required
  Handler to call before event is triggered
  
  isActive() function
  Required
  Checks if this brush is activated
  
  Returns true if started, false otherwise
  Returns
  
  boolean
  Required
  
  link() function
  Required
  Link this brush to another brush instance.
  
  When linked, the target will receive updates whenever this brush changes.
  Parameters
  
  target Brush
  Required
  The brush instance to link to
  
  removeAllInterceptors() function
  Required
  Removes all interceptors
  Parameters
  
  name string
  Name of the event to remove interceptors for. If not provided, removes all interceptors.
  
  removeInterceptor() function
  Required
  Removes an interceptor
  Parameters
  
  name string
  Required
  Name of the event to intercept
  
  ic function
  Required
  Handler to remove
  
  removeKeyAlias() function
  Required
  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
  Required
  Value to remove as alias
  
  removeRange() function
  Required
  Removes a numeric range from this brush context
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to remove from this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
  
  removeRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to remove
  
  removeValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to remove
  
  removeValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to remove
  
  setRange() function
  Required
  Sets a numeric range to this brush context
  
  Overwrites any active ranges identified by key
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to set on this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
  
  setRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to set
  
  setValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to set
  
  start() function
  Required
  Starts this brush context
  
  Starts this brush context and emits a 'start' event if it is not already started.
  Parameters
  
  args any
  Required
  arguments to be passed to 'start' listeners
  
  toggleRange() function
  Required
  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
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to toggle in this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
  
  toggleRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to toggle
  
  toggleValue() function
  Required
  Toggles a primitive value in this brush context
  
  If the given value exists in this brush context, it will be removed. If it does not exist it will be added.
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to toggle
  
  toggleValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to toggle
- brushFromShapes() function
  Required
  Brush data by providing a collection of data bound shapes.
  Parameters
  
  shapes Array< SceneNode >
  Required
  An array of data bound shapes.
  
  config object
  Required
  Options
  
  Show config properties
  
  components Array< BrushTargetConfig >
  Required
  Array of components to include in the lookup
- component() function
  Required
  Get a component context
  Parameters
  
  key string
  Required
  Component key
  
  Returns
  
  Component
  Required
  Component context
  
  Show properties
  
  type string
  Required
  Type of component
  
  key string
  Required
  Key of the component
- componentsFromPoint() function
  Required
  Get components overlapping a point.
  Parameters
  
  p Point
  Required
  Point with x- and y-coordinate. The coordinate is relative to the browser viewport.
  
  Show p properties
  
  x number
  Required
  X-coordinate
  
  y number
  Required
  Y-coordinate
  
  Returns
  
  Array< Component >
  Required
  Array of component contexts
- dataset() function
  Required
  Get
  Parameters
  
  key string
  Required
  Get the dataset identified by key
  
  Returns
  
  Dataset
  Required
  
  Show properties
  
  extract() function
  Required
  Extract data items from this dataset
  Parameters
  
  config Extract | DataFieldExtraction
  Required
  
  Returns
  
  Array< DatumExtract >
  Required
  
  field() function
  Required
  Find a field within this dataset
  Parameters
  
  query string
  Required
  The field to find
  
  Returns
  
  Field
  Required
  
  Show properties
  
  formatter() function
  Required
  Returns a formatter adapted to the content of this field.
  
  id() function
  Required
  Returns this field's id
  Returns
  
  string
  Required
  
  items() function
  Required
  Returns the values of this field.
  Returns
  
  Array< DatumExtract >
  Required
  
  key() function
  Required
  Returns this field's key
  Returns
  
  string
  Required
  
  max() function
  Required
  Returns the max value of this field.
  Returns
  
  number
  Required
  
  min() function
  Required
  Returns the min value of this field.
  Returns
  
  number
  Required
  
  raw() function
  Required
  Returns the input data
  Returns
  
  any
  Required
  
  tags() function
  Required
  Returns the tags.
  Returns
  
  Array< string >
  Required
  
  title() function
  Required
  Returns this field's title.
  Returns
  
  string
  Required
  
  type() function
  Required
  Returns this field's type: 'dimension' or 'measure'.
  Returns
  
  string
  Required
  
  fields() function
  Required
  Get all fields within this dataset
  Returns
  
  Array< Field >
  Required
  
  hierarchy() function
  Required
  Returns
  
  null
  Required
  
  key() function
  Required
  Get the key identifying this dataset
  Returns
  
  string
  Required
  
  raw() function
  Required
  Get the raw data
  Returns
  
  any
  Required
- destroy() function
  Required
  Destroy the chart instance.
- findShapes() function
  Required
  Get all nodes matching the provided selector
  Parameters
  
  selector string
  Required
  CSS selector [type, attribute, universal, class]
  
  Returns
  
  Array< SceneNode >
  Required
  Array of objects containing matching nodes
- formatter() function
  Required
  Get or create a formatter for this chart
  Parameters
  
  v string | object
  Required
  Formatter reference or formatter options
  
  Returns
  
  formatter
  Required
  
  Show properties
  
  formatter() function
  Required
  Returns
  
  any
  Required
  Returns a formatted value
- formatters() function
  Required
  Get all registered formatters
  Returns
  
  object
  Required
- getAffectedShapes() function
  Required
  Get all shapes associated with the provided context
  Parameters
  
  context string
  Required
  The brush context
  
  mode string
  Required
  Property comparison mode.
  
  props Array< string >
  Required
  Which specific data properties to compare
  
  key string
  Required
  Which component to get shapes from. Default gives shapes from all components.
  
  Returns
  
  Array< object >
  Required
  Array of objects containing shape and parent element
- interactions object
  Required
  Get all interaction instances
  
  Show interactions properties
  
  instances Array< Interaction >
  Required
  
  off() function
  Required
  Disable all interaction instances
  
  on() function
  Required
  Enable all interaction instances
- layoutComponents() function
  RequiredExperimental
  Layout the chart with new settings and / or data
  Parameters
  
  def object
  New chart definition
  
  Show def properties
  
  data Array< DataSource > | DataSource
  Chart data
  
  settings ChartSettings
  Chart settings
  
  excludeFromUpdate Array< string >
  Keys of components to not include in the layout
  default = "[]"
- scale() function
  Required
  Get or create a scale for this chart
  Parameters
  
  v string | object
  Required
  Scale reference or scale options
  
  Returns
  
  Scale
  Required
  
  Show properties
  
  type string
  Required
  Type of scale
- scales() function
  Required
  Get all registered scales
  Returns
  
  object
  Required
- shapesAt() function
  Required
  Get all nodes colliding with a geometrical shape (circle, line, rectangle, point, polygon, geopolygon).
  
  The input shape is identified based on the geometrical attributes in the following order: circle => line => rectangle => point => polygon => geopolygon. Note that not all nodes on a scene have collision detection enabled.
  Parameters
  
  shape Line | Rect | Point | Circle
  Required
  A geometrical shape. Coordinates are relative to the top-left corner of the chart instance container.
  
  opts object
  Required
  Options
  
  Show opts properties
  
  components Array< object >
  Array of components to include in the lookup. If no components are specified, all components will be included.
  
  propagation string
  if set to stop, will start lookup on top visible component and propagate downwards until a component has at least a match.
  
  Returns
  
  Array< SceneNode >
  Required
  Array of objects containing colliding nodes
- toggleBrushing() function
  Required
  Parameters
  
  val boolean
  Toggle brushing on or off. If value is omitted, a toggle action is applied to the current state.
- update() function
  Required
  Update the chart with new settings and / or data
  Parameters
  
  def object
  New chart definition
  
  Show def properties
  
  data Array< DataSource > | DataSource
  Chart data
  
  settings ChartSettings
  Chart settings
  
  partialData boolean
  If set to true, will trigger a data update only. Meaning the layout will not be updated
  default = false
  
  excludeFromUpdate Array< string >
  Keys of components to not include in the update
  default = "[]"

chart

picasso.chart({
    element: document.querySelector('#container'), // This is the element to render the chart in
    data: [
      {
        type: 'matrix',
        data: [
          ['Month', 'Sales', 'Margin'],
          ['Jan', 1106, 7],
          ['Feb', 5444, 53],
          ['Mar', 147, 64],
          ['Apr', 7499, 47],
          ['May', 430, 62],
          ['June', 9735, 13],
          ['July', 5832, 13],
          ['Aug', 7435, 15],
          ['Sep', 3467, 35],
          ['Oct', 3554, 78],
          ['Nov', 5633, 23],
          ['Dec', 6354, 63],
        ],
      },
    ],
    settings: {
      scales: {
        x: { data: { field: 'Margin' } },
        y: { data: { field: 'Sales' } },
      },
      components: [
        {
          // specify how to render the chart
          type: 'axis',
          scale: 'y',
          layout: {
            dock: 'left',
          },
        },
        {
          type: 'axis',
          scale: 'x',
          layout: {
            dock: 'bottom',
          },
        },
        {
          type: 'point',
          data: {
            extract: {
              field: 'Month',
              props: {
                x: { field: 'Margin' },
                y: { field: 'Sales' },
              },
            },
          },
          settings: {
            x: { scale: 'x' },
            y: { scale: 'y' },
            size: function () {
              return Math.random();
            },
          },
        },
      ],
    },
  });

Plugin registry

Parameters

plugin plugin
Required
Show plugin properties
- plugin() function
  Required
  Callback function to register a plugin
  Parameters
  
  registries Registries
  Required
  
  Show registries properties
  
  component registry
  Required
  Component registry
  
  data registry
  Required
  Data registry
  
  formatter registry
  Required
  Formatter registry
  
  interaction registry
  Required
  Interaction registry
  
  renderer registry
  Required
  Renderer registry
  
  scale registry
  Required
  Scale registry
  
  options object
  Required
options object

Properties

startAngle number
Required
Start of arc line, in radians
endAngle number
Required
End of arc line, in radians
radius number
Required
Radius of arc line

A brush context

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< object >
Required
Items to add
removeItems Array< object >
Required
Items to remove

Adds an alias to the given key

Parameters

key string
Required
Value to be replaced
alias string
Required
Value to replace key with

addKeyAlias

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

Adds a numeric range to this brush context

Parameters

key string
Required
An identifier that represents the data source of the range
range object
Required
The range to add to this brush
Show range properties
- min number
  Required
  Min value of the range
- max number
  Required
  Max value of the range

addRange

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

Parameters

items Array< object >
Required
Items containing the ranges to remove

emits start update

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
Required
An identifier that represents the data source of the value
value string | number
Required
The value to add

addValue

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

Parameters

items Array< object >
Required
Items to add

Returns all brushes within this context

Returns

object
Required

Clears this brush context

Configure the brush instance.

Parameters

config BrushConfig
Required
Show config properties
- ranges Array< Ranges >
  Range configurations

configure

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

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
Required
An identifier that represents the data source of the value
range object
Required
The range to check for
Show range properties
- min number
  Required
  Min value of the range
- max number
  Required
  Max value of the range

Returns

boolean
Required

containsRange

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]

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
Required
An identifier that represents the data source of the value
value number
Required
The value to check for

Returns

boolean
Required

containsRangeValue

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

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
Required
An identifier that represents the data source of the value
value string | number
Required
The value to check for

Returns

boolean
Required

containsValue

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

emits end

Ends this brush context

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

Parameters

args any
Required
arguments to be passed to 'end' listeners

Adds an event interceptor

Parameters

name string
Required
Name of the event to intercept
ic function
Required
Handler to call before event is triggered

intercept

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

Checks if this brush is activated

Returns true if started, false otherwise

Returns

boolean
Required

Link this brush to another brush instance.

When linked, the target will receive updates whenever this brush changes.

Parameters

target Brush
Required
The brush instance to link to

Removes all interceptors

Parameters

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

Removes an interceptor

Parameters

name string
Required
Name of the event to intercept
ic function
Required
Handler to remove

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
Required
Value to remove as alias

removeKeyAlias

brush.removeKeyAlias('BadFieldName');

Removes a numeric range from this brush context

Parameters

key string
Required
An identifier that represents the data source of the range
range object
Required
The range to remove from this brush
Show range properties
- min number
  Required
  Min value of the range
- max number
  Required
  Max value of the range

Parameters

items Array< object >
Required
Items containing the ranges to remove

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
Required
An identifier that represents the data source of the value
value string | number
Required
The value to remove

removeValue

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

Parameters

items Array< object >
Required
Items to remove

Sets a numeric range to this brush context

Overwrites any active ranges identified by key

Parameters

key string
Required
An identifier that represents the data source of the range
range object
Required
The range to set on this brush
Show range properties
- min number
  Required
  Min value of the range
- max number
  Required
  Max value of the range

Parameters

items Array< object >
Required
Items containing the ranges to set

Parameters

items Array< object >
Required
Items to set

emits start

Starts this brush context

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

Parameters

args any
Required
arguments to be passed to 'start' listeners

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
Required
An identifier that represents the data source of the range
range object
Required
The range to toggle in this brush
Show range properties
- min number
  Required
  Min value of the range
- max number
  Required
  Max value of the range

Parameters

items Array< object >
Required
Items containing the ranges to toggle

Toggles a primitive value in this brush context

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

Parameters

key string
Required
An identifier that represents the data source of the value
value string | number
Required
The value to toggle

toggleValue

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

Parameters

items Array< object >
Required
Items to toggle

Triggered when this brush is deactivated

Triggered when this brush is activated

Triggered when this brush is updated

Parameters

added Array< object >
Required
The added items
removed Array< object >
Required
The removed items

Properties

ranges Array< Ranges >
Range configurations

Properties

context string
Name of the brush context to observe
data Array< string >
The mapped data properties to observe
mode string
Data properties operator: and, or, xor.
filter function
Filtering function
style object
The style to apply to the shapes of the component
Show style properties
- active object
  The style of active data points
- inactive object
  The style of inactive data points

BrushConsumeSettings

{
   context: 'selection',
   data: ['x'],
   filter: (shape) => shape.type === 'circle',
   style: {
     active: {
       fill: 'red',
       stroke: '#333',
       strokeWidth: (shape) => shape.strokeWidth * 2,
     },
     inactive: {},
   },
}

Properties

key string
Required
Component key
contexts Array< string >
Name of the brushing contexts to affect
data Array< string >
The mapped data properties to add to the brush
action string
Type of action to respond with
default = "set"

Properties

on string
Type of interaction to trigger brush on
action string
Type of interaction to respond with
contexts Array< string >
Name of the brushing contexts to affect
data Array< string >
The mapped data properties to add to the brush
propagation string
Control the event propagation when multiple shapes are tapped. Disabled by default
globalPropagation string
Control the event propagation between components. Disabled by default
touchRadius number
Extend contact area for touch events. Disabled by default
mouseRadius number
Extend contact area for regular mouse events. Disabled by default

BrushTriggerSettings

{
   on: 'tap',
   action: 'toggle',
   contexts: ['selection', 'tooltip'],
   data: ['x'],
   propagation: 'stop', // 'stop' => prevent trigger from propagating further than the first shape
   globalPropagation: 'stop', // 'stop' => prevent trigger of same type to be triggered on other components
   touchRadius: 24,
   mouseRadius: 10
 }

Create a new canvas renderer

Parameters

sceneFn function
Scene factory

Returns

Renderer
Required
A canvas renderer instance
Show properties
- appendTo() function
  Required
  Parameters
  
  element HTMLElement
  Required
  Element to attach renderer to
  
  Returns
  
  HTMLElement
  Required
  Root element of the renderer
- clear() function
  Required
  Clear all child elements from the renderer root element
  Returns
  
  Renderer
  Required
  The renderer instance
- destory() function
  Required
  Remove the renderer root element from its parent element
- element() function
  Required
  Get the element this renderer is attached to
  Returns
  
  HTMLElement
  Required
- findShapes() function
  Required
  Get all nodes matching the provided selector
  Parameters
  
  selector string
  Required
  CSS selector [type, attribute, universal, class]
  
  Returns
  
  Array< SceneNode >
  Required
  Array of objects containing matching nodes
- itemsAt() function
  Required
  Get nodes renderer at area
  Parameters
  
  geometry Point | Circle | Rect | Line | Polygon | Geopolygon
  Required
  Get nodes that intersects with geometry
  
  Returns
  
  Array< SceneNode >
  Required
- measureText() function
  Required
  Parameters
  
  opts object
  Required
  
  Show opts properties
  
  text string
  Required
  Text to measure
  
  fontSize string
  Required
  Font size
  
  fontFamily string
  Required
  Font family
  
  Returns
  
  object
  Required
  Width and height of text
- render() function
  Required
  Parameters
  
  nodes Array< object >
  Required
  Nodes to render
  
  Returns
  
  boolean
  Required
  True if the nodes were rendered, otherwise false
- root() function
  Required
  Get the root element of the renderer
  Returns
  
  HTMLElement
  Required
- settings() function
  Required
  Set or Get renderer settings
  Parameters
  
  settings object
  Settings for the renderer
- size() function
  Required
  Set or Get the size definition of the renderer container.
  Parameters
  
  opts SizeDefinition
  Size definition
  
  Show opts properties
  
  x number
  x-coordinate
  
  y number
  y-coordinate
  
  width number
  Width
  
  height number
  Height
  
  scaleRatio object
  
  Show scaleRatio properties
  
  x number
  Scale ratio on x-axis
  
  y number
  Scale ratio on y-axis
  
  margin object
  
  Show margin properties
  
  left number
  Left margin
  
  top number
  Top margin
  
  Returns
  
  SizeDefinition
  Required
  The current size definition

Chart instance

Properties

interactions object
Required
Get all interaction instances
Show interactions properties
- instances Array< Interaction >
  Required
- off() function
  Required
  Disable all interaction instances
- on() function
  Required
  Enable all interaction instances

Get or create brush context for this chart

Parameters

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

Returns

Brush
Required
Show properties
- addAndRemoveValues() function
  Required
  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< object >
  Required
  Items to add
  
  removeItems Array< object >
  Required
  Items to remove
- addKeyAlias() function
  Required
  Adds an alias to the given key
  Parameters
  
  key string
  Required
  Value to be replaced
  
  alias string
  Required
  Value to replace key with
- addRange() function
  Required
  Adds a numeric range to this brush context
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to add to this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
- addRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to remove
- addValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to add
- addValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to add
- brushes() function
  Required
  Returns all brushes within this context
  Returns
  
  object
  Required
- clear() function
  Required
  Clears this brush context
- configure() function
  Required
  Configure the brush instance.
  Parameters
  
  config BrushConfig
  Required
  
  Show config properties
  
  ranges Array< Ranges >
  Range configurations
- containsRange() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  range object
  Required
  The range to check for
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
  
  Returns
  
  boolean
  Required
- containsRangeValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value number
  Required
  The value to check for
  
  Returns
  
  boolean
  Required
- containsValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to check for
  
  Returns
  
  boolean
  Required
- end() function
  Required
  Ends this brush context
  
  Ends this brush context and emits an 'end' event if it is not already ended.
  Parameters
  
  args any
  Required
  arguments to be passed to 'end' listeners
- intercept() function
  Required
  Adds an event interceptor
  Parameters
  
  name string
  Required
  Name of the event to intercept
  
  ic function
  Required
  Handler to call before event is triggered
- isActive() function
  Required
  Checks if this brush is activated
  
  Returns true if started, false otherwise
  Returns
  
  boolean
  Required
- link() function
  Required
  Link this brush to another brush instance.
  
  When linked, the target will receive updates whenever this brush changes.
  Parameters
  
  target Brush
  Required
  The brush instance to link to
- removeAllInterceptors() function
  Required
  Removes all interceptors
  Parameters
  
  name string
  Name of the event to remove interceptors for. If not provided, removes all interceptors.
- removeInterceptor() function
  Required
  Removes an interceptor
  Parameters
  
  name string
  Required
  Name of the event to intercept
  
  ic function
  Required
  Handler to remove
- removeKeyAlias() function
  Required
  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
  Required
  Value to remove as alias
- removeRange() function
  Required
  Removes a numeric range from this brush context
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to remove from this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
- removeRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to remove
- removeValue() function
  Required
  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
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to remove
- removeValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to remove
- setRange() function
  Required
  Sets a numeric range to this brush context
  
  Overwrites any active ranges identified by key
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to set on this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
- setRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to set
- setValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to set
- start() function
  Required
  Starts this brush context
  
  Starts this brush context and emits a 'start' event if it is not already started.
  Parameters
  
  args any
  Required
  arguments to be passed to 'start' listeners
- toggleRange() function
  Required
  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
  Required
  An identifier that represents the data source of the range
  
  range object
  Required
  The range to toggle in this brush
  
  Show range properties
  
  min number
  Required
  Min value of the range
  
  max number
  Required
  Max value of the range
- toggleRanges() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items containing the ranges to toggle
- toggleValue() function
  Required
  Toggles a primitive value in this brush context
  
  If the given value exists in this brush context, it will be removed. If it does not exist it will be added.
  Parameters
  
  key string
  Required
  An identifier that represents the data source of the value
  
  value string | number
  Required
  The value to toggle
- toggleValues() function
  Required
  Parameters
  
  items Array< object >
  Required
  Items to toggle

Brush data by providing a collection of data bound shapes.

Parameters

shapes Array< SceneNode >
Required
An array of data bound shapes.
config object
Required
Options
Show config properties
- components Array< BrushTargetConfig >
  Required
  Array of components to include in the lookup

brushFromShapes

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

Get a component context

Parameters

key string
Required
Component key

Returns

Component
Required
Component context
Show properties
- type string
  Required
  Type of component
- key string
  Required
  Key of the component

Get components overlapping a point.

Parameters

p Point
Required
Point with x- and y-coordinate. The coordinate is relative to the browser viewport.
Show p properties
- x number
  Required
  X-coordinate
- y number
  Required
  Y-coordinate

Returns

Array< Component >
Required
Array of component contexts

Get

Parameters

key string
Required
Get the dataset identified by key

Returns

Dataset
Required
Show properties
- extract() function
  Required
  Extract data items from this dataset
  Parameters
  
  config Extract | DataFieldExtraction
  Required
  
  Returns
  
  Array< DatumExtract >
  Required
- field() function
  Required
  Find a field within this dataset
  Parameters
  
  query string
  Required
  The field to find
  
  Returns
  
  Field
  Required
  
  Show properties
  
  formatter() function
  Required
  Returns a formatter adapted to the content of this field.
  
  id() function
  Required
  Returns this field's id
  Returns
  
  string
  Required
  
  items() function
  Required
  Returns the values of this field.
  Returns
  
  Array< DatumExtract >
  Required
  
  key() function
  Required
  Returns this field's key
  Returns
  
  string
  Required
  
  max() function
  Required
  Returns the max value of this field.
  Returns
  
  number
  Required
  
  min() function
  Required
  Returns the min value of this field.
  Returns
  
  number
  Required
  
  raw() function
  Required
  Returns the input data
  Returns
  
  any
  Required
  
  tags() function
  Required
  Returns the tags.
  Returns
  
  Array< string >
  Required
  
  title() function
  Required
  Returns this field's title.
  Returns
  
  string
  Required
  
  type() function
  Required
  Returns this field's type: 'dimension' or 'measure'.
  Returns
  
  string
  Required
- fields() function
  Required
  Get all fields within this dataset
  Returns
  
  Array< Field >
  Required
- hierarchy() function
  Required
  Returns
  
  null
  Required
- key() function
  Required
  Get the key identifying this dataset
  Returns
  
  string
  Required
- raw() function
  Required
  Get the raw data
  Returns
  
  any
  Required

Destroy the chart instance.

Get all nodes matching the provided selector

Parameters

selector string
Required
CSS selector [type, attribute, universal, class]

Returns

Array< SceneNode >
Required
Array of objects containing matching nodes

findShapes

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

Get or create a formatter for this chart

Parameters

v string | object
Required
Formatter reference or formatter options

Returns

formatter
Required
Show properties
- formatter() function
  Required
  Returns
  
  any
  Required
  Returns a formatted value

formatter

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

Get all registered formatters

Returns

object
Required

Get all shapes associated with the provided context

Parameters

context string
Required
The brush context
mode string
Required
Property comparison mode.
props Array< string >
Required
Which specific data properties to compare
key string
Required
Which component to get shapes from. Default gives shapes from all components.

Returns

Array< object >
Required
Array of objects containing shape and parent element

Layout the chart with new settings and / or data

Parameters

def object
New chart definition
Show def properties
- data Array< DataSource > | DataSource
  Chart data
- settings ChartSettings
  Chart settings
  
  Show settings properties
  
  components Array< ComponentTypes >
  Components
  
  scales object
  Dictionary with scale definitions
  
  formatters object
  Dictionary with formatter definitions
  
  strategy DockLayoutSettings
  Dock layout strategy
  
  Show strategy properties
  
  logicalSize object
  Logical size
  
  Show logicalSize properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
  
  preserveAspectRatio boolean
  If true, takes the smallest ratio of width/height between logical and physical size ( physical / logical )
  default = false
  
  align number
  Normalized value between 0-1. Defines how the space around the scaled axis is spread in the container, with 0.5 meaning the spread is equal on both sides. Only applicable if preserveAspectRatio is set to true
  default = 0.5
  
  center object
  Define how much space the center dock area requires
  
  Show center properties
  
  minWidthRatio number
  Value between 0 and 1
  default = 0.5
  
  minHeightRatio number
  Value between 0 and 1
  default = 0.5
  
  minWidth number
  Width in pixels
  
  minHeight number
  Height in pixels
  
  layoutModes object
  Dictionary with named sizes
  
  size object
  Size is equal to that of the container (element) of the chart by default. It's possible to overwrite it by explicitly setting width or height
  
  Show size properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
  
  interactions Array< InteractionSettings >
  Interaction handlers
  
  collections Array< CollectionSettings >
  Collections
- excludeFromUpdate Array< string >
  Keys of components to not include in the layout
  default = "[]"

Get or create a scale for this chart

Parameters

v string | object
Required
Scale reference or scale options

Returns

Scale
Required
Show properties
- type string
  Required
  Type of scale

scale

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 all registered scales

Returns

object
Required

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

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

Parameters

shape Line | Rect | Point | Circle
Required
A geometrical shape. Coordinates are relative to the top-left corner of the chart instance container.
opts object
Required
Options
Show opts properties
- components Array< object >
  Array of components to include in the lookup. If no components are specified, all components will be included.
- propagation string
  if set to stop, will start lookup on top visible component and propagate downwards until a component has at least a match.

Returns

Array< SceneNode >
Required
Array of objects containing colliding nodes

shapesAt

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

Parameters

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

Update the chart with new settings and / or data

Parameters

def object
New chart definition
Show def properties
- data Array< DataSource > | DataSource
  Chart data
- settings ChartSettings
  Chart settings
- partialData boolean
  If set to true, will trigger a data update only. Meaning the layout will not be updated
  default = false
- excludeFromUpdate Array< string >
  Keys of components to not include in the update
  default = "[]"

Properties

beforeDestroy beforeDestroy
Show beforeDestroy properties
- beforeDestroy() function
  Required
  Called before the chart has been destroyed
beforeMount beforeMount
Show beforeMount properties
- beforeMount() function
  Required
  Called before the chart has been mounted
beforeRender beforeRender
Show beforeRender properties
- beforeRender() function
  Required
  Called before the chart has been rendered
beforeUpdate beforeUpdate
Show beforeUpdate properties
- beforeUpdate() function
  Required
  Called before the chart has been updated
created created
Show created properties
- created() function
  Required
  Called when the chart has been created
destroyed destroyed
Show destroyed properties
- destroyed() function
  Required
  Called after the chart has been destroyed
mounted mounted
Show mounted properties
- mounted() function
  Required
  Called after the chart has been mounted
  Parameters
  
  element HTMLElement
  Required
  The element the chart been mounted to
updated updated
Show updated properties
- updated() function
  Required
  Called after the chart has been updated
data Array< DataSource > | DataSource
Required
Chart data
element HTMLElement
Required
Element to attach chart to
settings ChartSettings
Required
Chart settings
Show settings properties
- components Array< ComponentTypes >
  Components
- scales object
  Dictionary with scale definitions
- formatters object
  Dictionary with formatter definitions
- strategy DockLayoutSettings
  Dock layout strategy
  
  Show strategy properties
  
  logicalSize object
  Logical size
  
  Show logicalSize properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
  
  preserveAspectRatio boolean
  If true, takes the smallest ratio of width/height between logical and physical size ( physical / logical )
  default = false
  
  align number
  Normalized value between 0-1. Defines how the space around the scaled axis is spread in the container, with 0.5 meaning the spread is equal on both sides. Only applicable if preserveAspectRatio is set to true
  default = 0.5
  
  center object
  Define how much space the center dock area requires
  
  Show center properties
  
  minWidthRatio number
  Value between 0 and 1
  default = 0.5
  
  minHeightRatio number
  Value between 0 and 1
  default = 0.5
  
  minWidth number
  Width in pixels
  
  minHeight number
  Height in pixels
  
  layoutModes object
  Dictionary with named sizes
  
  size object
  Size is equal to that of the container (element) of the chart by default. It's possible to overwrite it by explicitly setting width or height
  
  Show size properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
- interactions Array< InteractionSettings >
  Interaction handlers
- collections Array< CollectionSettings >
  Collections

Properties

components Array< ComponentTypes >
Components
scales object
Dictionary with scale definitions
formatters object
Dictionary with formatter definitions
strategy DockLayoutSettings
Dock layout strategy
Show strategy properties
- logicalSize object
  Logical size
  
  Show logicalSize properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
  
  preserveAspectRatio boolean
  If true, takes the smallest ratio of width/height between logical and physical size ( physical / logical )
  default = false
  
  align number
  Normalized value between 0-1. Defines how the space around the scaled axis is spread in the container, with 0.5 meaning the spread is equal on both sides. Only applicable if preserveAspectRatio is set to true
  default = 0.5
- center object
  Define how much space the center dock area requires
  
  Show center properties
  
  minWidthRatio number
  Value between 0 and 1
  default = 0.5
  
  minHeightRatio number
  Value between 0 and 1
  default = 0.5
  
  minWidth number
  Width in pixels
  
  minHeight number
  Height in pixels
- layoutModes object
  Dictionary with named sizes
- size object
  Size is equal to that of the container (element) of the chart by default. It's possible to overwrite it by explicitly setting width or height
  
  Show size properties
  
  width number
  Width in pixels
  
  height number
  Height in pixels
interactions Array< InteractionSettings >
Interaction handlers
collections Array< CollectionSettings >
Collections

Properties

cx number
Required
Center x-coordinate
cy number
Required
Center y-coordinate
r number
Required
Circle radius

Properties

key string
Required
Unique key for the collection
data DataExtraction
Required
Data configuration
Show data properties
- extract Extract | Array< Extract >
  Required
  Extract definition
- stack object
  If provided, defines how the data should be stacked
  
  Show stack properties
  
  stackKey StackKeyCallback
  Required
  Callback function. Should return the key to stack by
  
  Show stackKey properties
  
  StackKeyCallback() function
  Required
  Callback function. Should return the key to stack by
  Parameters
  
  datum DatumExtract
  Required
  The extracted datum
  
  Returns
  
  any
  Required
  The data value to stack by
  
  value StackValueCallback
  Required
  Callback function. Should return the data value to stack with
  
  Show value properties
  
  StackValueCallback() function
  Required
  Callback function. Should return the data value to stack with
  Parameters
  
  datum DatumExtract
  Required
  The extracted datum
  
  Returns
  
  any
  Required
  The data value to stack with
- filter FilterCallback
  Callback function to filter the extracted data items
  
  Show filter properties
  
  FilterCallback() function
  Required
  Callback function to filter the extracted data items
  Parameters
  
  datum DatumExtract
  Required
  The extracted datum
  
  Returns
  
  boolean
  Required
  Return true if the datum should be included in the final data set
- sort SortCallback
  Callback function to sort the extracted data items
  
  Show sort properties
  
  SortCallback() function
  Required
  Callback function to sort the extracted data items
  Parameters
  
  a DatumExtract
  Required
  The extracted datum
  
  b DatumExtract
  Required
  The extracted datum
  
  Returns
  
  number
  Required
  If less than 0, sort a before b. If greater than 0, sort b before a

CollectionSettings

{
    key: 'my-collection',
    data: {
      extract: [{
        source: 'Products',
        field: 'Product',
        value: d => d.name,
        label: d => `<${d.name}>`
        props: {
          year: { field: 'Year' }
          num: { field: 'Sales' }
        }
      }],
      filter: d => d.label !== 'Sneakers', // extract everything except Sneakers
      sort: (a, b) => a.label > b.label ? -1 : 1, // sort descending
    }
}

Component instance

Properties

type string
Required
Type of component
key string
Required
Key of the component

extends ComponentSettings

Properties

type 'axis'
Required
component type
scale string
Required
reference to band or linear scale
settings DiscreteSettings | ContinuousSettings
discrete or continuous axis settings

ComponentAxis

{
 type: 'axis',
 scale: '<name-of-scale>'
}

extends ComponentSettings

Properties

type 'box'
Required
component type
data object
Required
Show data properties
- min number
  Min
- max number
  Max
- start number
  Start of box
- end number
  End of box
- med number
  Median
settings object
Required
Show settings properties
- major object
  Required
  
  Show major properties
  
  scale string
  Required
  The scale to use along the major (dimension) axis
  
  ref string | MajorReference
  Reference to the data property along the major axis
  default = "self"
- minor object
  Required
  
  Show minor properties
  
  scale string
  Required
  The scale to use along the minor (measure) axis
- orientation string
  Which orientation to use (vertical or horizontal)
  default = "vertical"
- box object
  Visual properties for the box shape in the box marker
  
  Show box properties
  
  show boolean
  Boolean for showing the box shape
  default = true
  
  fill string
  default = "#fff"
  
  stroke string
  default = "#000"
  
  strokeWidth number
  default = 1
  
  strokeLinejoin string
  default = "miter"
  
  width number
  default = 1
  
  maxWidthPx number
  Maximum width of the box in pixels (not applicable when using major start and end)
  default = 100
  
  minWidthPx number
  Minimum width of the box in pixels (not applicable when using major start and end)
  default = 1
  
  minHeightPx number
  Minimum height of the box shape
  default = 1
- line object
  Visual properties for lines between min-start, end-max.
  
  Show line properties
  
  show boolean
  default = true
  
  stroke string
  default = "#000"
  
  strokeWidth number
  default = 1
- whisker object
  All the visual properties for whiskers at min and max.
  
  Show whisker properties
  
  show boolean
  default = true
  
  stroke string
  default = "#000"
  
  strokeWidth number
  default = 1
  
  width number
  default = 1
- median object
  Visual properties for the median
  
  Show median properties
  
  show boolean
  default = true
  
  stroke string
  default = "#000"
  
  strokeWidth number
  default = 1
- oob object
  EXPERIMENTAL: Out of bounds symbol utilizing the symbol API
  
  Show oob properties
  
  show boolean
  default = true
  
  type string
  Type of the symbol to be used
  default = "n-polygon"
  
  fill string
  Fill color of the symbol
  default = "#999"
  
  stroke string
  Stroke color
  default = "#000"
  
  strokeWidth number
  Stroke width
  default = 0
  
  size number
  Size/width of the symbol in pixels
  default = 10
  
  sides number
  Number of sides for a n-polygon (3 for triangle)
  default = 3

ComponentBox

{
  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"] }
   }
 }
}

extends ComponentSettings

A component that can brush a rectangular area

Properties

type 'brush-area'
Required
component type
settings object
Required
Show settings properties
- brush object
  Required
  
  Show brush properties
  
  components Array< BrushTargetConfig >
  Required

ComponentBrushArea

{
 type: 'brush-area',
 brush: {
   components: [{ key: '<target-component>', contexts: ['highlight'] }]
 }
}

extends ComponentSettings

Properties

type 'brush-area-dir'
Required
component type
settings object
Required
Show settings properties
- brush object
  Required
  
  Show brush properties
  
  components Array< BrushTargetConfig >
  Required
- direction string
  Rendering direction [horizontal|vertical]
  default = "vertical"
- bubbles object
  
  Show bubbles properties
  
  show boolean
  True to show label bubble, false otherwise
  default = true
  
  align string
  Where to anchor bubble [start|end]
  default = "start"
  
  label function
  Callback function for the labels
- target object
  
  Show target properties
  
  components Array< string >
  Render matching overlay on target components

extends ComponentSettings

Properties

type 'brush-lasso'
Required
component type
settings object
Required
Component settings
Show settings properties
- lasso object
  Lasso style settings
  
  Show lasso properties
  
  fill string
  default = "transparent"
  
  stroke string
  default = "black"
  
  strokeWidth number
  default = 2
  
  opacity number
  default = 0.7
  
  strokeDasharray number
- snapIndicator object
  Snap indicator settings
  
  Show snapIndicator properties
  
  threshold number
  The distance in pixel to show the snap indicator, if less then threshold the indicator is dispalyed
  default = 75
  
  strokeDasharray string
  default = "5, 5"
  
  stroke string
  default = "black"
  
  strokeWidth number
  default = 2
  
  opacity number
  default = 0.5
- startPoint object
  Start point style settings
  
  Show startPoint properties
  
  r number
  Circle radius
  default = 10
  
  stroke string
  default = "green"
  
  strokeWidth number
  default = 1
  
  opacity number
  default = 1
- brush object
  
  Show brush properties
  
  components Array< object >
  Required
  Array of components to brush on.

ComponentBrushLasso

{
 type: 'brush-lasso',
 settings: {
   brush: {
     components: [{ key: '<target-component>', contexts: ['<brush-context>'] }]
   }
 },
}

extends ComponentSettings

Properties

type 'brush-range'
Required
component type
settings object
Required
Show settings properties
- brush string | object
  Required
  Brush context to apply changes to
- scale string
  Required
  Scale to extract data from
- direction string
  Rendering direction [horizontal|vertical]
  default = "vertical"
- bubbles object
  
  Show bubbles properties
  
  show boolean
  True to show label bubble, false otherwise
  default = true
  
  align string
  Where to anchor bubble [start|end]
  default = "start"
  
  label function
  Callback function for the labels
- target object
  
  Show target properties
  
  components Array< string >
  Render matching overlay on target components
  
  selector string
  Instead of targeting a component, target one or more shapes
  
  fillSelector string
  Target a subset of the selector as fill area. Only applicable if selector property is set

extends ComponentSettings

Properties

type 'container'
Required
component type

ComponentContainer

{
 type: 'container',
 preferredSize: ({ inner, outer, dock, children }) => {
   const sizes = children.map(c => c.preferredSize({ inner, outer }));
   return Math.max(...sizes);
 },
 strategy: (rect, components) => {
   const height = rect.height / components.length;
   components.forEach((c, i) => {
     c.resize({ ...rect, height, y: rect.y + i * height })
   });
   return { visible: components, hidden: [], order: components };
 },
 components: [
    ...
 ],
}

extends ComponentSettings

Properties

type 'grid-line'
Required
component type
settings object
Required
Component settings
Show settings properties
- x object
  Required
  
  Show x properties
  
  scale string
  Required
  The scale to use along x
- y object
  Required
  
  Show y properties
  
  scale string
  Required
  The scale to use along y
- ticks object
  
  Show ticks properties
  
  show boolean
  default = true
  
  stroke string
  default = "black"
  
  strokeWidth number
  default = "1"
  
  strokeDasharray string
- minorTicks object
  
  Show minorTicks properties
  
  show boolean
  default = true
  
  stroke string
  default = "black"
  
  strokeWidth number
  default = "1"
  
  strokeDasharray string

ComponentGridLine

{
 type: 'grid-line',
 settings: {
   x: {
     scale: '<name-of-scale>',
   },
   y: {
     scale: '<name-of-scale>',
   },
 },
}

extends ComponentSettings

Properties

type 'labels'
Required
component type
settings object
Required
Component settings
Show settings properties
- sources Array< Source >
  Required
  Source settings

ComponentLabels

{
  type: 'labels',
  settings: {
    sources: [
      {
        component: 'bars',
        selector: 'rect', // select all 'rect' shapes from the 'bars' component
        strategy: {
          type: 'bar', // the strategy type
          settings: {
            labels: [
              {
                label({ data }) {
                  return data ? data.end.label : '';
                },
                placements: [
                  // label placements in prio order. Label will be placed in the first place it fits into
                  { position: 'inside', fill: '#fff' },
                  { position: 'outside', fill: '#666' },
                ],
              },
            ],
          },
        },
      },
    ],
  },
}

extends ComponentSettings

Properties

type 'legend-cat'
Required
component type
scale string
Required
Reference to categorical color scale
settings object
Component settings
Show settings properties
- item object
  Settings applied per item
  
  Show item properties
  
  align number
  Align item
  default = 0.5
  
  justify number
  Justify item
  default = 0.5
  
  label object
  
  Show label properties
  
  fontFamily string
  Font family
  default = "Arial"
  
  fontSize string
  Font size in pixels
  default = "12px"
  
  lineHeight number
  Line height as a multiple of the font size
  default = 1.2
  
  maxLines number
  Max number of lines allowed if label is broken into multiple lines (only applicable with wordBreak)
  default = 2
  
  maxWidth number
  Maximum width of label, in px
  default = 136
  
  wordBreak string
  Word break rule, how to apply line break if label text overflows its maxWidth property. Either 'break-word' or 'break-all'
  default = "none"
  
  shape object
  
  Show shape properties
  
  size number
  Size of shape in pixels
  default = 12
  
  type string
  Type of shape
  default = "square"
  
  show boolean
  Whether to show the current item
  default = true
- layout object
  
  Show layout properties
  
  direction string
  Layout direction. Either 'ltr' or 'rtl'
  default = "ltr"
  
  scrollOffset number
  Initial scroll offset
  default = 0
  
  size number
  Maximum number of columns (vertical) or rows (horizontal)
  default = 1
- navigation object
  
  Show navigation properties
  
  button object
  
  Show button properties
  
  class object
  
  content function
  Required
  
  tabIndex number
  
  disabled boolean
  Whether the button should be disabled or not
  default = false
- title object
  
  Show title properties
  
  anchor string
  Required
  Horizontal alignment of the text. Allowed values are 'start', 'middle' and 'end'
  default = "start"
  
  fill string
  Title color
  default = "#595959"
  
  fontFamily string
  Font family
  default = "Arial"
  
  fontSize string
  Font size in pixels
  default = "16px"
  
  lineHeight number
  Line height as a multiple of the font size
  default = 1.25
  
  maxLines number
  Max number of lines allowed if label is broken into multiple lines, is only appled when wordBreak is not set to 'none'
  default = 2
  
  maxWidth number
  Maximum width of title, in px
  default = 156
  
  show boolean
  Whether to show the title
  default = true
  
  text string
  Title text. Defaults to the title of the provided data field
  
  wordBreak string
  Word break rule, how to apply line break if label text overflows its maxWidth property. Either 'break-word' or 'break-all'
  default = "none"

ComponentLegendCat

{
  type: 'legend-cat',
  scale: '<categorical-color-scale>',
}

extends ComponentSettings

Properties

type 'legend-seq'
Required
component type
settings object
Required
Component settings
Show settings properties
- fill string
  Required
  Reference to definition of sequential color scale
- major string
  Required
  Reference to definition of linear scale
- size number
  Size in pixels of the legend, if vertical is the width and height otherwise
  default = 15
- length number
  A value in the range 0-1 indicating the length of the legend node
  default = 1
- maxLengthPx number
  Max length in pixels
  default = 250
- align 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.
  default = 0.5
- justify 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.
  default = 0
- padding object
  
  Show padding properties
  
  left number
  Size in pixels
  default = 5
  
  right number
  Size in pixels
  default = 5
  
  top number
  Size in pixels
  default = 5
  
  bottom number
  Size in pixels
  default = 5
- tick object
  
  Show tick properties
  
  label function
  Function applied to all tick values. Return value should be a string and is used as label
  
  fill string
  Tick color
  default = "#595959"
  
  fontSize string
  Font size in pixels
  default = "12px"
  
  fontFamily string
  Font family
  default = "Arial"
  
  maxLengthPx number
  Max length in pixels
  default = 150
  
  anchor string
  Where to anchor the tick in relation to the legend node, supported values are [top, bottom, left and right] or empty string to auto anchor
  default = ""
  
  padding number
  padding in pixels to the legend node
  default = 5
- title object
  Title settings
  
  Show title properties
  
  show boolean
  Toggle title on/off
  default = true
  
  text string
  Title text. Defaults to the title of the provided data field
  default = ""
  
  fill string
  Title color
  default = "#595959"
  
  fontSize string
  Font size in pixels
  default = "12px"
  
  fontFamily string
  Font family
  default = "Arial"
  
  maxLengthPx number
  Max length in pixels
  default = 100
  
  padding number
  padding in pixels to the legend node
  default = 5
  
  anchor string
  Where to anchor the title in relation to the legend node, supported values are [top, left and right] or empty string to auto anchor
  default = ""
  
  wordBreak string
  How overflowing title is handled, if it should insert line breaks at word boundries (break-word) or character boundries (break-all)
  default = "none"
  
  hyphens string
  How words should be hyphenated when text wraps across multiple lines (only applicable with wordBreak)
  default = "auto"
  
  maxLines number
  Number of allowed lines if title contains line breaks (only applicable with wordBreak)
  default = 2
  
  lineHeight number
  A multiplier defining the distance between lines (only applicable with wordBreak)
  default = 1.2

ComponentLegendSeq

{
  type: 'legend-seq',
  settings: {
    fill: '<sequential-color-scale>',
    major: '<linear-scale>',
  }
}

extends ComponentSettings

Properties

type 'line'
Required
component type
settings object
Required
Component settings
Show settings properties
- connect boolean
  default = false
- coordinates object
  Required
  
  Show coordinates properties
  
  defined DatumBoolean
  default = true
  
  Show defined properties
  
  DatumBoolean boolean | DatumConfig | datumAccessor
  Required
  Custom type that is either a boolean, DatumConfig or a datumAccessor
  
  layerId number
  default = 0
  
  major number
  Required
  default = 0.5
  
  minor number
  Required
  default = 0.5
- layers object
  Required
  
  Show layers properties
  
  area object
  Required
  
  Show area properties
  
  fill string
  default = "#ccc"
  
  opacity number
  default = 0.8
  
  show boolean
  default = true
  
  curve string
  default = "linear"
  
  line object
  Required
  
  Show line properties
  
  opacity number
  default = 1
  
  show boolean
  default = true
  
  showMinor0 boolean
  default = true
  
  stroke string
  default = "#ccc"
  
  strokeDasharray string
  
  strokeLinejoin string
  default = "miter"
  
  strokeWidth number
  default = 1
  
  show boolean
  default = true
  
  sort LayerSort
  
  Show sort properties
  
  LayerSort() function
  Required
  Callback function for layer sort
  Parameters
  
  a object
  Required
  
  Show a properties
  
  id string
  Required
  
  data Array< DatumExtract >
  Required
  
  b object
  Required
  
  Show b properties
  
  id string
  Required
  
  data Array< DatumExtract >
  Required
- orientation string
  default = "horizontal"

ComponentLine

{
  type: "line",
  data: {
    extract: {
      field: "Year",
      props: {
        sales: { field: "Sales" },
      },
    },
  },
  settings: {
    coordinates: {
      major: { scale: "t" },
      minor: { scale: "y", ref: "sales" },
    },
  },
}

extends ComponentSettings

Properties

type 'pie'
Required
component type
settings object
Required
Component settings
Show settings properties
- endAngle number
  End angle of the pie, in radians
- slice object
  Required
  
  Show slice properties
  
  arc number
  Absolute value of the slice's arc length
  default = 1
  
  cornerRadius number
  Corner radius of the slice, in pixels
  default = 0
  
  fill string
  Fill color of the slice
  default = "#333"
  
  innerRadius number
  Inner radius of the slice
  default = 0
  
  offset number
  Radial offset of the slice
  default = 0
  
  opacity number
  Opacity of the slice
  default = 1
  
  outerRadius number
  Outer radius of the slice
  default = 0.8
  
  show boolean
  Visibility of the slice
  default = true
  
  stroke string
  Stroke color of the slice
  default = "#ccc"
  
  strokeLinejoin string
  Stroke line join
  default = "round"
  
  strokeWidth number
  Stroke width of the slice
  default = 1
- startAngle number
  Start angle of the pie, in radians
  default = 0

ComponentPie

{
  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
    }
  }
}

extends ComponentSettings

Properties

type 'point'
Required
component type
settings object
Component settings
Show settings properties
- fill DatumString
  Fill color
  default = "#333"
  
  Show fill properties
  
  DatumString string | DatumConfig | datumAccessor
  Required
  Custom type that is either a string, DatumConfig or a datumAccessor
- label DatumString
  Label
  default = ""
- opacity DatumNumber
  Opacity of shape
  default = 1
  
  Show opacity properties
  
  DatumNumber number | DatumConfig | datumAccessor
  Required
  Custom type that is either a number, DatumConfig or a datumAccessor
- shape DatumString
  Type of shape
  default = "circle"
- show DatumBoolean
  Whether or not to show the point
  default = true
  
  Show show properties
  
  DatumBoolean boolean | DatumConfig | datumAccessor
  Required
  Custom type that is either a boolean, DatumConfig or a datumAccessor
- size DatumNumber
  Normalized size of shape
  default = 1
- sizeLimits object
  
  Show sizeLimits properties
  
  maxPx number
  Maximum size of shape, in pixels
  default = 10000
  
  maxRelDiscrete number
  Maximum size relative discrete scale banwidth
  default = 1
  
  maxRelExtent number
  Maximum size relative linear scale extent
  default = 0.1
  
  minPx number
  Minimum size of shape, in pixels
  default = 1
  
  minRelDiscrete number
  Minimum size relative discrete scale banwidth
  default = 0.1
  
  minRelExtent number
  Minimum size relative linear scale extent
  default = 0.01
- stroke DatumString
  Stroke color
  default = "#ccc"
- strokeDasharray DatumString
  Stroke dash array
  default = ""
- strokeLinejoin DatumString
  Stroke line join
  default = "miter"
- strokeWidth DatumNumber
  Stroke width
  default = 0
- x DatumNumber
  Normalized x coordinate
  default = 0.5
- y DatumNumber
  Normalized y coordinate
  default = 0.5

ComponentPoint

{
  type: 'point',
  data: {
    extract: {
      field: 'Month',
      props: {
        x: { field: 'Margin' },
        y: { field: 'Year' }
      }
    }
  },
  settings: {
    x: { scale: 'm' },
    y: { scale: 'y' },
  }
}

extends ComponentSettings

Properties

type 'ref-line'
Required
component type
settings object
Required
Component settings
Show settings properties
- lines object
  Required
  X & Y Lines
  
  Show lines properties
  
  x Array< Line >
  Reference lines along X axis
  default = "[]"
  
  y Array< Line >
  Reference lines along Y axis
  default = "[]"

ComponentRefLine

{
 type: 'ref-line',
 lines: {
   y: [{
     scale: 'y',
     value: 5000,
     label: {
       text: 'value label'
     }
     slope: 0.5,
   }]
 }
}

Generic settings available to all components

Properties

type string
Required
Component type (ex: axis, point, ...)
preferredSize function
Function returning the preferred size
created function
Called when the component has been created
beforeMount function
Called before the component has been mounted
mounted function
Called after the component has been mounted
beforeUpdate function
Called before the component has been updated
updated function
Called after the component has been updated
beforeRender function
Called before the component has been rendered
beforeDestroy function
Called before the component has been destroyed
destroyed function
Called after the component has been destroyed
brush object
Brush settings
Show brush properties
- trigger Array< BrushTriggerSettings >
  Trigger settings
- consume Array< BrushConsumeSettings >
  Consume settings
- sortNodes function
  Sorting function for nodes. Should return sorted nodes.
layout object
Layout settings
Show layout properties
- displayOrder number
  default = 0
- prioOrder number
  default = 0
- minimumLayoutMode string | Object
  Refer to layout sizes defined by layoutModes in strategy
- dock string
  left, right, top or bottom
show boolean
If the component should be rendered
default = true
scale string
Named scale. Will be provided to the component if it asks for it.
formatter string
Named formatter. Fallback to create formatter from scale. Will be provided to the component if it asks for it.
components Array< ComponentSettings >
Experimental
Optional list of child components
strategy DockLayoutSettings | customLayoutFunction
Experimental
Layout strategy used for child components.
data DataExtraction | DataFieldExtraction
Extracted data that should be available to the component
rendererSettings RendererSettings
Settings for the renderer used to render the component
Show rendererSettings properties
- transform TransformFunction
  Setting for applying transform without re-rendering the whole component completely.
  
  Show transform properties
  
  TransformFunction() function
  RequiredExperimental
  Should return a transform object if transformation should be applied, otherwise undefined or a falsy value. Transforms can be applied with the canvas, svg and dom renderer. Transform is applied when running chart.update, see example. !Important: When a transform is applied to a component, the underlaying node representations are not updated with the new positions/sizes, which can cause problems for operations that relies on the positioning of the shapes/nodes (such as tooltips, selections etc). An extra chart update without a transform is therefore needed to make sure the node position information is in sync with the visual representation again.
  Returns
  
  TransformObject
  Required
- canvasBufferSize CanvasBufferSize
  Specifies the size of buffer canvas (used together with transform setting).
  
  Show canvasBufferSize properties
  
  CanvasBufferSize function | object
  RequiredExperimental
  An object containing width and height of the canvas buffer or a function returning an object on that format. Gets a rect object as input parameter.
- progressive Progressive
  Setting for applying progressive rendering to a canvas renderer
  
  Show progressive properties
  
  Progressive() function
  RequiredExperimental
  A function which returns either (1) false (to specify no progressive rendering used) or an object specifing the data chunk rendered. This is only applied to a canvas renderer.
  Returns
  
  ProgressiveObject | boolean
  Required
key string
Component key

extends ComponentSettings

Properties

type 'text'
Required
component type
text string | function
Required
Text to display
settings object
Required
Show settings properties
- paddingStart number
  Start padding in pixels
  default = 5
- paddingEnd number
  End padding in pixels
  default = 5
- paddingLeft number
  Left padding in pixels
  default = 0
- paddingRight number
  Right padding in pixels
  default = 0
- anchor string
  Where to v- or h-align the text. Supports left, right, top, bottom and center
  default = "center"
- join string
  String to add when joining titles from multiple sources
  default = ", "
- maxLengthPx number
  Limit the text length
style object
Required
Show style properties
- text object
  
  Show text properties
  
  fontSize string
  Font size of text
  default = "12px"
  
  fontFamily string
  Font family of text
  default = "Source Sans Pro"
  
  fontWeight string
  Font weight of text
  default = "normal"
  
  fill string
  Fill color of text
  default = "#ffffff"
  
  stroke string
  Stroke of text
  default = "transparent"
  
  strokeWidth number
  Stroke width of text
  default = 0
  
  opacity number
  Opacity of text
  default = 1

ComponentText

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

extends ComponentSettings

Properties

type 'tooltip'
Required
component type
settings object
Required
Show settings properties
- afterHide() function
  Component lifecycle hook. Called after the tooltip is hidden.
- afterShow() function
  Component lifecycle hook. Called after the tooltip have been displayed.
- appendTo HTMLElement
  Explicitly set a target element. This allows the tooltip to attach itself outside the picasso container.
- arrowClass object
  Set arrow class.
- beforeHide() function
  Component lifecycle hook. Called before the tooltip is hidden.
  Parameters
  
  ctx object
  Required
  Callback paramater
  
  Show ctx properties
  
  element HTMLElement
  Required
  The element the tooltip is appended to
- beforeShow() function
  Component lifecycle hook. Called before the tooltip is displayed.
- content() function
  Callback function to generate content. Should return an array of Virtual DOM Elements.
  Parameters
  
  ctx object
  Required
  Callback context
  
  Show ctx properties
  
  data Array< any >
  Required
  An array of data generated from the extract function
  
  h object
  Required
  A function for creating Virtual DOM Elements. See API reference for preactjs h function
  
  Returns
  
  Array< object >
  Required
  An array of Virtual DOM Elements
- contentClass object
  Set content class.
- delay number
  Delay before the tooltip is rendered, in milliseconds
  default = 500
- direction string
  Content direction [ltr | rtl]
  default = "ltr"
- duration number
  How long the tooltip is visible, in milliseconds
  default = 8000
- extract() function
  Callback function called for each node to extract data. Can return any type.
  Parameters
  
  ctx object
  Required
  Callback context
  
  Show ctx properties
  
  node SceneNode
  Required
  Node
  
  Show node properties
  
  attrs object
  Required
  Node attributes
  
  bounds Rect
  Required
  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.
  
  Show bounds properties
  
  x number
  Required
  X-coordinate
  
  y number
  Required
  Y-coordinate
  
  width number
  Required
  Width
  
  height number
  Required
  Height
  
  boundsRelativeTo() function
  Required
  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
  Required
  
  includeTransform boolean
  Required
  Whether to include any applied transforms on the node
  default = true
  
  Returns
  
  Rect
  Required
  
  children Array< SceneNode >
  Required
  Get child nodes
  
  collider Line | Rect | Circle | Path
  Required
  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.
  
  data any
  Required
  Get the associated data
  
  desc object
  Required
  Node description
  
  element HTMLElement
  Required
  Element the scene is attached to
  
  key string
  Required
  Key of the component this shape belongs to
  
  localBounds Rect
  Required
  Bounding rectangle of the node within its local coordinate system. Origin is in the top-left corner of the scene element.
  
  parent SceneNode
  Required
  Get parent node
  
  tag string
  Required
  Node tag
  
  type string
  Required
  Node type
  
  Returns
  
  any
  Required
  Return data
- filter() function
  Callback function to filter incoming nodes to only a set of applicable nodes. Is called as a part of the show event.
  
  Should return an array of SceneNodes.
  Parameters
  
  nodes Array< SceneNode >
  Required
  Array of SceneNodes
  
  Returns
  
  Array< SceneNode >
  Required
  An array of SceneNodes
- isEqual() function
  Comparison function. If evaluted to true, the incoming nodes in the show event are ignored. If evaluated to false, any active tooltip is cleared and a new tooltip is queued.
  
  The function gets two parameters, the first is the currently active set of nodes, if any, and the second is the incoming set of nodes. By default the two set of nodes are considered equal if their data attributes are the same.
  Parameters
  
  prev Array< SceneNode >
  Required
  Previous array of SceneNodes
  
  curr Array< SceneNode >
  Required
  Current array of SceneNodes
  
  Returns
  
  boolean
  Required
- onHide() function
  Component lifecycle hook. Called when the toolip is hidden. By default this deletes the tooltip element.
  Parameters
  
  ctx object
  Required
  Callback paramater
  
  Show ctx properties
  
  element HTMLElement
  Required
  The element the tooltip is appended to
- placement object
  
  Show placement properties
  
  area number
  Specify the limiting area, where target is the component area unless the appendTo property is set, in which case it referes to the appendTo element. Viewport is the browser viewport.
  
  Available options are: [viewport | target]
  default = "viewport"
  
  dock string
  Docking position of the tooltip. Available positions: [left | right | top | bottom | auto]
  default = "auto"
  
  offset number
  Distance from the content area to the tooltip position, in px.
  default = 8
  
  type string
  Available types: [pointer | bounds | slice]
  default = "pointer"
- tooltipClass object
  Set tooltip class.

ComponentTooltip

picasso.chart({
  settings: {
    interactions: [{
      type: 'native',
      events: {
        mousemove(e) {
          const tooltip = this.chart.component('<tooltip-key>');
          tooltip.emit('show', e);
        },
        mouseleave(e) {
          const tooltip = this.chart.component('<tooltip-key>');
          tooltip.emit('hide');
        }
      }
    }],
    components: [
      {
        key: '<tooltip-key>',
        type: 'tooltip'
      }
    ]
  },
  ...
});

Parameters

rect Rect
Required
Show rect properties
- x number
  Required
  X-coordinate
- y number
  Required
  Y-coordinate
- width number
  Required
  Width
- height number
  Required
  Height
components Array< object >
Required

Used to extract data from a DataSource

Properties

extract Extract | Array< Extract >
Required
Extract definition
stack object
If provided, defines how the data should be stacked
Show stack properties
- stackKey StackKeyCallback
  Required
  Callback function. Should return the key to stack by
  
  Show stackKey properties
  
  StackKeyCallback() function
  Required
  Callback function. Should return the key to stack by
  Parameters
  
  datum DatumExtract
  Required
  The extracted datum
  
  Returns
  
  any
  Required
  The data value to stack by
- value StackValueCallback
  Required
  Callback function. Should return the data value to stack with
  
  Show value properties
  
  StackValueCallback() function
  Required
  Callback function. Should return the data value to stack with
  Parameters
  
  datum DatumExtract
  Required
  The extracted datum
  
  Returns
  
  any
  Required
  The data value to stack with
filter FilterCallback
Callback function to filter the extracted data items
Show filter properties
- FilterCallback() function
  Required
  Callback function to filter the extracted data items
  Parameters
  
  datum DatumExtract
  Required
  The extracted datum
  
  Returns
  
  boolean
  Required
  Return true if the datum should be included in the final data set
sort SortCallback
Callback function to sort the extracted data items
Show sort properties
- SortCallback() function
  Required
  Callback function to sort the extracted data items
  Parameters
  
  a DatumExtract
  Required
  The extracted datum
  
  b DatumExtract
  Required
  The extracted datum
  
  Returns
  
  number
  Required
  If less than 0, sort a before b. If greater than 0, sort b before a

DataExtraction

{
  extract: [{
    source: 'Products',
    field: 'Product',
    value: d => d.name,
    label: d => `<${d.name}>`
    props: {
      year: { field: 'Year' }
      num: { field: 'Sales' }
    }
  }],
  filter: d => d.label !== 'Sneakers', // extract everything except Sneakers
  sort: (a, b) => a.label > b.label ? -1 : 1, // sort descending
}

Properties

source string
Required
Which data source to extract from
field string
Required
The field to extract data from
value ValueFn | string | number | boolean
The field value accessor
label LabelFn | string | number | boolean
The field label accessor

DataFieldExtraction

{
 source: 'Products',
 field: 'Sales',
 value: (val) => Math.round(val),
 label: (val) => `<${val}>`
}

Extract data items from this dataset

Parameters

config Extract | DataFieldExtraction
Required

Returns

Array< DatumExtract >
Required

Find a field within this dataset

Parameters

query string
Required
The field to find

Returns

Field
Required
Show properties
- formatter() function
  Required
  Returns a formatter adapted to the content of this field.
- id() function
  Required
  Returns this field's id
  Returns
  
  string
  Required
- items() function
  Required
  Returns the values of this field.
  Returns
  
  Array< DatumExtract >
  Required
- key() function
  Required
  Returns this field's key
  Returns
  
  string
  Required
- max() function
  Required
  Returns the max value of this field.
  Returns
  
  number
  Required
- min() function
  Required
  Returns the min value of this field.
  Returns
  
  number
  Required
- raw() function
  Required
  Returns the input data
  Returns
  
  any
  Required
- tags() function
  Required
  Returns the tags.
  Returns
  
  Array< string >
  Required
- title() function
  Required
  Returns this field's title.
  Returns
  
  string
  Required
- type() function
  Required
  Returns this field's type: 'dimension' or 'measure'.
  Returns
  
  string
  Required

Get all fields within this dataset

Returns

Array< Field >
Required

Returns

null
Required

Get the key identifying this dataset

Returns

string
Required

Get the raw data

Returns

any
Required

Properties

key string
Unique identifier for this data source
type string
Required
The dataset type
data any
Required
Data

Callback function

Parameters

d DatumExtract
Required
datum
Show d properties
- value any
  Required
  The extracted value
- label string
  Required
  The extracted value as a string
- source object
  Required
  The data source of the extracted data
  
  Show source properties
  
  key string
  Required
  The data-source key
  
  field string
  Required
  The source field

datumAccessor

(d) => Math.min(0, d.value);

Custom type that is either a boolean, DatumConfig or a datumAccessor

Properties

scale string
Name of a scale
fn datumAccessor
Show fn properties
- datumAccessor() function
  Required
  Callback function
  Parameters
  
  d DatumExtract
  Required
  datum
  
  Show d properties
  
  value any
  Required
  The extracted value
  
  label string
  Required
  The extracted value as a string
  
  source object
  Required
  The data source of the extracted data
  
  Show source properties
  
  key string
  Required
  The data-source key
  
  field string
  Required
  The source field
ref string
A reference to a DatumExtract property

DatumConfig

// Implicitly resolve the datum by passing a referenced data through the scale
{
 scale: '<name-of-scale>',
 ref: '<data-property>'
}

// or explicitly resolve the datum using callback function
{
 fn: (d) => Math.min(0, d.datum.x.value);
}

Properties

value any
Required
The extracted value
label string
Required
The extracted value as a string
source object
Required
The data source of the extracted data
Show source properties
- key string
  Required
  The data-source key
- field string
  Required
  The source field

Custom type that is either a number, DatumConfig or a datumAccessor

Custom type that is either a string, DatumConfig or a datumAccessor

Dock layout settings

Properties

logicalSize object
Logical size
Show logicalSize properties
- width number
  Width in pixels
- height number
  Height in pixels
- preserveAspectRatio boolean
  If true, takes the smallest ratio of width/height between logical and physical size ( physical / logical )
  default = false
- align number
  Normalized value between 0-1. Defines how the space around the scaled axis is spread in the container, with 0.5 meaning the spread is equal on both sides. Only applicable if preserveAspectRatio is set to true
  default = 0.5
center object
Define how much space the center dock area requires
Show center properties
- minWidthRatio number
  Value between 0 and 1
  default = 0.5
- minHeightRatio number
  Value between 0 and 1
  default = 0.5
- minWidth number
  Width in pixels
- minHeight number
  Height in pixels
layoutModes object
Dictionary with named sizes
size object
Size is equal to that of the container (element) of the chart by default. It's possible to overwrite it by explicitly setting width or height
Show size properties
- width number
  Width in pixels
- height number
  Height in pixels

Returns a formatter adapted to the content of this field.

Returns this field's id

Returns

string
Required

Returns the values of this field.

Returns

Array< DatumExtract >
Required

Returns this field's key

Returns

string
Required

Returns the max value of this field.

Returns

number
Required

Returns the min value of this field.

Returns

number
Required

Returns the input data

Returns

any
Required

Returns the tags.

Returns

Array< string >
Required

Returns this field's title.

Returns

string
Required

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

Returns

string
Required

Returns

any
Required
Returns a formatted value

Properties

formatter string
Name of the formatter
type string
Type of formatter
format string
Format string
data DataExtraction | DataFieldExtraction
The data to create formatter from

Properties

polygons Array< Polygon >
Required
Array of polygons

Interaction instance

Properties

on function
Required
Enable interaction
off function
Required
Disable interaction
destroy function
Required
Destroy interaction
key string
Required
Interaction identifier

Properties

type string
Required
Type of interaction handler
key string
Unique key identifying the handler
enable function | boolean
Required
Enable or disable the interaction handler. If a callback function is provided, it must return either true or false

InteractionSettings

{
 type: 'native',
 key: 'nativeHandler',
 enable: () => true,
 events: { // "events" is a property specific to the native handler
   mousemove: (e) => console.log('mousemove', e),
 }
}

Properties

x1 number
Required
Start x-coordinate
y1 number
Required
Start y-coordinate
x2 number
Required
End x-coordinate
y2 number
Required
End y-coordinate

Properties

d string
Required
Path definition

Callback function to register a plugin

Parameters

registries Registries
Required
Show registries properties
- component registry
  Required
  Component registry
  
  Show component properties
  
  registry() function
  Required
  Register a value with the given key. If value is omitted, returns the value of key.
  Parameters
  
  key string
  Required
  Name of the type to register
  
  value any
  Value to store in the registry.
  
  Returns
  
  any
  Required
  Registered value
- data registry
  Required
  Data registry
- formatter registry
  Required
  Formatter registry
- interaction registry
  Required
  Interaction registry
- renderer registry
  Required
  Renderer registry
- scale registry
  Required
  Scale registry
options object
Required

Properties

x number
Required
X-coordinate
y number
Required
Y-coordinate

Properties

points Array< Point >
Required
Array of connected points

Properties

points Array< Point >
Required
Array of connected points

A format to represent a data chunk to be rendered.

Properties

start number
Required
Start index of a data chunk.
end number
Required
End index of a data chunk.
isFirst boolean
Required
If it is the first data chunk rendered. This helps to clear a canvas before rendering.
isLast boolean
Required
If it is the last data chunk rendered. This helps to update other components depending on a component with progressive rendering.

Properties

x number
Required
X-coordinate
y number
Required
Y-coordinate
width number
Required
Width
height number
Required
Height

Properties

component registry
Required
Component registry
Show component properties
- registry() function
  Required
  Register a value with the given key. If value is omitted, returns the value of key.
  Parameters
  
  key string
  Required
  Name of the type to register
  
  value any
  Value to store in the registry.
  
  Returns
  
  any
  Required
  Registered value
data registry
Required
Data registry
formatter registry
Required
Formatter registry
interaction registry
Required
Interaction registry
renderer registry
Required
Renderer registry
scale registry
Required
Scale registry

Register a value with the given key. If value is omitted, returns the value of key.

Parameters

key string
Required
Name of the type to register
value any
Value to store in the registry.

Returns

any
Required
Registered value

Parameters

element HTMLElement
Required
Element to attach renderer to

Returns

HTMLElement
Required
Root element of the renderer

Clear all child elements from the renderer root element

Returns

Renderer
Required
The renderer instance

Remove the renderer root element from its parent element

Get the element this renderer is attached to

Returns

HTMLElement
Required

Get all nodes matching the provided selector

Parameters

selector string
Required
CSS selector [type, attribute, universal, class]

Returns

Array< SceneNode >
Required
Array of objects containing matching nodes

Get nodes renderer at area

Parameters

geometry Point | Circle | Rect | Line | Polygon | Geopolygon
Required
Get nodes that intersects with geometry

Returns

Array< SceneNode >
Required

Parameters

opts object
Required
Show opts properties
- text string
  Required
  Text to measure
- fontSize string
  Required
  Font size
- fontFamily string
  Required
  Font family

Returns

object
Required
Width and height of text

measureText

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

Parameters

nodes Array< object >
Required
Nodes to render

Returns

boolean
Required
True if the nodes were rendered, otherwise false

Get the root element of the renderer

Returns

HTMLElement
Required

Set or Get renderer settings

Parameters

settings object
Settings for the renderer

Set or Get the size definition of the renderer container.

Parameters

opts SizeDefinition
Size definition
Show opts properties
- x number
  x-coordinate
- y number
  y-coordinate
- width number
  Width
- height number
  Height
- scaleRatio object
  
  Show scaleRatio properties
  
  x number
  Scale ratio on x-axis
  
  y number
  Scale ratio on y-axis
- margin object
  
  Show margin properties
  
  left number
  Left margin
  
  top number
  Top margin

Returns

SizeDefinition
Required
The current size definition

Properties

transform TransformFunction
Setting for applying transform without re-rendering the whole component completely.
Show transform properties
- TransformFunction() function
  RequiredExperimental
  Should return a transform object if transformation should be applied, otherwise undefined or a falsy value. Transforms can be applied with the canvas, svg and dom renderer. Transform is applied when running chart.update, see example. !Important: When a transform is applied to a component, the underlaying node representations are not updated with the new positions/sizes, which can cause problems for operations that relies on the positioning of the shapes/nodes (such as tooltips, selections etc). An extra chart update without a transform is therefore needed to make sure the node position information is in sync with the visual representation again.
  Returns
  
  TransformObject
  Required
canvasBufferSize CanvasBufferSize
Specifies the size of buffer canvas (used together with transform setting).
Show canvasBufferSize properties
- CanvasBufferSize function | object
  RequiredExperimental
  An object containing width and height of the canvas buffer or a function returning an object on that format. Gets a rect object as input parameter.
progressive Progressive
Setting for applying progressive rendering to a canvas renderer
Show progressive properties
- Progressive() function
  RequiredExperimental
  A function which returns either (1) false (to specify no progressive rendering used) or an object specifing the data chunk rendered. This is only applied to a canvas renderer.
  Returns
  
  ProgressiveObject | boolean
  Required

Scale instance

Properties

type string
Required
Type of scale

Properties

type string
default = "band"
padding number
Sets both inner and outer padding to the same value
default = 0
paddingInner number
Inner padding
default = 0
paddingOuter number
Outer padding
default = 0
align number
Control how the outer padding should be distributed, where 0.5 would distribute the padding equally on both sides
default = 0.5
invert boolean
Invert the output range
default = false
maxPxStep number
Explicitly limit the bandwidth to a pixel value
label function
Callback label function, applied on each datum
value function
Callback value function, applied on each datum
range Array< number > | function
Set range explicitly (ignored when maxPxStep takes effect)
default = "[0, 1]"

Properties

type string
default = "categorical-color"
range Array< string >
CSS color values of the output range
default = false
unknown string
Value to return when input value is unknown
explicit object
Explicitly bind values to an output
Show explicit properties
- domain[] Array< object >
  Values to bind
- range[] Array< string >
  Output range

Definition for creating a scale. Additional properties, specific for a type of scale, can be added as key/value pairs

Properties

type string
Type of scale
data DataExtraction | DataFieldExtraction
Data configuration

Properties

type string
default = "linear"
expand number
Expand the output range
invert boolean
Invert the output range
default = false
include Array< number >
Include specified numbers in the output range
ticks object
Show ticks properties
- tight boolean
  default = false
- forceBounds boolean
  default = false
- distance number
  Approximate distance between each tick
  default = 100
- values Array< number > | Array< object >
  If set, ticks are no longer generated but instead equal to this set
- count number
minorTicks object
Show minorTicks properties
- count number
  default = 3
min number
Set an explicit minimum value
max number
Set an explicit maximum value

Properties

type string
default = "sequential-color"
range Array< string >
CSS color values of the output range
invert boolean
Invert range
default = false
min number
Set an explicit minimum value
max number
Set an explicit maximum value

Properties

type string
default = "threshold-color"
domain Array< number >
Values defining the thresholds
range Array< string >
CSS color values of the output range
invert boolean
Invert range
default = false
min number
Set an explicit minimum value
max number
Set an explicit maximum value
nice boolean
If set to true, will generate 'nice' domain values. Ignored if domain is set.
default = false

Read-only object representing a node on the scene.

Properties

attrs object
Required
Node attributes
bounds Rect
Required
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.
Show bounds properties
- x number
  Required
  X-coordinate
- y number
  Required
  Y-coordinate
- width number
  Required
  Width
- height number
  Required
  Height
children Array< SceneNode >
Required
Get child nodes
collider Line | Rect | Circle | Path
Required
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.
data any
Required
Get the associated data
desc object
Required
Node description
element HTMLElement
Required
Element the scene is attached to
key string
Required
Key of the component this shape belongs to
localBounds Rect
Required
Bounding rectangle of the node within its local coordinate system. Origin is in the top-left corner of the scene element.
parent SceneNode
Required
Get parent node
tag string
Required
Node tag
type string
Required
Node type

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
Required
includeTransform boolean
Required
Whether to include any applied transforms on the node
default = true

Returns

Rect
Required

boundsRelativeTo

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

Create a new svg renderer

Parameters

treeFactory function
Node tree factory
ns string
Namespace definition
sceneFn function
Scene factory

Returns

Renderer
Required
A svg renderer instance
Show properties
- appendTo() function
  Required
  Parameters
  
  element HTMLElement
  Required
  Element to attach renderer to
  
  Returns
  
  HTMLElement
  Required
  Root element of the renderer
- clear() function
  Required
  Clear all child elements from the renderer root element
  Returns
  
  Renderer
  Required
  The renderer instance
- destory() function
  Required
  Remove the renderer root element from its parent element
- element() function
  Required
  Get the element this renderer is attached to
  Returns
  
  HTMLElement
  Required
- findShapes() function
  Required
  Get all nodes matching the provided selector
  Parameters
  
  selector string
  Required
  CSS selector [type, attribute, universal, class]
  
  Returns
  
  Array< SceneNode >
  Required
  Array of objects containing matching nodes
- itemsAt() function
  Required
  Get nodes renderer at area
  Parameters
  
  geometry Point | Circle | Rect | Line | Polygon | Geopolygon
  Required
  Get nodes that intersects with geometry
  
  Returns
  
  Array< SceneNode >
  Required
- measureText() function
  Required
  Parameters
  
  opts object
  Required
  
  Show opts properties
  
  text string
  Required
  Text to measure
  
  fontSize string
  Required
  Font size
  
  fontFamily string
  Required
  Font family
  
  Returns
  
  object
  Required
  Width and height of text
- render() function
  Required
  Parameters
  
  nodes Array< object >
  Required
  Nodes to render
  
  Returns
  
  boolean
  Required
  True if the nodes were rendered, otherwise false
- root() function
  Required
  Get the root element of the renderer
  Returns
  
  HTMLElement
  Required
- settings() function
  Required
  Set or Get renderer settings
  Parameters
  
  settings object
  Settings for the renderer
- size() function
  Required
  Set or Get the size definition of the renderer container.
  Parameters
  
  opts SizeDefinition
  Size definition
  
  Show opts properties
  
  x number
  x-coordinate
  
  y number
  y-coordinate
  
  width number
  Width
  
  height number
  Height
  
  scaleRatio object
  
  Show scaleRatio properties
  
  x number
  Scale ratio on x-axis
  
  y number
  Scale ratio on y-axis
  
  margin object
  
  Show margin properties
  
  left number
  Left margin
  
  top number
  Top margin
  
  Returns
  
  SizeDefinition
  Required
  The current size definition

A format to represent a transformation.

Properties

horizontalScaling number
Required
horizontalSkewing number
Required
verticalSkewing number
Required
verticalScaling number
Required
horizontalMoving number
Required
verticalMoving number
Required

Properties

includeMax boolean
Whether or not the maximum value of a range should be included when determining if a value is brushed.
default = true
includeMin boolean
Whether or not the minimum value of a range should be included when determining if a value is brushed.
default = true
key string
An identifier that represents the data source of the value

Called before the chart has been destroyed

Called before the chart has been mounted

Called before the chart has been rendered

Called before the chart has been updated

Called when the chart has been created

Called after the chart has been destroyed

Called after the chart has been mounted

Parameters

element HTMLElement
Required
The element the chart been mounted to

Called after the chart has been updated

Continuous axis settings

Properties

arc ArcSettings
Optional arc settings
align string
Set the anchoring point of the axis. Available 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
default = "auto"
labels object
Required
Show labels properties
- align number
  Align act as a slider for the text bounding rect over the item bandwidth, given that the item have a bandwidth.
  default = 0.5
- filterOverlapping boolean
  Toggle whether labels should be filtered if they are overlapping. Filtering may be applied in a non-sequential order. If labels are overlapping and this setting is toggled off, the axis will automatically hide.
  default = true
- margin number
  Space in pixels between the tick and label.
  default = 4
- maxLengthPx number
  Max length of labels in pixels
  default = 150
- minLengthPx number
  Min length of labels in pixels. Labels will always at least require this much space
  default = 0
- offset number
  Offset in pixels along the axis direction.
  default = 0
- show boolean
  Toggle labels on/off
  default = true
line object
Required
Show line properties
- show boolean
  Toggle line on/off
  default = true
minorTicks object
Required
Show minorTicks properties
- margin number
  Space in pixels between the ticks and the line.
  default = 0
- show boolean
  Toggle minor-ticks on/off
  default = false
- tickSize number
  Size of the ticks in pixels.
  default = 3
paddingEnd number
Padding in direction perpendicular to the axis
default = 10
paddingStart number
Padding in direction perpendicular to the axis
default = 0
ticks object
Required
Show ticks properties
- margin number
  Space in pixels between the ticks and the line.
  default = 0
- show boolean
  Toggle ticks on/off
  default = true
- tickSize number
  Size of the ticks in pixels.
  default = 8

ContinuousSettings

{
 type: 'axis',
 scale: '<name-of-linear-scale>',
 settings: {
   minorTicks: {
     show: false,
   },
 },
}

Discrete axis settings

Properties

align string
Set the anchoring point of the axis. Available 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
default = "auto"
labels object
Required
Show labels properties
- align number
  Align act as a slider for the text bounding rect over the item bandwidth, given that the item have a bandwidth. Except when labels are tilted, then the align is a pure align that shifts the position of the label anchoring point.
  default = 0.5
- filterOverlapping boolean
  Toggle whether labels should be filtered if they are overlapping. Filtering may be applied in a non-sequential order. If labels are overlapping and this setting is toggled off, the axis will automatically hide.
  default = false
- margin number
  Space in pixels between the tick and label.
  default = 4
- maxEdgeBleed number
  Control the amount of space (in pixels) that labes can occupy outside their docking area. Only applicable when labels are in tilted mode.
- maxGlyphCount number
  When only a sub-set of data is available, ex. when paging. This property can be used to let the axis estimate how much space the labels will consume, allowing it to give a consistent space estimate over the entire dataset when paging.
- maxLengthPx number
  Max length of labels in pixels
  default = 150
- minLengthPx number
  Min length of labels in pixels. Labels will always at least require this much space
  default = 0
- mode string
  Control how labels arrange themself. Availabe modes are auto, horizontal, layered and tilted. When set to auto the axis determines the best possible layout in the current context.
  default = "auto"
- offset number
  Offset in pixels along the axis direction.
  default = 0
- show boolean
  Toggle labels on/off
  default = true
- tiltAngle number
  Tilting angle in degrees. Capped between -90 and 90. Only applicable when labels are in tilted mode.
  default = 40
- tiltThreshold number
  Threshold for toggle of tilted labels. Capped between 0 and 1. For example, if it is set to 0.7, then tilted labels will be toggled if less than 70% of the labels are visible.
  default = 0.7
line object
Required
Show line properties
- show boolean
  Toggle line on/off
  default = false
paddingEnd number
Padding in direction perpendicular to the axis
default = 10
paddingStart number
Padding in direction perpendicular to the axis
default = 0
ticks object
Required
Show ticks properties
- margin number
  Space in pixels between the ticks and the line.
  default = 0
- show boolean
  Toggle ticks on/off
  default = false
- tickSize number
  Size of the ticks in pixels.
  default = 4

DiscreteSettings

{
 type: 'axis',
 scale: '<name-of-band-scale>',
 settings: {
   labels: {
     mode: 'tilted',
     tiltAngle: 40,
   },
 },
}

Properties

start string
Required
Reference to the data property of the start value along the major axis
end string
Required
Reference to the data property of the end value along the major axis

Properties

type 'bar'
Required
Name of strategy
settings object
Required
Bars strategy settings
Show settings properties
- direction string | function
  The direction in which the bars are growing: 'up', 'down', 'right' or 'left'.
  default = "up"
- orientation string
  Orientation of text: 'auto', 'horizontal' or 'vertical'
  default = "auto"
- fontFamily string
  default = "Arial"
- fontSize number
  default = 12
- labels Array< object >
  Required

Properties

type 'rows'
Required
Name of strategy
settings object
Required
Rows strategy settings
Show settings properties
- fontFamily string
  default = "Arial"
- fontSize number
  default = 12
- justify number
  default = 0.5
- padding number
  default = 4
- labels Array< object >
  Required

Properties

type 'slice'
Required
Name of strategy
settings object
Required
Slices strategy settings
Show settings properties
- direction string | function
  The direction of the text: 'horizontal' or 'rotate'.
  default = "horizontal"
- fontFamily string
  default = "Arial"
- fontSize number
  default = 12
- labels Array< object >
  Required

Properties

component string
Required
Key of target component
selector string
Required
Shape selector
strategy BarsLabelStrategy | RowsLabelStrategy | SlicesLabelStrategy
Required
Strategy settings

Callback function for layer sort

Parameters

a object
Required
Show a properties
- id string
  Required
- data Array< DatumExtract >
  Required
b object
Required
Show b properties
- id string
  Required
- data Array< DatumExtract >
  Required

Properties

fill string
Fill color
default = "#fff"
stroke string
Stroke
default = "transparent"
strokeWidth number
Stroke width
default = 0
opacity number
Opacity
default = 1

Properties

text string
Text (if applicable)
default = ""
fontSize string
Font size (if applicable)
default = "12px"
fontFamily string
Font family
default = "Arial"
fill string
Fill color
default = "#fff"
stroke string
Stroke
default = "transparent"
strokeWidth number
Stroke width
default = 0
strokeDasharray string
Stroke dash array
opacity number
Opacity
default = 1

Properties

value number | function
Required
The value of the reference line. If a scale is specified, it is applied.
scale string
Scale to use (if undefined will use normalized value 0-1)
line GenericObject
The style of the line
default = "ComponentRefLine~GenericObject"
label LineLabel
The label style of the line
default = "ComponentRefLine~LineLabel"
slope number
The slope for the reference line
default = 0

Properties

padding number
Required
Padding inside the label
default = 5
text string
Text
default = ""
fontSize string
Font size
default = "12px"
fontFamily string
Font family
default = "Arial"
stroke string
Stroke
default = "transparent"
strokeWidth number
Stroke width
default = 0
opacity number
Opacity
default = 1
align number | string
Alignment property left to right (0 = left, 1 = right). Also supports string ('left', 'center', 'middle', 'right')
default = 0
vAlign number | string
Alignment property top to bottom (0 = top, 1 = bottom). Also supports string ('top', 'center', 'middle', 'bottom')
default = 0
maxWidth number
The maximum relative width to the width of the rendering area (see maxWidthPx as well)
default = 1
maxWidthPx number
The maximum width in pixels. Labels will be rendered with the maximum size of the smallest value of maxWidth and maxWidthPx size, so you may specify maxWidth 0.8 but maxWidthPx 100 and will never be over 100px and never over 80% of the renderable area
default = 9999
background LineLabelBackground
The background style (rect behind text)
default = "ComponentRefLine~LineLabelBackground"
showValue boolean
Show value label
default = true

Properties

fill string
Fill color
default = "#fff"
stroke string
Stroke
default = "transparent"
strokeWidth number
Stroke width
default = 0
opacity number
Opacity
default = 0.5

Data extraction definition. Define how and what kind of data should be extracted from a DataSource.

Properties

source string
Required
Which data source to extract from
field string
Required
The field to extract data from
value ValueFn | string | number | boolean
The field value accessor
label LabelFn | string | number | boolean
The field label accessor
trackBy TrackByFn
Track by value accessor
reduce ReduceFn | string
Reducer function
reduceLabel ReduceLabelFn | string
Label reducer function
filter FilterFn
Filter function
props object
Additional properties to add to the extracted item

Extract

{
    source: 'Products',
    field: 'Product',
    value: (val) => val,
    label: (val) => `<${val}>`
    props: {
      year: { field: 'Year' }
      num: { field: 'Sales' }
    }
  }

Callback function to filter the extracted data items

Parameters

datum DatumExtract
Required
The extracted datum

Returns

boolean
Required
Return true if the datum should be included in the final data set

Callback function to sort the extracted data items

Parameters

a DatumExtract
Required
The extracted datum
b DatumExtract
Required
The extracted datum

Returns

number
Required
If less than 0, sort a before b. If greater than 0, sort b before a

Callback function. Should return the key to stack by

Parameters

datum DatumExtract
Required
The extracted datum

Returns

any
Required
The data value to stack by

Callback function. Should return the data value to stack with

Parameters

datum DatumExtract
Required
The extracted datum

Returns

any
Required
The data value to stack with

Filter callback function

Parameters

cell any
Required
The field cell

Returns

boolean
Required

Label callback function

Parameters

cell any
Required
The field cell

Returns

string
Required

Properties

field string
Required
The field to extract data from
value ValueFn | string | number | boolean
The field value accessor
label LabelFn | string | number | boolean
The field label accessor

Props

{
 field: 'Sales',
 value: (val) => Math.round(val),
 label: (val) => `<${val}>`
}

Reduce callback function

Parameters

values Array< any >
Required
The collected values to reduce

Returns

any
Required

ReduceLabel callback function

Parameters

labels Array< any >
Required
The collected labels to reduce
value any
Required
Reduced value

Returns

string
Required

TrackBy callback function

Parameters

cell any
Required
The field cell

Returns

any
Required

Value callback function

Parameters

cell any
Required
The field cell

Returns

any
Required

Properties

width number
Required
height number
Required

Properties

x number
x-coordinate
y number
y-coordinate
width number
Width
height number
Height
scaleRatio object
Show scaleRatio properties
- x number
  Scale ratio on x-axis
- y number
  Scale ratio on y-axis
margin object
Show margin properties
- left number
  Left margin
- top number
  Top margin

An object containing width and height of the canvas buffer or a function returning an object on that format. Gets a rect object as input parameter.

A function which returns either (1) false (to specify no progressive rendering used) or an object specifing the data chunk rendered. This is only applied to a canvas renderer.

Returns

ProgressiveObject | boolean
Required

Should return a transform object if transformation should be applied, otherwise undefined or a falsy value. Transforms can be applied with the canvas, svg and dom renderer. Transform is applied when running chart.update, see example. !Important: When a transform is applied to a component, the underlaying node representations are not updated with the new positions/sizes, which can cause problems for operations that relies on the positioning of the shapes/nodes (such as tooltips, selections etc). An extra chart update without a transform is therefore needed to make sure the node position information is in sync with the visual representation again.

Returns

TransformObject
Required

TransformFunction

const pointComponentDef = {
  type: 'point',
  rendererSettings: {
    tranform() {
      if(shouldApplyTransform) {
        return {
          horizontalScaling: 1,
          horizontalSkewing: 0,
          verticalSkewing: 0,
          verticalScaling: 1,
          horizontalMoving: x,
          verticalMoving: y
        };
      }
    }
  }
  data: {
// ............

chart.update({ partialData: true });

picasso.js

picassojs(cfg?) function

Parameters

Returns

Properties

picassojs

picassojs chart(definition) function

Parameters

Returns

chart

picassojs use(plugin, options?) function

Parameters

ArcSettings object

Properties

Brush interface

Brush addAndRemoveValues(addItems, removeItems) function

Parameters

Brush addKeyAlias(key, alias) function

Parameters

addKeyAlias

Brush addRange(key, range) function

Parameters

addRange

Brush addRanges(items) function

Parameters

Brush addValue(key, value) function

Parameters

addValue

Brush addValues(items) function

Parameters

Brush brushes() function

Returns

Brush clear() function

Brush configure(config) function

Parameters

configure

Brush containsRange(key, range) function

Parameters

Returns

containsRange

Brush containsRangeValue(key, value) function

Parameters

Returns

containsRangeValue

Brush containsValue(key, value) function

Parameters

Returns

containsValue

Brush end(args) function

Parameters

Brush intercept(name, ic) function

Parameters

intercept

Brush isActive() function

Returns

Brush link(target) function

Parameters

Brush removeAllInterceptors(name?) function

Parameters

Brush removeInterceptor(name, ic) function

Parameters

Brush removeKeyAlias(key) function

Parameters

removeKeyAlias

Brush removeRange(key, range) function

Parameters

Brush removeRanges(items) function

Parameters

Brush removeValue(key, value) function

Parameters

removeValue

Brush removeValues(items) function

Parameters

Brush setRange(key, range) function

Parameters

Brush setRanges(items) function

Parameters

Brush setValues(items) function

Parameters

Brush start(args) function