Plot.plot({
marks: [
Plot.line(data, {
x: "date",
y: "actuals",
stroke: "#5b6187"
}),
Plot.line(data, {
x: "date",
y: "forecast",
strokeDasharray: "2 2",
stroke: "#a2a5ba"
}),
Plot.ruleX([event.datetime], {
stroke: "black",
strokeWidth: 1
}),
Plot.ruleY([0]),
],
x: {
ticks: d3
.utcWeeks(...d3.extent(data, (d) => d.date))
.map((d) => d3.utcHour.offset(d, 6)),
tickFormat: (d) =>
d.toLocaleString("en-US", {
timeZone: "America/Chicago",
month: "short",
day: "numeric"
})
},
marginLeft: 50,
marginRight: 100,
width
})