JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="checkboxes">
  <input type="checkbox" value="1">Sensor 1
  <input type="checkbox" value="2">Sensor 2
  <input type="checkbox" value="3">Sensor 3
  <input type="checkbox" value="4">Sensor 4
</div>
<div class="chart-containers">
</div>

CSS

.chart-containers .charts {
  width: 100%;
  height: 200px;
}

JavaScript

var jsonData = [
  [
    { "x": 10, "y": 10.22 },
    { "x": 20, "y": 11.14 },
    { "x": 30, "y": 13.58 },
    { "x": 40, "y": 15.25 },
    { "x": 50, "y": 17.25 },
  ],
  [
    { "x": 10, "y": 19.99 },
    { "x": 20, "y": 21.78 },
    { "x": 30, "y": 23.45 },
    { "x": 40, "y": 24.73 },
    { "x": 50, "y": 26.58 }
  ],
  [
    { "x": 10, "y": 27.66 },
    { "x": 20, "y": 28.68 },
    { "x": 30, "y": 30.73 },
    { "x": 40, "y": 32.46 },
    { "x": 50, "y": 34.79 }
  ],
  [
    { "x": 10, "y": 110.22 },
    { "x": 20, "y": 91.14 },
    { "x": 30, "y": 105.25 },
    { "x": 40, "y": 119.99 },
    { "x": 50, "y": 121.78 }
  ]
];

var charts = [];

jQuery('#checkboxes').on('click', function(e) {
  var selectedIndex = (parseInt(e.target.value)-1);
  if (e.target.checked) {
    for(var i=selectedIndex+1; i<jsonData.length; i++) {
      if(jQuery('#chart-container-'+(i)).length != 0) {
        break;
      }
    }
    if(i < jsonData.length) {
      jQuery('#chart-container-'+i).before('<div class="charts" id="chart-container-'+selectedIndex+'"></div>');
    } else {
      jQuery('.chart-containers').append('<div class="charts" id="chart-container-'+selectedIndex+'"></div>');
    }

    var chart = new CanvasJS.Chart('chart-container-'+selectedIndex, {
      data: [{
        dataPoints: jsonData[selectedIndex]
      }]
    });
    chart.render();
    charts[selectedIndex] = chart;
  } else {
    charts[selectedIndex].destroy();
    charts[selectedIndex] = null;
    jQuery('#chart-container-'+selectedIndex).remove();
  }
});