Plot.plot({
marginLeft: 60,
width: 1000,
title: "Chart Title",
x: {
label: "Hour"
},
y: {
label: "Billed",
grid: true,
tickFormat: d3.format("$0.2f")
},
color: { legend: true },
marks: [
Plot.barY(data, {
x: "hour",
y: "value",
tip: true
}),
Plot.text(data, {
text: (d) => `${d.value}`,
x: "hour",
y: "value",
textAnchor: "end",
dy: 10,
fill: "white"
}),
Plot.ruleY([0])
]
})
data=[{"hour":"17:00","value":3400.00},{"hour":"18:00","value":0.00},{"hour":"19:00","value":9000.00}];
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.
