Highcharts Demo

author(s): Torstein Hønsi

by klsakthi

HTML

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

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<button id="button" class="autocompare">Set extremes</button>

<div id="container1" style="height: 450px; min-width: 300px"></div>
<!--<div id="container2" style="height: 300px; min-width: 300px"></div> -->
<div id="container3" style="max-height: 140px; min-width: 300px"></div>

<div id="container4" style="max-height: 140px; min-width: 300px"></div>

JavaScript

var chart1 = Highcharts.chart('container1', {
  digital: false,
  chart: {
    height: 450,
  },
  title:{
    text: null
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  xAxis: {
    gridLineWidth: 0,
    labels: {
      enabled: false
    },
    events: {
      //setExtremes: syncExtremes
    },
    crosshair: {
      width: 3
    }
  },
  yAxis: {
    gridLineWidth: 0,
    labels: {
      enabled: true
    },
    title: {
      text: null
    }
  },
  tooltip: {
    borderWidth: 1,
    backgroundColor: 'green',
    pointFormat: '{point.y}',
    headerFormat: '',
    shadow: false,
    style: {
      fontSize: '18px'
    }
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },

  series: [{
    type: 'area',
    fillOpacity: 0.2,
    color: Highcharts.getOptions().colors[4],
    data: [129.9, 171.5, 96.4, 29.2, 104.0, 176.0, 125.6, 148.5, 216.4, 194.1, 125.6, 14.4, 129.9, 171.5, 96.4, 29.2, 104.0, 176.0, 125.6, 148.5, 216.4, 194.1, 125.6, 14.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 16.4, 194.1, 95.6, 114.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 16.4, 194.1, 95.6, 114.4]
  }, {
    type: 'area',
    fillOpacity: 0.2,
    color: Highcharts.getOptions().colors[7],
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 16.4, 194.1, 95.6, 114.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 16.4, 194.1, 95.6, 114.4, 129.9, 171.5, 96.4, 29.2, 104.0, 176.0, 125.6, 148.5, 216.4, 194.1, 125.6, 14.4, 129.9, 171.5, 96.4, 29.2, 104.0, 176.0, 125.6, 148.5, 216.4, 194.1, 125.6, 14.4]
  }]
});


var chart3 = Highcharts.chart('container3', {
  digital: true,
  chart: {
    height: 120
  },
  title:{
    text: null
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  xAxis: {
    gridLineWidth: 0,
    labels: {
      enabled: false
    },
    events:...