JSFiddle - React, Tailwind, and code Playground

by Philip Kent

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


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

JavaScript

$(function() {
var myChart = Highcharts.chart('chartcontainer', {

    chart: {
      type: 'area'
    },

    title: {
      align: 'left',
      text: 'Annual mean CO2 concentrations',
      style: {
        'color': '#339966',
        'font-family': 'Palatino Linotype'
      }

    },

    subtitle: {
      align: 'left',
      text: 'Source: Dr. Pieter Tans, NOAA/ESRL (www.esrl.noaa.gov/gmd/ccgg/trends/) and Dr. Ralph Keeling, Scripps Institution of Oceanography (scrippsco2.ucsd.edu/)',
      style: {
        'font-family': 'Palatino Linotype'
      }
    },
    xAxis: {
      allowDecimals: false,
      labels: {
        formatter: function() {
          return this.value;
        }
      },
      title: {
        text: 'Year',
        style: {
          'color': '#339966',
          'font-family': 'Palatino Linotype'
        }
      },
      labels: {
        style: {
          'color': '#339966',
          'font-family': 'Palatino Linotype'
        }
      }
    },

    yAxis: {
      min: 250,
      title: {
        text: 'CO2 Concentration (ppm)',
        style: {
          'color': '#339966',
          'font-family': 'Palatino Linotype'
        }
      },
      labels: {
        style: {
          'color': '#339966',
          'font-family': 'Palatino Linotype'
        }
      }
    },

    tooltip: {
      crosshairs: true,
      shared: true,
      valueSuffix: 'ppm',
      style: {
        'color': '#339966',
        'font-family': 'Palatino Linotype'
      }
    },
    plotOptions: {
      area: {
        pointStart: 1959,
        marker: {
          enabled: false,
          symbol: 'circle',
          radius: 2,
          states: {
            hover: {
              enabled: true
            }
          }
        }
      }
    },
    series: [{
      name: 'Concentration',
      data:...