JSFiddle - React, Tailwind, and code Playground

by Yonathan Benitah

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<select class="mod">
  <option value=''>Mod</option>
  <option value="CT">CT</option>
  <option value="MRI">MRI</option>
  <option value="PET">PET</option>
</select>
<select class="body">
  <option value=''>bodyPart</option>
  <option value="brain">brain</option>
  <option value="arm">arm</option>
  <option value="wrist">wrist</option>
  <option value="thyroid">thyroid</option>
  <option value="heart">heart</option>

</select>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  var mod, bodyP, exist, dataPoints,
    series = [{
      name: 'CT',
      mod: 'CT',
      data: [{
        name: 'arm',
        bodyPart: 'arm',
        y: 5,
      }, {
        name: 'arm2',
        bodyPart: 'arm',
        y: 10,
      }],
    }, {
      name: 'MRI',
      mod: 'MRI',
      data: [{
        name: 'brain',
        bodyPart: 'brain',
        y: 10,
      }, {
        name: 'wrist',
        bodyPart: 'wrist',
        y: 20
      }],
    }, {
      name: 'PET',
      mod: 'PET',
      data: [{
        name: 'thyroid',
        bodyPart: 'thyroid',
        y: 10
      }, {
        name: 'heart',
        bodyPart: 'heart',
        y: 20
      }, {
        name: 'brain',
        bodyPart: 'brain',
        y: 20
      }],
    }];



  $('#container').highcharts({
    series: []
  }, function(chart) {




    $('.mod').change(function() {
      mod = this.value;
      if (mod) {
        for (var i = chart.series.length - 1; i >= 0; i--) {
          if (!(chart.series[i].userOptions.mod == mod)) {
            chart.series[i].remove();
          }
        };
        Highcharts.each(series, function(p, i) {
          dataPoints = [];
          Highcharts.each(chart.series, function(ob, j) {
            if (ob.name == p.name) {
              exist = true;
            }
          })
          if (!exist && p.mod == mod) {
            Highcharts.each(p.data, function(data, k) {
              if (bodyP ? data.bodyPart == bodyP : true) {
                dataPoints.push(data)
              }
            })
            chart.addSeries({
              name: p.name,
              mod: p.mod,
              data: dataPoints
            });
          }
          exist = false;
        })
      }
    });


    $('.body').change(function() {
      bodyP = this.value, dataPoints;
      for (var i = chart.series.length - 1; i >= 0; i--) {
        chart.series[i].remove();
      };
      Highcharts.each(series, function(p, i) {
        if (mod ? p.mod ==...