picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
y: {
data: { field: 'Sales' },
invert: true,
include: [0]
},
c: {
data: { field: 'Sales' },
type: 'color'
},
t: { data: { extract: { field: 'Month' } }, padding: 0.3 },
},
components: [{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 't'
},{
key: 'bars',
type: 'box',
data: {
extract: {
field: 'Month',
props: {
start: 0,
end: { field: 'Sales' }
}
}
},
settings: {
major: { scale: 't' },
minor: { scale: 'y' },
box: {
fill: { scale: 'c', ref: 'end' }
}
}
}]
}
})