lit-element-bar-chart.js

import { Plotly } from 'plotly'
// Copy plotly-styles.js to your project from this gist: https://gist.github.com/rjsteinert/751901de6aca5804b1024c6737e9dc97
import { plotlyStyles } from './plotly-styles.js'
import { LitElement, html } from 'lit-element'

class LitElementBarChart extends LitElement {

  static get styles() {
    return [
      plotlyStyles
    ]
  }

  render() {
    return html`
      <style>
        #myDiv {
          width: 800px;
          height: 800px;
        }
      </style>
      <div id="myDiv"></div>
    `
  }

  updated() {
    this.data = [
      {
        x: ['giraffes', 'orangutans', 'monkeys'],
        y: [20, 14, 23],
        type: 'bar'
      }
    ];
    Plotly.newPlot(this.shadowRoot.querySelector('#myDiv'), this.data);
  }

}

customElements.define('lit-element-bar-chart', LitElementBarChart);