BokehJS frontend library React Recommended Approach

Community Support
1

I am currently looking for more information on using BokehJs as a frontend library for React.
So far I have not find any useful information except this post.

I’m embedding a plot created from a Flask backend. So far what I found by myself was is to use Bokeh like bellow, after installing @bokeh/bokehjs

import Bokeh from '@bokeh/bokehjs/build/js/bokeh.esm.min.js';

…
// and then

  PlotGraph(){
    fetch('http://localhost:5000/plot', 
      {
        method: 'post',
        body: ''
      }
    ).then(response => response.json().then(data => {         
        const myNode = document.getElementById("bokeh_plot");
        myNode.replaceChildren(); // clean previous plot
        Bokeh.embed.embed_item(data, "bokeh_plot");            
      }) 
    )      
  }

So far it’s working but I could not find any more information if this is the recommended approach. Couldn’t find more information regarding this use case.
Is there any? Could not find here either.

I’m also posting in here in case someone suffers as much as I did and this might be useful for her.

1 Like
3

That seems fine. It will replace the entire Bokeh document. It is also possible to update existing plots “in place” by just setting new data on existing data sources, etc. It’s not really possible to offer guidance about “better” without knowing more about what you are doing, what your goals are, etc.

So far I have not find any useful information

FWIW Bokeh was created mostly by Python devs who wanted to avoid JavaScript, for Python devs who wanted to avoid JavaScript. People nowadays do want to use BokehJS as a pure JS library, which is great. But. I don’t feel confident offering much “BokehJS” advice or documentation because I do not regard myself as a good (or even decent) JS programmer in the slightest. It would be really great if some experienced JS devs decided to become involved contributors so that that side of the story for Bokeh can be improved.

1 Like
4

Cool thanks for the answer nonetheless! I’m for sure a worse JS programmer than you.
Well for simple my goal is to use Python/Flask for backend (math, geodesic calculations and Bokeh for generating some plots) and React for frontend since it generates a faster and cleaner UI. In the end I’m satisfied now. It was just that I wanted to have found easier information on how or which BokeJS bundle/module was ‘typescripted capable’ of being imported. That’s for sure because I’m novice in JS too.
Either way thanks again for the answer.

5

Thanks for this. I am sharing what worked for me since even I found it difficult with the documentation available. I am trying to serve Bokeh chart with DRF to React Front end.

`