Search code examples
pythonhighchartsstock

Can you provide a highcharts_stock example written in python with multiple line charts?


Can you point me to an example written in python that uses the latest version of highchart_stock 1.5.0 (as installed from pypi) for python and includes 2 series showing the closing price of two stocks displayed as line charts?

I've tried the documentation, a number of examples, and highchart's chatgtp help. I've had various degrees of partial success because of outdated examples which stop me from piecing the right solution together.


Solution

  • Full Disclosure: I'm the primary author of Highcharts for Python

    I'm sorry that you're having trouble with Highcharts Stock for Python. There's a tutorial that you may find helpful linked here. Note that the tutorial is written for Highcharts Core, but the exact same code will work in Highcharts Stock (just change your import statements to import from highcharts_stock rather than highcharts_core).

    Furthermore, you can find numerous working examples of Highcharts Stock visualizations in our examples repo linked here: https://github.com/highcharts-for-python/highcharts-for-python-demos

    Note that Binder has recently been having some performance issues, so you may want to clone the repo to review the Jupyter Notebooks locally to see how the visualizations render.

    That being said, below you will find a modified example from the demo repo showing two line series in Highcharts Stock showing some made-up closing price data:

    from highcharts_stock.chart import Chart
    from highcharts_stock.options.series.area import LineSeries
    import pandas as pd
    import datetime as dt
    
    df = pd.DataFrame({
        'date':[
            dt.datetime(2023,1,1), 
            dt.datetime(2023,1,2), 
            dt.datetime(2023,1,3), 
            dt.datetime(2023,1,4)
        ], 
        'closing1': [10,20,15,18], 
        'closing2': [12, 31, 45, 21]
    })
    
    line_series_1 = LineSeries.from_pandas(df,
                                           property_map = {
                                               'x': 'date',
                                               'y': 'closing1'
                                           })
    line_series_2 = LineSeries.from_pandas(df,
                                           property_map = {
                                               'x': 'date',
                                               'y': 'closing2'
                                           })
    
    my_chart = Chart(container = 'my_container', 
                     options = {
                         'title' : {
                             'text': 'Ticker'
                         },
                         'x_axis' : {
                             'type': 'datetime',
                             'title': {
                                 'text': 'Date'
                             }
                         }, 
                         'y_axis' : {
                             'title': {
                                 'text': 'Closing Price'
                             }
                         },
                         'series' : [line_series_1, line_series_2]
                     }
                    )
    
    

    when the chart gets serialized to JS using the .to_js_literal() method, it produces the JS code shown in this JS Fiddle: https://jsfiddle.net/highchartspython/u31Ljrte/

    Obviously, this toy example is just a toy. The data generated in the dataframe is completely made-up data, and the chart does not feature any formatting or significant interactivity. But nevertheless, I hope you find it helpful.

    And in the meantime, thanks for the feedback. We're hard at work to improve things with some coming releases of Highcharts for Python.