JSFiddle - React, Tailwind, and code Playground

Highcharts Demo: Line Graph

by David Hepworth

HTML

<link rel="stylesheet" href="https://www.highcharts.com/samples/static/highslide.css">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css" />

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

JavaScript

$(function () {

  // Get the CSV and create the chart
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {

    Highcharts.chart('container', {

      chart: {
        zoomType: 'x',
        marginTop: 30
      },

      data: {
        csv: csv
      },

      title: {
        text: ''
      },

      subtitle: {
        text: 'Weekly Stats'
      },

      xAxis: {
        tickInterval: 7 * 24 * 3600 * 1000, // one week
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
          align: 'left',
          x: 3,
          y: -3
        }
      },

      yAxis: [{ // left y axis
        title: {
          text: null
        },
        labels: {
          align: 'left',
          x: 3,
          y: 16,
          format: '{value:.,0f}'
        },
        showFirstLabel: false
      }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
          text: null
        },
        labels: {
          align: 'right',
          x: -3,
          y: 16,
          format: '{value:.,0f}'
        },
        showFirstLabel: false
      }],

      legend: {
        align: 'center',
        verticalAlign: 'top',
        y: -10,
        floating: true
      },

      tooltip: {
        shared: true,
        crosshairs: true
      },
      

      navigation: {
        buttonOptions: {
          enabled: true,
          y: -10
        }
      },

      series: [{
        name: 'All visits',
        lineWidth: 4,
        marker: {
          radius: 4
        }
      }, {
        name: 'New visitors'
      }]
    });
  });

});