score:1

Accepted answer

you're using a feature called shadow dom which will encapsulate the template of your component behind a shadowroot node. therefore the .container div is not accessible via query selectors and highcharts won't be able to find it.

instead you can also pass a reference to a dom element, and you can get such a reference from your template with the ref prop on any element, i. e.

containerref?: htmldivelement;

render() {
  return <div ref={el => this.containerref = el} />;
}

and then you can pass that into your highchart creation code, but you'll have to do this in the componentdidload callback because the container reference will only be availble then.

componentdidload() {
  if (!this.containerref) {
    return; // just a fail-safe
  }

  highcharts.chart(this.containerref, options);
}

however it seems like you're only wanting to render a chart in your component and nothing else, so you could instead also use the component's host element (i. e. <my-chart>) as the container. the host reference can be retrieved with the @element decorator and is available in componentwillload already.

import { h, component, element, host } from '@stencil/core';
import * as highcharts from 'highcharts';

@component({ tag: 'my-chart', shadow: true })
export class mychart {
  @element() host: htmlmychartelement;

  chart: highcharts.chart; // only if you need a reference to the chart for later

  componentwillload() {
    this.chart = highcharts.chart(this.host, options);
  }

  render() {
    return <host />;
  }
}

Related Query

More Query from same tag