Skip to content
A charting library streamlined for building interactive visualizations for the Qlik product suites.
JavaScript Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: update dependencies (#421) Jul 9, 2019
.github docs: specify yarn version (#265) Nov 27, 2018
docs chore(deps): update minor and patch (#417) Jul 16, 2019
examples refactor: prepare compose API (#354) Apr 4, 2019
packages chore(deps): update minor and patch (#426) Aug 12, 2019
plugins chore(release): v0.26.1 🚀 Jun 13, 2019
test refactor: prepare compose API (#354) Apr 4, 2019
website chore(deps): update minor and patch (#422) Jul 20, 2019
.commitlintrc.js chore: enable commit message lint [skip ci] Sep 7, 2018
.editorconfig chore: Update to 2 space indentation in comment (#41) Feb 27, 2018
.eslintignore refactor: move unit test closer to source file (#195) Sep 24, 2018
.eslintrc.json test: add protractor sanity test (#334) Mar 28, 2019
.gitattributes Initial commit Feb 9, 2018
.gitignore chore(docs): gitignore docs/dist (#86) May 28, 2018
CHANGELOG.md docs: update changelog with yanked release Jun 13, 2019
LICENSE Initial commit Feb 9, 2018
README.md refactor: prepare compose API (#354) Apr 4, 2019
aw.config.js chore(deps): update dependency @after-work.js/aw to v6 (#330) Mar 27, 2019
aw.config.ptor.js test: add protractor sanity test (#334) Mar 28, 2019
azure-pipelines.yml chore: set selenium version to avoid using 4.0.0-alpha (#384) Apr 25, 2019
babel.config.js chore: use preact as dom renderer (#174) Aug 28, 2018
lerna.json chore(release): v0.26.1 🚀 Jun 13, 2019
package.json chore(deps): update minor and patch (#426) Aug 12, 2019
renovate.json chore(deps): update rollup dependencies (#398) May 21, 2019
rollup.config.js build: fix module bundle (#196) Sep 23, 2018
yarn.lock chore(deps): update minor and patch (#426) Aug 12, 2019

README.md

CircleCI Coverage Status

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,
        }
      }
    ]
  }
});

Bubbles

More examples

Contributing

Please follow the instructions in our contributing guide.

You can’t perform that action at this time.