Slider on Highchart - yAxis

by rishad

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<table width="100%">
<tr>
  <td width="95%"><div id="container" style="height: 500px;"></div></td>
  <td width="5%"> <div id="slider-range" style="height: 450px;"></div></td>
</tr>
</table>


<div style="margin: 20px 0px 0px 60px">


  <p>
    <label for="amount">Year(s):</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>

 
</div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      zoomType: 'xy'
    },
    colors: [
      '#d8d826'
    ],
    legend: {
      enabled: false
    },
    title: {
      style: {
        fontSize: '0px'
      }
    },
    subtitle: {
      style: {
        fontSize: '0px'
      }
    },
    xAxis: {
      categories: ['1960', '1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'],
      tickmarkPlacement: 'on',
      tickInterval: 1
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Number',
        style: {
          fontSize: '0px'
        }
      },
      events: {
        afterSetExtremes: function(e) {
          $("#slider-range").slider("values", 0, e.min);
          $("#slider-range").slider("values", 1, e.max);
          $("#amount").val(Math.round(e.min) +
            " - " + Math.round(e.max));
        }
      },
      minRange: 1 // set this to allow up to one year to be viewed
    },
    tooltip: {
      shared: false,
      useHTML: true
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: [{
      name: 'data by year',
      data: [49.9, 83.6, 0, 69.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 69.1, 9.6, 40.9, 69.9, 83, 18.9, 40.9, 81.6, 24.9, 46.4, 49.9, 5.6, 48.9, 69.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 10.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 69.1, 50]
    }]
  }, function(chart) {

    $("#slider-range").slider({
      range: true, orientation:...