picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
y: {
data: { fields: ['Low', 'High'] },
invert: true,
expand: 0.4
},
t: { data: { extract: { field: 'Date' } } }
},
components: [{
type: 'grid-line',
x: 't'
},{
type: 'axis',
dock: 'left',
scale: 'y'
},{
type: 'axis',
dock: 'bottom',
scale: 't',
formatter: {
type: 'd3-time',
format: '%Y-%m'
}
}, {
key: 'lines',
type: 'line',
data: {
extract: {
field: 'Date',
props: {
low: { field: 'Low' },
high: { field: 'High' }
}
}
},
settings: {
coordinates: {
major: { scale: 't' },
minor0: { scale: 'y', ref: 'low' },
minor: { scale: 'y', ref: 'high' }
},
layers: {
curve: 'monotone',
line: {
show: false
},
area: {}
}
}
}]
}
})
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.
