faisal faisal - 2 months ago 61
jQuery Question

Want to move y-axis scrollbar with mouse wheel in highcharts/highstock

Referring to the question i want to move my y-axis scrollbar with mouse wheel
Is there any way to do it ?

yAxis:
{
scrollbar: {
enabled: true,
showFull: false

},
}


Updated Code

Bellow is my updated code

var chart1 = new Highcharts.Chart({

chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift',
//type: 'column',
//zoomType: 'xy',
//panning: true,
//pankey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},

relativeTo: 'chart'
}
},
scrollbar:{
enabled: true
},
navigator: {

//xAxis: {
// tickWidth: 0,
// lineWidth: 0,
// gridLineWidth: 1,
// tickPixelInterval: 200,
// labels: {
// align: 'left',
// style: {
// color: '#888'
// },
// x: 3,
// y: -4
// }
//},
//yAxis: {
// gridLineWidth: 0,
// startOnTick: false,
// endOnTick: false,
// minPadding: 0.1,
// maxPadding: 0.1,
// labels: {
// enabled: false
// },
// title: {
// text: null
// },
// tickWidth: 0
//},
//series: {
// //data: arry_kwh_2,
// type: 'column',
// color: '#4572A7',
// fillOpacity: 0.05,
// dataGrouping: {
// smoothed: true
// },
// lineWidth: 1,
// marker: {
// enabled: true
// }
//},
enabled: true,

height: 30,

},

rangeSelector: {


buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}

}
},
enabled: true,
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'

},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]

},
plotOptions: {
column: {
turboThreshold: 50000
}

},
title: {
text: 'Energy vs Date & Time',
style: {

fontWeight: 'bold',

}
},
xAxis: {

type: 'datetime',
//min: 0,
//max: 100000

},

yAxis:
{
scrollbar: {
enabled: true,
showFull: false

},
alternateGridColor: '#FDFFD5',
title: {
text: 'Energy (kWh)',
style: {
//color: '#FF00FF',
fontSize: '12px',
//sfont: 'bold 200px Verdana, sans-serif',
}
}


},

series:
[
{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
}

],




});


The data in the series is in array format

Any help would be highly appreciated

Answer

There is no such feature in Highcharts nor in Highstock. You could add a mouse wheel event and bind it with a setExtremes function for yAxis.

http://jsfiddle.net/3q79ey8h/1/

(function(H) {

  //internal functions
  function stopEvent(e) {
    if (e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      e.cancelBubble = true;
    }
  }

  //the wrap
  H.wrap(H.Chart.prototype, 'render', function(proceed) {
    var chart = this,
      mapNavigation = chart.options.mapNavigation;

    proceed.call(chart);

    // Add the mousewheel event
    H.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function(event) {

      var delta, extr, step, newMin, newMax, axis = chart.yAxis[0];

      e = chart.pointer.normalize(event);
      // Firefox uses e.detail, WebKit and IE uses wheelDelta
      delta = e.detail || -(e.wheelDelta / 120);
      delta = delta < 0 ? 1 : -1;

      if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
        extr = axis.getExtremes();
        step = (extr.max - extr.min) / 5 * delta;
        axis.setExtremes(extr.min + step, extr.max + step, true, false);
      }

      stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
      return false;
    });
  });
}(Highcharts));