Skip to main content
Ctrl+K
Logo image

Site Navigation

  • Getting Started
  • How-to
  • Explanation
  • Component Gallery
  • App Gallery
  • API Reference
  • Upgrade Guide
  • FAQ
  • About
  • Developer Guide

Site Navigation

  • Getting Started
  • How-to
  • Explanation
  • Component Gallery
  • App Gallery
  • API Reference
  • Upgrade Guide
  • FAQ
  • About
  • Developer Guide

FOR USERS

  • Getting Started
    • Installation
    • Build an app
    • Core Concepts
  • How-to
    • Prepare to develop
      • Develop in a notebook
        • Display Output in Notebooks
        • Develop in other notebook environments
      • Develop in an editor
        • Develop Apps in an Editor
        • Write apps in Markdown
    • Build apps
      • Construct individual components
        • Construct Panes
        • Access Pane Type
        • Access and Set Widget Values
        • Add or Remove Components from Panels
      • Styling components
        • Apply a Design
        • Toggling themes
        • Apply CSS
        • Customize Loading Icon
        • Control Visibility
        • Style Altair Plots
        • Style Echarts Plots
        • Style Matplotlib Plots
        • Style Plotly Plots
        • Style Vega Plots
      • Interactivity
        • Add interactivity to a function
        • Add interactivity with generators
        • Add reactivity to components
        • Make interactive data workflows
      • Arranging components
        • Customize Spacing
        • Align Components
        • Control Size
    • Use specialized UIs and APIs
      • Build a sequential UI
        • Create a Pipeline
        • Customize Pipeline Layout
        • Control Pipeline Flow
      • Build custom components
        • Combine Existing Components
        • Build Components from Scratch
      • Explicitly link parameters (Callbacks API)
        • Create High-Level Python Links with .link
        • Create Low-Level Python Links Using .watch
        • Link Two Objects in Javascript
        • Link Plot Parameters in Javascript
        • Link Many Objects in Javascript
      • Generate UIs from declared parameters (Declarative API)
        • Generate Widgets from Parameters
        • Declare Custom Widgets
        • Declare parameter dependencies
        • Create nested UIs
    • Manage session tasks
      • Register Session Callbacks
        • Use Asynchronous Callbacks
        • Defer Bound Functions to Improve the User Experience
        • Defer Long Running Tasks to Improve the User Experience
        • Run Tasks at Session Start or End
        • Periodically Run Callbacks
        • Schedule Global Tasks
        • Modify Bokeh Models
      • Access Session State
        • Access and Manipulate the URL
        • Access HTTP Request State
        • Access Busyness state
    • Test and debug
      • Enable profiling and debugging
        • Enable the admin panel
        • Profile your Application
        • View application logs
      • Set up testing for an application
        • Test functionality and performance
        • Test UI rendering
        • Test operating capacity
    • Prepare to share
      • Apply Templates
        • Set a Template
        • Arrange Components in a Template
        • Toggle Modal
        • Customize Template Theme
        • Build a Custom Template
      • Improve Performance
        • Reuse sessions
        • Enable Throttling
      • Cache Data
        • Manually Cache
        • Automatically Cache
      • Improve Scalability
        • Load balancing
        • Launch multiple processes
        • Enable Automatic Threading
        • Use Asynchronous Processing
      • Add Authentication
        • Configuring Basic Authentication
        • Configuring OAuth
        • OAuth Providers
        • Accessing User information
        • Authorization callbacks
        • Allowing Guest Users
    • Share your work
      • Configure the server
        • Launching a server on the commandline
        • Launching a server dynamically
        • Serving multiple applications
        • Connect to a remote server via SSH
        • Configuring a reverse proxy
        • Serving static files
      • Integrate with other servers
        • Integrating Panel with Flask
        • Integrating Panel with FastAPI
        • Running Panel apps inside Django
      • Deploy applications
        • Microsoft Azure
        • MyBinder
        • Google Cloud Platform (GCP)
        • Heroku
        • Hugging Face
      • Export apps
        • Embedding state
        • Save App to File
        • Access the Bokeh Model
      • Run panel in WebAssembly
        • Converting Panel applications
        • Using Panel in Pyodide & PyScript
        • Embedding in Sphinx documentation
        • Setting up JupyterLite
    • Migrate to Panel
      • Migrate from Streamlit
        • Get Started migrating from Streamlit to Panel
        • Displaying Content with Panes
        • Organize Components with Layouts
        • Accepting User Inputs with Widgets
        • Organize and Style with Templates
        • Show Activity
        • Add Interactivity with pn.bind
        • Improve the performance with Caching
        • Session State
        • Multi Page Apps
  • Explanation
    • APIs
      • API context
        • Reactive API
        • Declarative API
        • Callbacks
    • Components
      • Components overview
      • Custom components
    • Linking
      • Panel and JS communications
    • Styling
      • Templates
    • Dependencies
      • Panel and Param
      • Panel and Bokeh
    • Technology comparisons
      • Panel vs Dash
      • Panel vs ipywidgets
      • Panel vs Voila
      • Panel vs Streamlit
      • Panel vs JavaScript
      • Panel vs Bokeh
  • Component Gallery
    • Panes
      • Alert
      • Audio
      • Bokeh
      • DataFrame
      • DeckGL
      • ECharts
      • Folium
      • GIF
      • HTML
      • HoloViews
      • IPyWidget
      • Image
      • JPG
      • JSON
      • LaTeX
      • Markdown
      • Matplotlib
      • PDF
      • PNG
      • Param
      • Perspective
      • Plotly
      • ReactiveExpr
      • Reacton
      • SVG
      • Str
      • Streamz
      • VTK
      • VTKJS
      • VTKVolume
      • Vega
      • Video
      • Vizzu
    • Widgets
      • ArrayInput
      • AutocompleteInput
      • Button
      • ChatBox
      • CheckBoxGroup
      • CheckButtonGroup
      • Checkbox
      • CodeEditor
      • ColorMap
      • ColorPicker
      • CrossSelector
      • DataFrame
      • DatePicker
      • DateRangeSlider
      • DateSlider
      • DatetimeInput
      • DatetimePicker
      • DatetimeRangeInput
      • DatetimeRangePicker
      • DatetimeRangeSlider
      • Debugger
      • DiscretePlayer
      • DiscreteSlider
      • EditableFloatSlider
      • EditableIntSlider
      • EditableRangeSlider
      • FileDownload
      • FileInput
      • FileSelector
      • FloatInput
      • FloatSlider
      • IntInput
      • IntRangeSlider
      • IntSlider
      • JSONEditor
      • LiteralInput
      • MenuButton
      • MultiChoice
      • MultiSelect
      • PasswordInput
      • Player
      • RadioBoxGroup
      • RadioButtonGroup
      • RangeSlider
      • Select
      • SpeechToText
      • StaticText
      • Switch
      • Tabulator
      • Terminal
      • TextAreaInput
      • TextEditor
      • TextInput
      • TextToSpeech
      • Toggle
      • ToggleGroup
      • VideoStream
    • Layouts
      • Accordion
      • Card
      • Column
      • Divider
      • FlexBox
      • FloatPanel
      • GridBox
      • GridSpec
      • GridStack
      • Row
      • Swipe
      • Tabs
      • WidgetBox
    • Chat
      • ChatFeed
      • ChatInterface
      • ChatMessage
      • PanelCallbackHandler
    • Global
      • Notifications
    • Indicators
      • BooleanStatus
      • Dial
      • Gauge
      • LinearGauge
      • LoadingSpinner
      • Number
      • Progress
      • TooltipIcon
      • Tqdm
      • Trend
    • Templates
      • Bootstrap
      • FastGridTemplate
      • FastListTemplate
      • GoldenLayout
      • Material
      • React
      • Slides
      • Vanilla
  • App Gallery
    • Portfolio Optimizer
    • Streaming Videostream
    • Windturbines
    • Portfolio Analyzer
    • Glaciers
    • Vtk Slicer
    • Nyc Deckgl
    • Gapminders
    • Vtk Interactive
    • Penguin Crossfilter
    • Deckgl Game Of Life
    • Hvplot Explorer
    • Xgboost Classifier
    • Altair Brushing
    • Vtk Warp
    • Iris Kmeans
    • Penguin Kmeans
  • API Reference
    • Cheat Sheet
    • Config
    • State
    • panel.io Package
    • panel.layout Package
    • panel.pane Package
      • panel.vtk Package
    • param Module
    • pipeline Module
    • panel.template Package
      • panel.bootstrap Package
      • panel.fast Package
        • panel.grid Package
        • panel.list Package
      • panel.golden Package
      • panel.material Package
      • panel.react Package
      • panel.slides Package
      • panel.vanilla Package
    • panel.util Package
    • viewable Module
    • panel.widgets Package
  • Upgrade Guide
  • FAQ
  • About
    • Releases

FOR DEVELOPERS

  • Developer Guide
    • Extensions
    • Testing
    • WASM
  • How-to
  • Link Parameters with Callbacks API
  • Link Plot Parameters in Javascript

Link Plot Parameters in Javascript#

This guide addresses how to link Bokeh and HoloViews plot parameters in Javascript.

Prerequisites

  1. The How to > Link Two Objects in Javascript guide demonstrates how to use the .jslink API to link parameters in Javascript.


The How to > Link Two Objects in Javascript guide demonstrated how to link simple static panes, but links are probably most useful when combined with dynamic objects like plots.

Link Bokeh plots#

The jslink API trivially allows us to link a parameter on a Panel widget to a Bokeh plot property. Here we create a Bokeh Figure with a simple sine curve. The jslink method allows us to pass any Bokeh model held by the Figure as the target, then link the widget value to some property on it. E.g. here we link a FloatSlider value to the line_width of the Line glyph:

import numpy as np
import panel as pn

from bokeh.plotting import figure

pn.extension()

p = figure(width=300, height=300)
xs = np.linspace(0, 10)
r = p.line(xs, np.sin(xs))

width_slider = pn.widgets.FloatSlider(name='Line Width', start=0.1, end=10)
width_slider.jslink(r.glyph, value='line_width')

pn.Column(width_slider, p)

Link HoloViews plots#

Bokeh models allow us to directly access the underlying models and properties, but this access is more indirect when working with HoloViews objects. HoloViews makes various models available directly in the namespace so that they can be accessed for linking:

  • cds: The bokeh ColumnDataSource model which holds the data used to render the plot

  • glyph: The bokeh Glyph defining the style of the element

  • glyph_renderer: The Bokeh GlyphRenderer responsible for rendering the element

  • plot: The bokeh Figure

  • xaxis/yaxis: The Axis models of the plot

  • x_range/y_range: The x/y-axis Range1d models defining the axis ranges

All these are made available in the JS code’s namespace if we decide to provide a JS code snippet, but can also be referenced in the property mapping. We can map the widget value to a property on the glyph by providing a specification separated by periods. E.g. in this case we can map the value to the glyph.size:

import holoviews as hv
import holoviews.plotting.bokeh

colors = ["black", "red", "blue", "green", "gray"]

size_widget = pn.widgets.FloatSlider(value=8, start=3, end=20, name='Size')
color_widget = pn.widgets.Select(name='Color', options=colors, value='black')

points = hv.Points(np.random.rand(10, 2)).options(padding=0.1, line_color='black')

size_widget.jslink(points, value='glyph.size')
color_widget.jslink(points, value='glyph.fill_color')

pn.Row(points, pn.Column(size_widget, color_widget))

Of course, if you need to transform between the displayed widget value and the value to be used on the underlying Bokeh property, you can add custom JS code as shown in the guide on JS-callbacks. Together these linking options should allow you to express whatever interactions you wish between your Panel objects.

Related Resources#

  • See the Explanation > APIs for context on this and other Panel APIs

previous

Link Two Objects in Javascript

next

Link Many Objects in Javascript

Support us with a star on GitHub
On this page
  • Link Bokeh plots
    • Link HoloViews plots
  • Related Resources

© Copyright 2019-2023 Holoviz contributors.

Created using Sphinx 5.3.0.

Built with the PyData Sphinx Theme 0.13.3.