Legends in standalone bokehjs

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>

Much less, due to resource constraints, and priorities. Also the API at the “models” level is identical. All the Bokeh objects have all the same properties on both sides. In that sense the bokeh.models reference docs serve both Python and JS. Similarly the BokehJS “plotting” API has also been made to match the Python bokeh.plotting API as much as is possible. Mostly any differences are cosmetic (JS args are often supplied in an object, etc).

I would love for BokehJS to be more highly developed as a first-class JS library of its own, but realistically that will probably require some motivated JS dev(s) to decide to become contributors to lead such an effort.

In the mean time, there are some BokehJS examples you can refer to here:

https://github.com/bokeh/bokeh/tree/branch-2.4/bokehjs/examples

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.