picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
collections: [{
key: 'stacked',
data: {
extract: {
field: 'Month',
props: {
series: { field: 'Year' },
end: { field: 'Sales' }
}
},
stack: {
stackKey: d => d.value,
value: d => d.end.value
}
}
}],
scales: {
y: {
data: {
collection: {
key: 'stacked'
}
},
invert: true,
expand: 0.2,
min: 0
},
t: { data: { extract: { field: 'Month' } }, padding: 0.3 },
color: { data: { extract: { field: 'Year' } }, type: 'color' }
},
components: [{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 't'
}, {
type: 'legend-cat',
scale: 'color',
dock: 'top',
settings: {
title: {
show: false
}
}
},{
key: 'bars',
type: 'box',
data: {
collection: 'stacked'
},
brush: {
trigger: [{
on: 'tap',
propagation: 'stop',
data: ['series'],
contexts: ['highlight']
}],
consume: [{
context: 'highlight',
style: {
inactive: {
opacity: 0.3
}
}
}]
},
settings: {
major: { scale: 't' },
minor: { scale: 'y', ref: 'end' },
box: {
fill: { scale: 'color', ref: 'series' }
}
}
}]
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
