picasso.js

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

Documentation

Visit picassojs.com for documentation and examples.

Installing

npm install picasso.js

Usage

import picasso from 'picasso.js';

picasso.chart({
  element: document.querySelector('#container'),
  settings: {
    scales: {
      budget: { max: 5000, min: 0 },
      sales: { max: 11000, min: 3000, invert: true }
    },
    components: [
      {
        type: 'axis',
        scale: 'budget',
        dock: 'bottom'
      },
      {
        type: 'axis',
        scale: 'sales',
        dock: 'left'
      },
      {
        type: 'point',
        data: [
          {sales: 7456, margin: 0.3, budget: 4557},
          {sales: 5603, margin: 0.7, budget: 2234},
          {sales: 8603, margin: 0.6, budget: 4121},
          {sales: 4562, margin: 0.4, budget: 1234},
          {sales: 9873, margin: 0.9, budget: 3453},
        ],
        settings: {
          x: { scale: 'budget', fn() { return this.scale(this.data.value.budget); } },
          y: { scale: 'sales', fn() { return this.scale(this.data.value.sales); } },
          size() { return this.data.value.margin; },
        }
      }
    ]
  }
});

See more examples

Changelog

0.16.0 (2018-11-07)

Bug Fixes

• axis: labels rendered outside the axis area (#238) (e42f759)
• box: out of bounds symbol arrow direction (#245) (8993028)
• brush: brush only nodes with data (#231) (38ce4a9)
• data: undefined data source in field (#243) (2ad225f)
• layers: preserve original index if equal (#236) (a531a70)
• text: text line height leading space (#250) (707f707)

Features

• expose symbol registry and factory (#230) (bc9b248)
• box-marker: out of bounds feature for box marker (#234) (31f8536)
• brush-range: observe brush changes (#246) (3b5cf0a)
• scene-graph: get parent and child nodes (#241) (60615f7)
• make it possible to exclude specific components from update (#248) (b8c32f5)

<a name="0.15.0"></a>