chart = {
const candleStick = Plot.plot({
width: width,
height: 350,
marginBottom: 10,
x: {label: null, round: false},
y: {axis: "right", grid: true, nice: true},
color: {type: "identity"},
marks: [
Plot.ruleX(data, {x: "Date", y1: "High", y2: "Low", stroke: getColor}),
Plot.barY(data, {x: "Date", y1: "Open", y2: "Close", fill: getColor})
]
});
candleStick.querySelector("g[text-anchor='middle']").remove();
const column = Plot.plot({
width: width,
height: 200,
x: {label: null, round: false, tickSize: 1, tickFormat: ticks},
y: {grid: true, axis: "right", tickFormat: "s"},
color: {type: "identity"},
marks: [Plot.barY(data, {x: "Date", y1: "Volume", fill: getColor})]
});
const overlay = Plot.plot({
width: width,
height: 570,
x: {label: null, round: false},
y: {axis: "right", type: "identity"},
color: {type: "identity"},
marks: [Plot.barY(data, {x: "Date", y1: 20, y2: 520})]
});
enableOverlay(overlay);
return html`<div>${[candleStick, column, overlay]}</div>`;
}