How can we display legends in bokehjs standalone. I am using following. but legends are not getting displayed. Do we have documentation for bokehjs. All documentation points to python.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bookejs</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.2.min.js"></script>
</head>
<body>
<div id="plot"></div>
<script>
// create some data and a ColumnDataSource
const x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
const y = x.map(function (v) { return v * 0.5 + 3.0; });
const z = x.map(function (v) { return v * 0.4 + 4.0; });
const source = new Bokeh.ColumnDataSource({ data: { x: x, y: y,z:z } });
// create some ranges for the plot
const xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
const ydr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
// make the plot
const plot = new Bokeh.Plot({
title: "BokehJS Plot",
x_range: xdr,
y_range: ydr,
width: 400,
height: 400,
background_fill_color: "#F2F2F7"
});
// add axes to the plot
const xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
const yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add grids to the plot
const xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
const ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
plot.add_layout(xgrid);
plot.add_layout(ygrid);
// add a Line glyph
const line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2,
legend:'Line1'
});
plot.add_glyph(line, source);
const line2 = new Bokeh.Line({
x: { field: "x" },
y: { field: "z" },
line_color: "#666699",
line_width: 2,
legend:'Line2'
});
plot.add_glyph(line2, source);
const doc = new Bokeh.Document()
doc.add_root(plot)
const div = document.getElementById("plot");
console.log("div",div);
Bokeh.embed.add_document_standalone(doc, div)
//Bokeh.Plotting.show(plot);
</script>
</body>
</html>