How to add stock-tools?

[canyone2015]

How to add stock-tools with indicators etc.?

ui.highchart(options=options, type='stockChart',
             extras=['stock', 'accessibility', 'stock-tools']
             ).style(chart_style)

I don't know how to add this:

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>

[falkoschindler]

Hi @canyone2015,

Does this help?

ui.add_head_html('''
<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>

<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/modules/stock-tools.js"></script>
''')

I'm not too familiar with HightCharts, so I'm not sure how the expected result would look like.

[canyone2015]

Then I have the following

Problems (JavaScript Console)

Uncaught TypeError: Cannot read properties of undefined (reading 'seriesTypes')
    at indicators-all.js:9:703
Uncaught TypeError: Cannot read properties of undefined (reading 'win')
    at s (drag-panes.js:10:446)
Uncaught TypeError: Cannot destructure property 'addEvent' of 't' as it is undefined.
    at annotations-advanced.js:9:625
Uncaught TypeError: Cannot destructure property 'composed' of 's' as it is undefined.
    at price-indicator.js:10:652
Uncaught TypeError: Cannot destructure property 'composed' of 't' as it is undefined.
    at full-screen.js:10:659
Uncaught TypeError: Cannot read properties of undefined (reading 'win')
    at e (stock-tools.js:10:447)
Uncaught TypeError: Cannot read properties of undefined (reading 'seriesTypes')
    at heikinashi.js:9:707
Uncaught TypeError: Cannot destructure property 'seriesTypes' of 't' as it is undefined.
    at hollowcandlestick.js:9:667

Minimal reproducible example

from nicegui import ui


STOCK_CHART = {
    'yAxis': [
        {
            'height': '80%',
            'plotLines': []
        },
        {
            'top': '80%',
            'height': '20%',
            'offset': 0,
            'plotLines': []
        }
    ],
    'series': [
        {
            'id': 'ohlc',
            'type': 'candlestick',
            'name': 'OHLC',
            'data': [
                [1724202000000, 59257.7, 59520.1, 58953.4, 58978],
                [1724209200000, 58978, 59259.9, 58728.4, 59250],
                [1724216400000, 59250, 59484.8, 59184.3, 59290],
                [1724223600000, 59290, 59380, 59163.3, 59350],
                [1724230800000, 59350, 59710, 59318.9, 59674],
                [1724238000000, 59674, 59989.7, 59050.4, 59256.9],
                [1724245200000, 59256.9, 59474.5, 59171.4, 59324],
                [1724252400000, 59324, 60096.6, 58805, 59898],
                [1724259600000, 59898, 60201.1, 59172, 59484.1],
                [1724266800000, 59484.1, 60030, 59335.7, 59906.1],
                [1724274000000, 59906.1, 61621.4, 59820, 61539.2],
                [1724281200000, 61539.2, 61835, 60861.7, 61205.3],
                [1724288400000, 61205.3, 61476.8, 61071.7, 61297.1]],
            'yAxis': 0,
        },
        {
            'id': 'volume',
            'type': 'column',
            'name': 'Volume',
            'data': [[1724202000000, 4702.85],
                     [1724209200000, 5632.36],
                     [1724216400000, 2881.61],
                     [1724223600000, 1803.99],
                     [1724230800000, 5849.34],
                     [1724238000000, 14161.8],
                     [1724245200000, 3268.35],
                     [1724252400000, 17718],
                     [1724259600000, 27039.2],
                     [1724266800000, 7940.72],
                     [1724274000000, 33825.4],
                     [1724281200000, 18423.1],
                     [1724288400000, 2812.27]],
            'yAxis': 1,
        },
    ],
    'plotOptions': {
        'candlestick': {
            'color': '#F23645',
            'lineColor': '#F23645',
            'upColor': '#089981',
            'upLineColor': '#089981',
        }
    }
}


def main():
    global STOCK_CHART
    print("Starting...")
    ui.add_head_html('''
        <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
        <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">
        <script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>
        <script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
        <script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
        <script src="https://code.highcharts.com/modules/price-indicator.js"></script>
        <script src="https://code.highcharts.com/modules/full-screen.js"></script>
        <script src="https://code.highcharts.com/modules/stock-tools.js"></script>
        <script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>
        <script src="https://code.highcharts.com/stock/modules/hollowcandlestick.js"></script>
        <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    ''')
    ui.highchart(
        options=STOCK_CHART,
        type='stockChart',
        extras=['stock', 'accessibility', 'stock-tools']
    ).style('width:800px;height:600px;')
    ui.run(dark=False, language='en-US',
           reload=False, endpoint_documentation='none',
           show_welcome_message=False)


if __name__ in {"__main__", "__mp_main__"}:
    main()

accessibility.js and stock-tools.js can be removed, but it won't change anything.

How it should work: https://www.highcharts.com/samples/stock/demo/stock-tools-gui?jsfiddle

[falkoschindler]

Ok, I changed to URLs to match version 11.1.0 which is included in nicegui-highcharts:

ui.add_head_html('''
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/11.1.0/css/stocktools/gui.css">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/11.1.0/css/annotations/popup.css">
    <script src="https://code.highcharts.com/11.1.0/modules/annotations-advanced.js"></script>
    <script src="https://code.highcharts.com/11.1.0/modules/price-indicator.js"></script>
    <script src="https://code.highcharts.com/11.1.0/modules/full-screen.js"></script>
    <script src="https://code.highcharts.com/11.1.0/modules/stock-tools.js"></script>
    <script src="https://code.highcharts.com/11.1.0/modules/accessibility.js"></script>
    <script src="https://code.highcharts.com/stock/11.1.0/indicators/indicators-all.js"></script>
    <script src="https://code.highcharts.com/stock/11.1.0/modules/drag-panes.js"></script>
    <script src="https://code.highcharts.com/stock/11.1.0/modules/heikinashi.js"></script>
    <script src="https://code.highcharts.com/stock/11.1.0/modules/hollowcandlestick.js"></script>
''')
ui.highchart(options=STOCK_CHART, type='stockChart', extras=['stock', 'accessibility', 'stock-tools'])

Now the stock tools seem to render correctly:

But they are still not working and cause similar JavaScript errors. 🤔

[falkoschindler]

Maybe we only need to load the CSS files, because the JavaScript files are already included:

ui.add_head_html('''
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/11.1.0/css/stocktools/gui.css">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/11.1.0/css/annotations/popup.css">
''')
ui.highchart(options=STOCK_CHART, type='stockChart', extras=['stock', 'accessibility', 'stock-tools'])

Now the JavaScript errors are gone.

[canyone2015]

Yes, graphic elements don't work.

[falkoschindler]

Sorry, I'm a bit out of ideas. Maybe someone from the community can jump in?
Now that you know how to add additional <script> tags to the app, posting the question to a wider audience like on StackOverflow or to a more Highcharts-specific community might also be a way forward.