Home / Python / Data Visualization

Panel HighCharts - This repository provides a HighCharts extension for Panel

The panel-highcharts package makes it easy to use Highcharts from Python for exploratory analysis in a Jupyter Notebook or as a Panel Web App.
Information
Category: Python / Data Visualization
Watchers: 4
Star: 113
Fork: 17
Last update: Aug 3, 2022
Resource links
https://github.com/MarcSkovMadsen/panel-highcharts

Panel HighCharts Logo

📈 Panel HighCharts

The panel-highcharts package makes it easy to use Highcharts from Python for exploratory analysis in a Jupyter Notebook or as a Panel Web App.

Check out the panel-highcharts examples on Binder

Jupyter Notebook Jupyter Labs Panel Apps
Binder Binder Binder

Panel HighChart Reference Example

THIS IS APLHA SOFTWARE. I BELIEVE THINGS WORK, BUT THE PACKAGE NEEDS TO BE USED TO TELL. AND USAGE MIGHT ALSO CHANGE THE API.

License

The panel-highcharts python package and repository is open source and free to use (MIT License), however Highcharts itself requires a license for commercial use. For more info see the Highcharts license FAQs.

Installation

With pip

pip install panel-highcharts

Usage

From with a Jupyter Notebook

import panel_highcharts as ph

import panel as pn
pn.extension('highchart')
configuration = {
    "title": {"text": "HighChart Pane"},
    "series": [
        {
            "name": "series1",
            "data": [1, 2, 3, 4, 5],
        }
    ]
}
ph.HighChart(object=configuration, sizing_mode="stretch_width")

Basic Example

Reference Guides

Binder

Binder

Binder

Binder

Examples

Binder

Additional Resources

You can find more inspiration via the links below.

Roadmap

When I get the time I would like to

  • Support pandas .plot api via method as .highplot on dataframes
  • Add more examples
  • Add badges for 100% test coverage etc.
  • Distribute as conda package

Change Log

  • 20210405: Add HighStock, HighMap, HighGantt
  • 20210404: Can now display in Classic Notebook
  • 20210403: First Release to PyPi. Works in Jupyter Lab and Panel App.
3 Open More issues
Closed

Highstock chart buttons/slider always appear in the front of the panel dashboard

I created a simple dashboard with panel.Tabs. When I add a highstock chart to a a tab using panel_highcharts the slider and the button of the chart appear in every tabs. Here is a reproducible example:

import panel_highcharts as ph
import panel as pn
import pandas as pd
import numpy as np


pn.extension('highstock')


def convert_returns(returns):
    prices = (1 + returns).cumprod().to_list()
    timestamps = list(returns.index.map(lambda x: int(float(x.to_datetime64()) / 1_000_000)))
    return list(map(list, zip(timestamps, prices)))


def plot_returns_highcharts(returns):
    data = convert_returns(returns)
    configuration = {
        "rangeSelector": {
            "inputEnabled": False,
        },
        "series": [
            {"name": "series", "type": "line", "data": data, "tooltip": {"valueDecimals": 2}}
        ],
        "yAxis": {
            "labels": {
                "formatter": """function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }"""
            },
            "plotLines": [{
                "value": 0,
                "width": 2,
                "color": 'silver'
            }]
        },
        "plotOptions": {
            "series": {
                "compare": 'percent',
                "showInNavigator": True
            }
        },
    }
    chart = ph.HighStock(object=configuration)
    return chart

returns = pd.Series(np.random.normal(0, 0.01, 1_000),
                    index=pd.date_range("2000-01-01", freq="D", periods=1_000))

dashboard = pn.Column(
    pn.pane.Markdown("## Dashboard"),
    pn.Tabs(
        ("description", pn.pane.Str("blablabla...")),
        ("chart", plot_returns_highcharts(returns)),
        tabs_location="left"
    )
)

dashboard

Here's the output:

Screenshot from 2022-02-19 12-45-35

The tab chart is displayed properly:

Screenshot from 2022-02-19 12-46-34

Sorry if it's just a setting I wrongly configured, I spent quite some time on it and couldn't find what's wrong. Thank you!

opened Feb 19, 2022 by thetradingflow 8
Closed

highcharts_no_data failing

This code fails due to inconsistent keys between highbase.py and the other models. ph.config.js_files(highcharts_no_data=True)

opened Oct 21, 2021 by vincent-cph 4
Closed

support to variwide module

Missing support to the module variwide: https://www.highcharts.com/docs/chart-and-series-types/variwide-chart#! A quite useful module for plotting supply stacks for example ;) It is also not present in HS file service https://code.highcharts.com/ and not part of panel_highcharts.config.js_files

opened Aug 15, 2021 by vincent-cph 2
Closed

Cannot add second series dynamically

Working in JupyterLab, it appears that a second data series cannot be added to an existing chart.

Example Code showing the problem:

Original Chart:

import panel_highcharts as ph

configuration = {
 'title': {'text': 'Stock Chart: UPST'},
 'rangeSelector': {'selected': 1},
 'xAxis': {'type': 'datetime'},
 'series': [{'id': 'pricehistory',
   'name': 'UPST Price History',
   'data': [[1608076800000.0, 29.47],
    [1608163200000.0, 35.77],
    [1608249600000.0, 44.09],
    [1608508800000.0, 41.1],
    [1608595200000.0, 47.84],
    [1608681600000.0, 46.32],
    [1608768000000.0, 43.96],
    [1609113600000.0, 42.63],
    [1609200000000.0, 40.75],
    [1609286400000.0, 38.87],
    [1609372800000.0, 40.75],
    [1609718400000.0, 43.99],
    [1609804800000.0, 48.37],
    [1609891200000.0, 52.14],
    [1609977600000.0, 55.39],
    [1610064000000.0, 52.73],
    [1610323200000.0, 54.71],
    [1610409600000.0, 62.48],
    [1610496000000.0, 57.88],
    [1610582400000.0, 60.64],
    [1610668800000.0, 56.0],
    [1611014400000.0, 54.28],
    [1611100800000.0, 55.22],
    [1611187200000.0, 63.77],
    [1611273600000.0, 64.47],
    [1611532800000.0, 67.36],
    [1611619200000.0, 64.45],
    [1611705600000.0, 64.7],
    [1611792000000.0, 65.15],
    [1611878400000.0, 62.19],
    [1612137600000.0, 70.25],
    [1612224000000.0, 75.47],
    [1612310400000.0, 79.75],
    [1612396800000.0, 75.75],
    [1612483200000.0, 75.24],
    [1612742400000.0, 76.0],
    [1612828800000.0, 80.25],
    [1612915200000.0, 91.04],
    [1613001600000.0, 95.13],
    [1613088000000.0, 102.18],
    [1613433600000.0, 92.28],
    [1613520000000.0, 87.24],
    [1613606400000.0, 82.32],
    [1613692800000.0, 89.73],
    [1613952000000.0, 77.01],
    [1614038400000.0, 73.06],
    [1614124800000.0, 74.51],
    [1614211200000.0, 68.52],
    [1614297600000.0, 65.64],
    [1614556800000.0, 66.65],
    [1614643200000.0, 60.36],
    [1614729600000.0, 57.58],
    [1614816000000.0, 54.92],
    [1614902400000.0, 51.16],
    [1615161600000.0, 46.87],
    [1615248000000.0, 53.24],
    [1615334400000.0, 52.99],
    [1615420800000.0, 59.24],
    [1615507200000.0, 58.0],
    [1615766400000.0, 62.93],
    [1615852800000.0, 60.05],
    [1615939200000.0, 60.79],
    [1616025600000.0, 115.09],
    [1616112000000.0, 125.28],
    [1616371200000.0, 164.87],
    [1616457600000.0, 118.48],
    [1616544000000.0, 112.28],
    [1616630400000.0, 123.73],
    [1616716800000.0, 142.95],
    [1616976000000.0, 134.49],
    [1617062400000.0, 129.28],
    [1617148800000.0, 128.86],
    [1617235200000.0, 144.28],
    [1617580800000.0, 140.52],
    [1617667200000.0, 144.3],
    [1617753600000.0, 126.07],
    [1617840000000.0, 123.33],
    [1617926400000.0, 127.29],
    [1618185600000.0, 112.46],
    [1618272000000.0, 110.46],
    [1618358400000.0, 104.51],
    [1618444800000.0, 110.4],
    [1618531200000.0, 104.65],
    [1618790400000.0, 97.55],
    [1618876800000.0, 91.79],
    [1618963200000.0, 100.61],
    [1619049600000.0, 101.44],
    [1619136000000.0, 107.38],
    [1619395200000.0, 111.24],
    [1619481600000.0, 116.33],
    [1619568000000.0, 113.75],
    [1619654400000.0, 108.56],
    [1619740800000.0, 109.02],
    [1620000000000.0, 114.2],
    [1620086400000.0, 107.36],
    [1620172800000.0, 98.19],
    [1620259200000.0, 92.04],
    [1620345600000.0, 95.97],
    [1620604800000.0, 88.21],
    [1620691200000.0, 89.44],
    [1620777600000.0, 91.82],
    [1620864000000.0, 84.05],
    [1620950400000.0, 103.36],
    [1621209600000.0, 115.0],
    [1621296000000.0, 119.49],
    [1621382400000.0, 132.91],
    [1621468800000.0, 139.08],
    [1621555200000.0, 153.85],
    [1621814400000.0, 139.77],
    [1621900800000.0, 133.7],
    [1621987200000.0, 146.58],
    [1622073600000.0, 166.83],
    [1622160000000.0, 148.22],
    [1622505600000.0, 144.49],
    [1622592000000.0, 157.14],
    [1622678400000.0, 164.83],
    [1622764800000.0, 164.04],
    [1623024000000.0, 170.0],
    [1623110400000.0, 162.01],
    [1623196800000.0, 152.43],
    [1623283200000.0, 146.42],
    [1623369600000.0, 125.505],
    [1623628800000.0, 124.69],
    [1623715200000.0, 123.03]],
   'tooltip': {'valueDecimals': 2}}]
}
chart = ph.HighStock(object=configuration, sizing_mode="stretch_width", height=400)

Attempt to add a second series

chart.object_update = {
    'series':chart.object['series'] + [
                {
                    'type':'flags',
                    'onSeries':'pricehistory',
                    'shape':'circlepin',
                    'data':[ {
                        'x': r['Date_BUY'],
                        'title':"BUY",
                        'text':f'BUY UPST {r["Units"]} Shares @ ${r["Value_BUY"]/r["Units"]:.2f}'
                    } for k,r in j.iterrows() 
                    ]
                }
    ]
}

In the above chart.object_update code, I can replace the existing series if I do not include the original series. However, that is not the behavior I want. The above code which sets new series data for two data series (the original and flags) leaves the chart unmodified. (side note: it works to create both series at the same time in the original chart, but that is not the behavior I am looking for)

As far as I can determine, there is no other mechanism to dynamically add a data series.

In Javascript, adding a series to a highstock chart is possible using the chart.addSeries({...}); method followed by chart.redraw();

opened Jun 17, 2021 by othalan 2
Closed

the highcharts-more.js file must be loaded

missingModuleFor: packedbubble;

the highcharts-more.js file must be loaded

opened May 10, 2021 by sygspjlsj 2
Closed

catching JS errors

Would be pretty cool if the JS errors like below could be somehow caught and raised as a python exception?

image

opened Aug 15, 2021 by vincent-cph 1
Open

ImportError: cannot import name 'string_types' from 'panel.util'

When testing on panel 0.13.0rc5 I get

2022-04-07 21:07:49,779 Error running application handler <bokeh.application.handlers.script.ScriptHandler object at 0x0000029BC561FE50>: cannot import name 'string_types' from 'panel.util' (c:\repos\private\awesome-panel\.venv\lib\site-packages\panel\util.py)
File 'charts.py', line 6, in <module>:
from panel.util import lazy_load, string_types Traceback (most recent call last):
  File "c:\repos\private\awesome-panel\.venv\lib\site-packages\bokeh\application\handlers\code_runner.py", line 231, in run
    exec(self._code, module.__dict__)
  File "C:\repos\private\awesome-panel\awesome_panel\apps\highcharts_add_series_dynamically.py", line 3, in <module>
    import panel_highcharts as ph
  File "c:\repos\private\awesome-panel\.venv\lib\site-packages\panel_highcharts\__init__.py", line 7, in <module>
    from .charts import HighChart, HighGantt, HighMap, HighStock
  File "c:\repos\private\awesome-panel\.venv\lib\site-packages\panel_highcharts\charts.py", line 6, in <module>
    from panel.util import lazy_load, string_types
ImportError: cannot import name 'string_types' from 'panel.util' (c:\repos\private\awesome-panel\.venv\lib\site-packages\panel\util.py)
opened Apr 7, 2022 by MarcSkovMadsen 0
Open

blank graph when running in jupyter

image
opened Mar 31, 2022 by lovepocky 1
Open

Please prepare package for mypy

When running mypy on code using panel_highcharts we get found module but no type hints or library stubs.

Please fix

bug 
opened Dec 1, 2021 by MarcSkovMadsen 0

Contents

    weizhenye vue-highcharts - Highcharts component for Vue.
    highcharts Highcharts JS, the JavaScript charting framework
    highcharts Highcharts JS, the JavaScript charting framework
    michelson Make highcharts a la ruby , works in rails 5.X / 4.X / 3.X, and other ruby web frameworks
    TradingPal 📈 Add Highcharts charts to react-native app for IOS and Android
    kejodion Laravel Admin Panel ("LAP") is a drop-in admin panel package for Laravel which promotes rapid scaffolding & development.
    officert vue-slideout-panel - Stackable panel component for VueJS
    pawamoy Visualize your shell usage with Highcharts!
    hnvn A package for flip panel with built-in animation
    hnvn A package for flip panel with built-in animation
    Pterodactyl Pterodactyl is the open-source game server management panel built with PHP7, Nodejs, and Go. Designed with security in mind, Pterodactyl runs all game servers in isolated Docker containers while exposing a beautiful and intuitive UI to administrators and users.
    bvdputte A Kirby 3 panel plugin to visualise the `site/logs` folder in the panel.
    ionide Extension creating alternative UX for real-time API exploration in VSCode
    typus Ruby on Rails control panel to allow trusted users edit structured content.
    akveo AngularJS Bootstrap Admin Panel Framework
    loftylabs Debug Django applications directly in Google Chrome Devtools.
    IdeasOnCanvas A floating panel for your iOS Apps
    TheoXiong vue-search-panel - A Vue component for searching with suggestions
    PierfrancescoSoffritti Android sliding panel that is part of the view hierarchy, not above it.
    pterodactyl Pterodactyl is the open-source game server management panel built with PHP7, Nodejs, and Go. Designed with security in mind, Pterodactyl runs all game servers in isolated Docker containers while exposing a beautiful and intuitive UI to administrators and users.
    codrops An inline menu layout with a playful hover animation and a gallery content preview panel.
    Share this repo

    Related Repos


    Data Visualization
    8.5k
    Simple animated GIF screen recorder with an easy to use interface
    phw Peek - an animated GIF recorder Simple screen recorder with an easy to use interface Contents About Requirements Runtime Development Installation Offi
     
    Data Visualization
    7
    A program which plots pattern that revolving planets make. Usually, people visualise just ...
    YuvrajGeek orbital-patterns Click to spawn planets Press "S" to capture screenshot. Image will be saved in the same directory as the script. Press "Q" to exit. P
     
    Data Visualization
    6
    Preparing CRAN for the retirement of rgdal, rgeos and maptools
    r-spatial evolution Preparing CRAN for the retirement of rgdal, rgeos and maptools The functionality of “rgdal”, “rgeos” and “maptools” has been largely superse
     
    Data Visualization
    50
    Use SVG images as ggplot points
    coolbutuseless ggsvg - Use SVG as points in ggplot ggsvg is an extension to ggplot to use arbitrary SVG as points. This SVG can be customised to respond to aesthetic
     
    Data Visualization
    8
    A simply dashboard to view commodities position data based on CFTC reports
    brad-darksbian commodities-dashboard A simply dashboard to view commodities position data based on CFTC reports This is a python project using Dash and plotly to con
     
    Data Visualization
    89
    Visualize your shell usage with Highcharts!
    pawamoy Shell History Inspired by bamos/zsh-history-analysis. Visualize your usage of Bash/Zsh through a web app thanks to Flask and Highcharts! Duration Leng
     
    Data Visualization
    169
    More styles and useful extensions for Matplotlib
    nschloe Some useful extensions for Matplotlib. Install with pip install matplotx[all] and use in Python with import matplotx See below for what matplotx can d
     
    Data Visualization
    12
    A thin wrapper for pysixel and matplotlib
    kktk-KO A thin wrapper for pysixel and matplotlib
     
    Data Visualization
    24
    A sixel graphics backend for matplotlib
    koppa Matplotlib-sixel backend A matplotlib backend which outputs sixel graphics onto the terminal. The code is inspired by the ipython-notebook matplotlib
     
    Data Visualization
    4
    Matplotlib personality wrapper for PlPlot in Fortran
    zoziha PlPlotLib PlPlotLib is a wrapper for PlPlot inspired by the interface of matplotlib. It is intended to fill the need for rapid feedback while developi
     
    Data Visualization
    28
    A visualization grammar.
    trifacta Vega: A Visualization Grammar Vega is a visualization grammar, a declarative format for creating and saving interactive visualization designs. With Ve
     
    Data Visualization
    24
    Create curved text paths in ggplot2
    AllanCameron geomtextpath Create curved text in ggplot2 The existing text-based geom layers in ggplot2 (geom_text and geom_label) are ideal for the majority of plo
     
    Data Visualization
    3
    python templates for MNRAS plots
    regmachado templots python templates for MNRAS plots About Some python templates for plotting figures. Examples include several subplot layouts that are commonly
     
    Data Visualization
    3
    Exploratory analysis and data visualization of aircraft accidents and incidents in Brazil.
    augusto-herrmann Exploring aircraft accidents in Brazil Occurrencies with aircraft in Brazil are investigated by the Center for Investigation and Prevention of Aircraf
     
    Data Visualization
    73
    Publication-quality data representation library based on Matplotlib.
    alopezrivera MPL Plotter MPL Plotter is a Matplotlib based Python plotting library built with the goal of delivering publication-quality plots concisely. The full