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.