The avatar for @skybrian
Brian Slesinsky
Published
Observable Plot Tricks
Edited
Sep 26, 2022
Fork of Add a horizontal scrollbar to an Observable Plot chart
•
1 fork
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<style>
.container {
display: flex;
align-items: flex-start;
padding-bottom: 30px;
user-select: none; <-- avoid selecting text while panning -->
}
.container .scrollbar {
overflow-x: scroll;
flex: 1;
}
.container .chart {
max-width: none;
cursor: grab; <-- change cursor to indicate that it can be panned -->
}
</style>
Insert cell
Insert cell
Insert cell
mutable dragging = false
Insert cell
{
chartElt.addEventListener("mousedown", () => {
mutable dragging = true;
});

function mousemove(e) {
if (mutable dragging) {
scrollElt.scrollLeft -= e.movementX;
}
}

function mouseup(e) {
mousemove(e);
mutable dragging = false;
}

window.addEventListener("mouseup", mouseup);
window.addEventListener("mousemove", mousemove);
invalidation.then(() => {
window.removeEventListener("mouseup", mouseup);
window.removeEventListener("mousemove", mousemove);
});
}
Insert cell

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.
Learn more