JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://highcharts.com/js/highcharts.src.js"></script>
<script src="http://highcharts.com/js/excanvas.compiled.js"></script>
<div id="sc_graph" width='569' height='327'></div>

          <div class="col-1">
          <table class="change-setings-table-4cols">
            <tr>
                <td><h4 class="lb">Time</h4></td>
                <td><h4 class="lb">Intensity</h4></td>
                <td><h4 class="lb">Work</h4></td>
                <td><h4 class="lb">Distance</h4></td>
            </tr>

            <tr>
                                    <td><input type="radio" class="check" name="graphmetric" id="m2_AVG_duration" value="2_AVG_duration"  />
                    <label  for="m2_AVG_duration">Avg. Time</label></td>
                                    <td><input type="radio" class="check" name="graphmetric" id="m26_AVG_avg_power" value="26_AVG_avg_power"  />
                    <label  for="m26_AVG_avg_power">Avg. Watts</label></td>
                                    <td><input type="radio" class="check" name="graphmetric" id="m4_AVG_work" value="4_AVG_work"  />
                    <label  for="m4_AVG_work">Avg. Kilojoules</label></td>
                                    <td><input type="radio" class="check" name="graphmetric" id="m1_AVG_distance" value="1_AVG_distance"  />

                    <label  for="m1_AVG_distance">Avg. Distance</label></td>                                 
            </tr>
            <tr>
                                    <td><input type="radio" class="check" name="graphmetric" id="m2_MAX_duration" value="2_MAX_duration" checked="checked" />
                    <label class="wh" for="m2_MAX_duration">Best Time</label></td>
                                    <td><input type="radio" class="check" name="graphmetric" id="m26_MAX_avg_power" value="26_MAX_avg_power"  />
                    <label  for="m26_MAX_avg_power">Best Watts</label></td>
                                    <td><input type="radio"...

JavaScript

function scb_convert_value (data) {
            metric= $(".check[name=graphmetric]:checked").attr('id');
            fractions = metric.split('_');
            if (fractions[0] == 'm2')
            {
              // convert time
              if (data != 0)
              { 
                var ret = new Array();
                var days=Math.floor(data/86400);
                var hours=Math.floor(data/3600)-(days*24);
                var minutes=Math.floor(data/60)-(days*1440)-(hours*60);
                var added = false;
                if (days > 0) ret.push(days + 'd');
                if (hours > 0 || added) ret.push(hours + 'h');
                if (minutes > 0 || added) ret.push(minutes + 'm');
                return ret.join(' ');
              } else {
                return 0;
              }
            } else {
                return data;
            }
        };

var gdata = { 


    'm26_MAX_avg_power':{
    metric : 'Best Watts',
    unit : 'Watts',
    series: {
      mine: [0,0,0,0,0,0,164,0,0,0,0,0],
      comp: [0,0,177,165,209,200,195,0,0,151,0,0]
   }
    },
    'm26_AVG_avg_power':{
    metric : 'Avg. Watts',
    unit : 'Watts',
    series: {
      mine: [0,0,0,0,0,0,160.5,0,0,0,0,0],
      comp: [0,0,176.5,161,180.25,183.67,177.33,0,0,151,0,0]
   }
    },
    'm34_MAX_watts_kg':{
    metric : 'Best Watts/kg',
    unit : 'Watts/kg',
    series: {
      mine: [0,0,0,0,0,0,2.7,0,0,0,0,0],
      comp: [0,0,2.4,2.96,2.53,3.55,3.5,0,0,3.03,0,0]
   }
    },
    'm34_AVG_watts_kg':{
    metric : 'Avg. Watts/kg',
    unit : 'Watts/kg',
    series: {
      mine: [0,0,0,0,0,0,2.64,0,0,0,0,0],
      comp: [0,0,2.39,2.89,2.05,2.85,2.65,0,0,3.03,0,0]
   }
    },
    'm1_MAX_distance':{
    metric : 'Best Distance',
    unit : 'km',
    series: {
      mine: [0,0,0,0,0,0,113,0,0,0,0,0],
      comp: [0,0,107,88,118,140,113,0,0,113,0,0]
   }
    },
    'm1_AVG_distance':{
    metric : 'Avg. Distance',
    unit : 'km',
    series: {
      mine:...