picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
c: {
data: { field: 'Sales' },
type: 'color'
}
},
components: [
{
key: 'p',
type: 'pie',
data: {
extract: {
field: 'Year',
props: {
num: { field: 'Sales' }
}
}
},
settings: {
padAngle: 0.01,
startAngle: (startAngle * 2 * Math.PI) / 360,
endAngle: 2 * Math.PI + (startAngle * 2 * Math.PI) / 360,
slice: {
cornerRadius: 4,
innerRadius: 0.5,
arc: { ref: 'num' },
fill: { scale: 'c', ref: 'num' },
strokeWidth: 1,
stroke: 'rgba(255, 255, 255, 0.5)'
}
}
},
{
type: 'labels',
settings: {
sources: [
{
component: 'p',
selector: 'path',
strategy: {
type: 'slice',
settings: {
direction: rotate ? 'rotate' : 'horizontal',
labels: [
{
label: d => d.data.label,
fill: position === 'into' ? '#fff' : '#444',
placements: [{ position }]
}
]
}
}
}
]
}
}
]
}
})
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.
