c = picasso.chart({
element: document.querySelector("#container"),
data,
settings: {
collections: [
{
key: "stacked",
data: {
extract: [0, 1, 2].map((m, i) => ({
field: "Month",
props: {
series: i,
end: { field: data[0].data[0][i + 1] }
}
})),
stack: {
stackKey: (d) => d.value,
value: (d) => d.end.value
}
}
}
],
scales: {
y: {
data: {
collection: {
key: "stacked"
}
},
invert: true,
expand: 0.2,
min: 0
},
x: { data: { extract: { field: "Month" } } },
color: { data: [0, 1, 2], type: "categorical-color" }
},
components: [
{
type: "axis",
dock: "left",
scale: "y"
},
{
type: "axis",
dock: "bottom",
scale: "x"
},
{
key: "lines",
type: "line",
data: {
collection: "stacked"
},
settings: {
coordinates: {
major: { scale: "x" },
minor0: { scale: "y", ref: "start" },
minor: { scale: "y", ref: "end" },
layerId: { ref: "series" }
},
layers: {
curve: "monotone",
line: {
show: false
},
area: {
fill: { scale: "color", ref: "series" }
}
}
}
}
]
}
})
c.scale("color").range()
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.
