Skip to content

A charting library streamlined for building interactive visualizations for the Qlik product suites.

License

Notifications You must be signed in to change notification settings

qlik-oss/picasso.js

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date
Sep 21, 2023
Sep 21, 2023
Nov 17, 2021
Aug 31, 2023
May 7, 2020
Oct 19, 2023
Aug 30, 2023
Oct 19, 2023
Aug 31, 2023
Feb 11, 2020
Feb 27, 2018
Sep 24, 2018
Nov 1, 2022
Feb 9, 2018
Oct 4, 2022
Jan 18, 2022
Feb 11, 2020
Jan 27, 2023
Aug 30, 2023
Feb 9, 2018
Sep 21, 2023
Oct 4, 2022
Feb 6, 2023
Oct 4, 2022
Oct 4, 2022
Oct 4, 2022
Aug 30, 2023
Oct 19, 2023
Apr 7, 2021
Feb 6, 2023
Nov 9, 2022
Oct 19, 2023

Repository files navigation

CircleCI Maintainability Test Coverage

picasso.js

A charting library streamlined for building interactive visualizations for the Qlik product suites.

Examples

Getting started

Installing

npm install picasso.js

Usage

import picasso from 'picasso.js';

picasso.chart({
  element: document.querySelector('#container'), // container must have a width and height specified
  settings: {
    scales: {
      budget: { max: 5000, min: 0 },
      sales: { max: 11000, min: 3000, invert: true },
    },
    components: [
      {
        type: 'axis',
        scale: 'budget',
        layout: {
          dock: 'bottom',
        },
      },
      {
        type: 'axis',
        scale: 'sales',
        layout: {
          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: (d) => d.scale(d.datum.value.budget) },
          y: { scale: 'sales', fn: (d) => d.scale(d.datum.value.sales) },
          size: (d) => d.datum.value.margin,
        },
      },
    ],
  },
});

More examples and documentation can be found at qlik.dev

Run examples locally

See and try out picasso features by starting the development studio by running:

yarn start

API

The API can be found at the Qlik developer portal

Packages

name status description
picasso.js picasso.js-status A charting library streamlined for building visualizations for the Qlik Sense Analytics platform.
picasso-plugin-hammer picasso-plugin-hammer-status A plugin that binds events using HammerJS. This plugin provides an API for binding HammerJS recognizers to the chart element in a declarative way.
picasso-plugin-q picasso-plugin-q-status The q plugin registers a q dataset type that makes it a bit easier to extract data from a QIX hypercube. It also contains a brush helper that can be used to find appropriate selections in the underlying data engine.

License

picasso.js is MIT licensed.

Contributing

Please follow the instructions in our contributing guide.