JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<button onclick="build()">Click me</button>
<div id="container"></div>
<textarea id="chartCode" name="w3review" cols="30" rows="15">
{
  "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]
    }],    
    "exporting": {
      "sourceWidth": 900,
      "sourceHeight": 400
    }
    
  }
</textarea>

JavaScript

function build() {

  //doesnt work
  const chart = document.getElementById('chartCode').textContent

  //works
  /*const chart = {
    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]
      }],    
      exporting: {
        sourceWidth: 900,
        sourceHeight: 400,
      }
      
    }*/


  Highcharts.chart('container', JSON.parse(chart));
}