JSFiddle - React, Tailwind, and code Playground

by NibblyPig

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id='parent'>

  <div id='columns'>


    <div id='leftcolumn'>

      <div id='chart1'>

      </div>

      <div id='chart2'>

      </div>

    </div>

    <div id='rightcolumn'>
      This is the right column.
    </div>

  </div>

</div>

CSS

#parent {
  display: flex;
  width: 100%;
  flex-direction: row;
  height: 100vh;
  min-width: 0;
}

#columns {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

#leftcolumn {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-shrink: 1;
  min-width: 0;
  flex-basis: 50%;
}

#rightcolumn: {
  flex-grow: 0;
  display: flex;
  width: 200px;
  min-width: 0;
}

JavaScript

$(function() {
    var myChart = Highcharts.chart('chart1', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Monthly Statistics'
      },
      xAxis: {
        categories: ['ABC', 'DEF']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'This Month',
        data: [4, 1]
      }, {
        name: 'Average',
        data: [3, 2]
      }]
    });

    var myChart2 = Highcharts.chart('chart2', {
      chart: {
        type: 'pie'
      },
      title: {
        text: 'ABCDEF'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
          }
        }
      },
      series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
          name: 'AXD',
          y: 67.34,
          sliced: true,
          selected: true
        }, {
          name: 'ERT',
          y: 11.88
        }, {
          name: 'ASD',
          y: 20.78
        }]
      }]
    });

    window.setTimeout(function() {
      myChart.reflow();
      myChart2.reflow();
    });


  });