Vaadin 14 and Highcharts integration

Question

I have a Vaadin14-based project with Polymer3 components.
I created a small wrapper for Highcharts HighStock component without using embedded Vaadin Charts.

Now I need to add a stock-tools panel to allow drawing on chart.
All needed .js and .css seemed to be added according to manuals as chart is displayed correctly along with stock-tools panel.
I can see sub-menus, change tools etc.

But I unable to draw anything on chart.
Seems like tool-button click does not turn the chart in drawing mode (style for active button or highcharts-draw-mode are not applied).

Highcharts version doesn't matter as far as I tried to update from 8 to 10 via npm.

Does anybody know the reason why stock-tool events don't work?

Thanks in advance.

The Polymer component code with some cuts is following:

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
import 'highcharts/es-modules/masters/modules/hollowcandlestick.src.js';
import 'highcharts/es-modules/masters/modules/data.src.js';
import 'highcharts/es-modules/masters/modules/debugger.src.js';
import 'highcharts/es-modules/masters/modules/accessibility.src.js';
import 'highcharts/es-modules/masters/modules/boost.src.js';
import 'highcharts/es-modules/masters/indicators/indicators-all.src.js';
import 'highcharts/es-modules/masters/modules/drag-panes.src.js';
import 'highcharts/es-modules/masters/modules/price-indicator.src.js';
import 'highcharts/es-modules/masters/modules/full-screen.src.js';
import 'highcharts/es-modules/masters/modules/annotations-advanced.src.js';
import 'highcharts/es-modules/masters/modules/stock-tools.src.js';
import 'highcharts/es-modules/masters/modules/heikinashi.src.js';

class StockChartComponent extends PolymerElement {
  static get template() {
    return html`
    <style include="shared-styles shared-chart-styles">
        :host { 
            border: 1px solid red;
            width: 100%;
            height: 100%;
            display: block;
            padding: 1em;
        }
    #container { border: 1px solid blue; }

    </style>
    
    <div class='chart stock-chart' id='container'> </div>
            
    `;
  }
  

  static get is() {
    return 'stock-chart-component';
  }
 
  connectedCallback() {
        super.connectedCallback();

  }
/**this method is called after some initialization on the server-side via executeJS(...) **/
onStockChartUpdate(options) {
    var container = this.shadowRoot.querySelector("#container");
    if (Highcharts && options && container) {
        Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {

  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    i = 0;

  for (i; i < dataLength; i += 1) {
    ohlc.push([
      data[i][0], // the date
      data[i][1], // open
      data[i][2], // high
      data[i][3], // low
      data[i][4] // close
    ]);

    volume.push([
      data[i][0], // the date
      data[i][5] // the volume
    ]);
  }

  Highcharts.stockChart(container, {
    yAxis: [{
      labels: {
        align: 'left'
      },
      height: '80%',
      resize: {
        enabled: true
      }
    }, {
      labels: {
        align: 'left'
      },
      top: '80%',
      height: '20%',
      offset: 0
    }],
    tooltip: {
      shape: 'square',
      headerShape: 'callout',
      borderWidth: 0,
      shadow: false,
      positioner: function (width, height, point) {
        var chart = this.chart,
          position;

        if (point.isHeader) {
          position = {
            x: Math.max(
              // Left side limit
              chart.plotLeft,
              Math.min(
                point.plotX + chart.plotLeft - width / 2,
                // Right side limit
                chart.chartWidth - width - chart.marginRight
              )
            ),
            y: point.plotY
          };
        } else {
          position = {
            x: point.series.chart.plotLeft,
            y: point.series.yAxis.top - chart.plotTop
          };
        }

        return position;
      }
    },
    series: [{
      type: 'ohlc',
      id: 'aapl-ohlc',
      name: 'AAPL Stock Price',
      data: ohlc
    }, {
      type: 'column',
      id: 'aapl-volume',
      name: 'AAPL Volume',
      data: volume,
      yAxis: 1
    }],
    responsive: {
      rules: [{
        condition: {
          maxWidth: 800
        },
        chartOptions: {
          rangeSelector: {
            inputEnabled: false
          }
        }
      }]
    }
  });
});
}
}  
}
customElements.define(StockChartComponent.is, StockChartComponent);