Bar chartStacked bar chartPopulation pyramidPoint matrixHeat mapDumbbell plotBox plotGantt chartLine chartStreaming line chartMulti axis line chartArea chartStacked area chartRange area chartStream graphPie chartDonut chartDonut chart with varying radiusDonut chart with labelsFamous activity gaugeBullet graphLabeling barsMarimekko chartParallel coordinates plotpicasso.js theme editor
Scatter plot
c = pic.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
s: {
data: {
field: 'Sales'
},
expand: 0.2,
invert: true
},
m: {
data: {
field: 'Margin'
},
expand: 0.1
},
col: {
data: { extract: { field: 'Year' } },
type: 'color'
}
},
components: [{
key: 'y-axis',
type: 'axis',
scale: 's',
dock: 'left'
}, {
type: 'legend-cat',
dock: 'right',
scale: 'col'
}, {
key: 'x-axis',
type: 'axis',
scale: 'm',
dock: 'bottom'
}, {
key: 'p',
type: 'point',
data: {
extract: {
field: 'Month',
props: {
y: { field: 'Sales' },
x: { field: 'Margin' },
group: { field: 'Year' }
}
}
},
settings: {
x: { scale: 'm' },
y: { scale: 's' },
shape: 'circle',
size: () => Math.random(),
strokeWidth: 2,
stroke: '#fff',
opacity: 0.8,
fill: { scale: 'col', ref: 'group' }
}
}]
}
})
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.
