JSFiddle - React, Tailwind, and code Playground

by navindian

HTML

<div id="resizer" style="min-width: 500px; min-height: 200px">
    <div id="inner-resizer">
        <div id="container" style="height: 400px">
        </div>
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>

CSS

#resizer {
    border: 1px solid silver;   
}
#inner-resizer { 
    padding: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
<style type="text/css">

JavaScript

$(function() {
    
    $('#resizer').resizable({
      
        resize: function() {
            chart.setSize(
                this.offsetWidth - 20, 
                this.offsetHeight - 20,
                false
            );
        }
    });
    
    var chart = new Highcharts.StockChart({
        
        chart: {
            renderTo: 'container'
        },
         plotOptions : {
          line : {
           lineWidth : 1
          },
          series : {
            showCheckbox : true
          },

        },
            legend : {
          floating : false,
          width : 50,
          verticalAlign : 'top',
          y : 50,
          shadow : true,

          enabled : true,
          align : 'left',
          layout : 'vertical',
          padding : 20,

          itemWidth : -2,

          itemStyle : {
            color : '#cccccc'
          },
          itemHoverStyle : {
            color : '#ffffff'
          },
          itemHiddenStyle : {
            color : '#333333'
          }

        },
      
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
});