st_hc/frontend/main.js

function sendValue(value) {
  Streamlit.setComponentValue(value)
}


function onRender(event) {
  if (true) {
    const {options,height} = event.detail.args
    Streamlit.setFrameHeight(height+20)
    document.getElementById("container").style.height=height+"px"
    let c = Highcharts.chart('container', options);

    let points = c.series[0].data.map((p) => 
      ({ x: Math.round(p.x),
         y: Math.round(p.y),
          color:p.color,
         name:p.name} ));
    sendValue(points);

    console.log(c.series[0].data);

    c.series[0].data.forEach((point, i) => {

      point.graphic.element.onclick = () => {

        let points = c.series[0].data.map((p) => 
         ({ x: Math.round(p.x),
            y: Math.round(p.y),
            color:p.color,
            name:p.name} ));

        console.log(points);
        sendValue(points);

      }
    })
    window.rendered = true
  }
}

Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
Streamlit.setComponentReady()