panel/anywidget_component_examples/chartjs.py at 0e9953d7f4732fe0291f27a5146a40a3b4118fa6 · holoviz/panel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
"""ChartJS pane using Chart.js CDN library."""
import param
import panel as pn
from panel.custom import AnyWidgetComponent

class ChartJSComponent(AnyWidgetComponent):
    object = param.Dict()

    _esm = """
import { Chart } from "https://esm.sh/chart.js/auto"

function render({ model, el }) {
  const canvasEl = document.createElement('canvas')
  el.append(canvasEl)
  const create_chart = () => new Chart(canvasEl.getContext('2d'), model.get("object"))
  let chart = create_chart()
  model.on("change:object", () => {
    chart.destroy()
    chart = create_chart()
  })
  return () => chart.destroy()
}

export default { render };
"""

component = ChartJSComponent(
    object={
        "type": "line",
        "data": {
            "labels": ["January", "February", "March", "April", "May", "June", "July"],
            "datasets": [
                {
                    "label": "Data",
                    "backgroundColor": "rgb(255, 99, 132)",
                    "borderColor": "rgb(255, 99, 132)",
                    "data": [0, 10, 5, 2, 20, 30, 45],
                }
            ],
        },
        "options": {
            "responsive": True,
            "maintainAspectRatio": False,
        },
    },
    height=400,
    sizing_mode="stretch_width",
)