Bokeh Plots JS standalone

Community Support
1

Hello,

I am working on a Bokeh application in pure JS and HTML and this is just a basic example. Is there a reason why I cannot change some properties of figures? For example I can define the axis label when I define the figure, but I can not change the axis label afterwards. Weirdly, sometimes the opposite is true. The size of the plot can not be changed within the definition of the plot, but they can be changed after defining the plot.

Does anybody have any insight on this issue. Apologies for wrong terminology, I am new to this stuff

Thank you!

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Test</title>

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.3.min.js"></script>
<script>
var g_xdr = new Bokeh.Range1d({ start: -5, end: 20 });
var g_ydr = new Bokeh.Range1d({ start: -100, end: 5000 });

var g = new Bokeh.Plotting.figure({
    title: "Graph",
    x_range: g_xdr,
    y_range: g_ydr,
    x_axis_label: "X Axis",
    plot_width: 400,
    plot_height: 400,
    background_fill_color: "#F2F2F7"
});


g.x_axis_label_size = "30px"
g.x_axis_label = "Test"

g.plot_width = 500

Bokeh.Plotting.show(Bokeh.Plotting.gridplot([[g]]));
</script>

</head>

<body>
</body>

</html><!doctype html>
2

The figure function accepts some convenience parameters to make initializing things easier, but to set things after initialization you would need to set the actual properties of the actual axis object within the plot. Also, the properties you are trying to set don’t exist, e.g. there is no axis_label_size, presumably you mean axis_label_text_font_size. In general the Reference Guide is the best, definitive place to see what properties exist on what objects (for both Python and JS, they are always maintained in sync).

So, something like (untested):

const xax = g.xaxis()[0] // a list since in general there could be mulitple

xax.axis_label_text_font_size = "30px"
xax.axis_label = "Test"
3

Thank you for your quick response, but that did not work, I get an error saying g.xaxis is not a function.

4

I guess it is a getter not a method:

So then: g.xaxis[0] (no function call), instead

5

Thanks a lot! This worked.

6

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