Highchart stockChart Installation in Web Component

Question

I would like to install and use the normal highcharts plugin inside the web components. Is there a way to create instances and using this instance using higcharts methods and events.

Answer 1

Using lit-element Highcharts and its modules can be loaded like following:

import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';

Component config:

import { LitElement, html } from 'lit-element';

import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';

class ChartTest extends LitElement {

  firstUpdated(changedProperties) {
    this._enableChart();
  }

  render() {
    return html`
      <div id='container' style='width:500px;height:300px;border: 1px red solid;'>sfsdfs</div>
    `;
  }

  _enableChart() {
    Highcharts.chart(this.shadowRoot.querySelector('#container'), {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
      },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
      }]
    });
  }
}

Demo: https://jsfiddle.net/BlackLabel/e3rptzg2/