JSFiddle - React, Tailwind, and code Playground

by Nhi Nguyen

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
$(function() {
  $('#container').highcharts({
    xAxis: {
      type: 'datetime',
      labels: {
        overflow: 'justify'
      },
      scrollbar: {
          enabled: true
        },
    },

    plotOptions: {
      series: {
        pointInterval: 3600000, // one hour
        pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
      }
    },
    series: [{
      name: 'Hestavollane',
      data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
    }],
  }, function(chart) {
    Highcharts.each($('.highcharts-xaxis-labels')[0].children, function(p, i) {
      if (p.textContent.match(/[a-z]/i)) {
        $(p).css({
          fill: 'red'
        })
      }
    })
  });
});