A charting library streamlined for building visualizations for the Qlik Sense Analytics platform.
Documentation
Visit qlik.dev 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',
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() {
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