JSFiddle - React, Tailwind, and code Playground

by nija das

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="chartContainer">
  <div id="container"></div>
</div>

<button id="show">enlarge</button>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button id="close" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
  <div class="showChart" id="showChartBig" style="text-align: center;height:400px;width:600px;" align-content="center"></div>
  </div>
    </div>

JavaScript

$('#show').on('click', function() {
  $('#myModal').modal();
  var width = $("#showChartBig").width() - 50;
  var height = $("#showChartBig").height() - 50;
  var chart = $('#container').highcharts();
  chart.setSize(width, height);

  $('#showChartBig').append($('#container'));
});
$('#close').on('click', function() {
  var charts = $('#container').highcharts();
  console.log(charts)
  charts.setSize(600, 400);
  $('#chartContainer').append($('#container'));
});

Highcharts.chart('container', {
    chart: {
   // height:"100%",
    //width:"100%",
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: 'Browser market shares at a specific website, 2014'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
       /* data: [
            ['Firefox', 45.0],
            ['IE', 26.8],
            {
                name: 'Chrome',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari', 8.5],
            ['Opera', 6.2],
            ['Others', 0.7]
        ]*/
         data: [
            {"name": 'Firefox', "y":45.0},
            {"name":'IE', "y":26.8},
            {
                name: 'Chrome',
                y: 12.8
            },
            {name:'Safari', y:8.5},
            {name:'Opera', y:6.2},
            {name:'Others', y:0.7}
        ]
    }]
});