picasso.js
  • Docs
  • Tutorial
  • Examples
  • 
  • 

›General

Getting started

  • Installation
  • Chart
  • Data
  • Components

General

  • Scales
  • Brushing in components
  • Interaction
  • Formatting
  • Dock layout

Scales

  • Linear
  • Band
  • Categorical color
  • Sequential color
  • Threshold color

Components

  • Axis
  • Grid
  • Point
  • Box
  • Line area
  • Pie
  • Categorical legend
  • Sequential legend
  • Text
  • Labels
  • Brush area
  • Brush lasso
  • Brush range
  • Tooltip

Plugins

  • q
  • Hammer
Edit

Interaction

Interactions provide an API to bind events to a picasso chart in a declarative way.

Using interactions in a chart

Each interaction has a type property that identifies the type of interaction to add to the chart.

To define an interaction, you need to add them in the interactions array:

picasso.chart({
  settings: {
    interactions: [{
      type: 'native',
      key: 'someKey',
      enable: /* ... */,
      events: { /* ... */ }
    }, {
      type: 'hammer',
      key: 'anotherKey',
      enable: /* ... */,
      gestures: { /* ... */ }
    }]
  }
});

Bundled interactions

picasso.js comes pre-bundled with a native interaction definition:

interactions: [
  {
    type: 'native',
    key: 'here',
    enable: function() {  // bool or function
      this.chart /*...*/;
      return true;
    },
    events: {
      mousemove: function(e) { // key should point to a native event
        // handle event here
      },
      keydown: function(e) {
        // handle event here
      }
    }
  }
]

... and together with picasso the following interaction plugin is shipped:

  • hammer

Register a custom interaction

To register a new interaction, use the picasso.interaction registry.

picasso.interaction(name, definition)

  • name string. Name of the interaction to register.
  • definition object
    • key getter (optional) Returns the key identifier for this definition. Used for making updates with changes to the definition a smooth ride.
    • set function Set interaction settings and add/update event handlers to the chart element.
    • off function Turn off interactions.
    • on function Turn on interactions.
    • destroy function Remove all bound events.
← Brushing in componentsFormatting →
Docs
Getting StartedTutorialExamples
Links
Slack Twitter GitHub
Qlik Open Source
Copyright © 2019 QlikTech International AB.