JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<my-chart style="height: 360px; width: 100%;"></my-chart>

JavaScript

class ChartComponent extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ 'mode': 'open' });
        this.chart = document.createElement('div');
        this.chart.id = 1337;
        this._shadowRoot.appendChild(this.chart);
    }

    connectedCallback() {
        let chart = new CanvasJS.Chart(this._shadowRoot.getElementById(this.chart.id), {
            title:{
              text: "Basic Column Chart"
            },
            data: [{				
              dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55},
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14}
              ]
            }]
          });
        chart.render();
    }
}

window.customElements.define('my-chart', ChartComponent);