0

I have a PlotView React component where I like to create a BokehJS figure and show it in a specific <div>. See code below:

import React, { useEffect } from 'react';

export enum PlotType {
    LINE
}

export interface IPlotViewProps {
    name: string,
    type: PlotType
}

// To remove TS error on window.Bokeh call
declare global {
    interface Window {
        Bokeh?: any;
    }
}
  

const PlotView = (props : IPlotViewProps) => {
    useEffect(() => {
        renderPlot()
    }, []);

    const renderPlot = () => {
        const Bokeh = window.Bokeh; // import from index.html (CDN)
        const plot = Bokeh.Plotting;

        const { type } = props;
        switch (type) {
            case PlotType.LINE:
                const x = [1, 2, 3, 4, 5];
                const y = [6, 7, 2, 4, 5];
                // create a new plot with a title and axis labels
                const p = plot.figure(
                    {
                        x_axis_label: 'x', 
                        y_axis_label: 'y',
                        sizing_mode:'stretch_width',
                    }
                );
                p.line(
                    {
                        x, 
                        y, 
                        line_width: 2
                    }
                );
                plot.show(p);
                break;
            default:
                throw new Error('Plot type is not implemented')
        }

    }

    return (
        <div>
           // Show the BokehJS figure/plot
        </div>
    );
};

export default PlotView;

I have not been able to embed the plot in a specific <div>. Every example I have seen serves the plot as json (which was implemented in Python) and embeds it using BokehJS API or BokehJS API is used to create a new HTML page. Is what I am asking even possible (embedding a BokehJS plot in a specific <div>? Please advise or if you require more information.

Farnaz K
  • 31
  • 2

0 Answers0