JSFiddle - React, Tailwind, and code Playground

S. Schluricke

by Tenobaal

HTML

<head>
  <link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
</head>
<body>

  <div id="chart1" style="height: 400px; margin-top: 1em"></div>

	<script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>
</body>

<script>

data = {'datetime': [datetime.datetime(2018, 4, 25, 17, 17, 23),
  datetime.datetime(2018, 5, 16, 17, 13, 55),
  datetime.datetime(2018, 5, 26, 9, 19, 59),
  datetime.datetime(2018, 6, 7, 12, 44, 50),
  datetime.datetime(2018, 6, 9, 15, 11, 25),
  datetime.datetime(2018, 6, 14, 14, 24, 13),
  datetime.datetime(2018, 6, 30, 13, 59, 4)],
 'power': [254, 259, 268, 272, 278, 264, 274],
 'relpower': [3.2, 3.2, 3.4, 3.4, 3.5, 3.3, 3.0],
 'week': [17, 20, 21, 23, 23, 24, 26]}


</script>

CSS

#chart1 {
	max-width: 800px;
	margin: 0 auto;
  background-color: #14323F;
}

JavaScript

var history_virtual_ftp_chart = function (time, power, relpower, title, name1, name2, chart_container) {
  var options = {
    chart: {
      renderTo: chart_container,
      backgroundColor: null,
      zoomType: 'xy',
      style: {
        fontFamily: 'Fira Sans'
      }
    },
    title: {
      text: "",
      style: {
        fontSize: '24px',
        color: 'white'
      }
    },
    xAxis: [{
      labels: {
        style: {
          fontSize: '16px',
          color: 'white'
        }
      }
    }],
    yAxis: [{
      title: {
        enabled: false
      },
      labels: {
        enabled: false,
      },
      gridLineColor: '#6f828c',
      opposite: true
    }, {
      title: {
        enabled: false
      },
      labels: {
        enabled: false,
      },
      gridLineColor: '#6f828c',
      opposite: true
    }],
    legend: {
      enabled: true,
      labelFormatter: function () {
        return '<span style="color:' + this.color + ';">' + this.name + '</span>';
      },
      floating: true,
      layout: 'vertical',
      align: 'left',
      x: 0,
      verticalAlign: 'top',
      itemStyle: {
        fontSize: '16px',
      }
    },
    tooltip: {
      shared: true
    },
    series: [{
      name: name1,
      type: 'line',
      color: 'rgba(100,194,200,1)',
      data: power,
      yAxis: 1,
      tooltip: {
        enabled: false
      },
      dataLabels: {
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'rgba(100,194,200,1)',
          textOutline: '0px',
          fontWeight: 'normal'
        }
      }
    }, {
      name: name2,
      type: 'line',
      color: 'rgba(235,93,64,1)',
      data: relpower,
      tooltip: {
        enabled: true
      },
      dataLabels: {
        enabled: true,
        style: {
          fontSize: '16px',
          color: 'rgba(235,93,64,1)',
          textOutline: '0px',
          fontWeight: 'normal'
        }
      }
    }]
  };

  var chart = new...