6

I am using react-highchart . The scrollbar feature does not seem to work . Below is the piece of code . The scrollbar is enable in the xaxis and it doesnt seem to scroll .

Please refer the highcharts implementation :

http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/yaxis/inverted-bar-scrollbar/

var config = {
  title: {
    text: 'Hello, World!'
  },
  chart :{
  type:'bar'
  },
  xAxis: {
    scrollbar:{
    enabled:true
    },
    min:0,
    max:4,
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
};
Deep 3015
  • 9,929
  • 5
  • 30
  • 54
Balaji V
  • 918
  • 3
  • 10
  • 28
  • scroll is working when you click on scroll bar and drag it – Deep 3015 Apr 16 '17 at 13:39
  • Scrollbar works as designed by highcharts. Highcharts dont seem to support mouse-wheel events for this. You will have to implement it yourself. (similar question)[http://stackoverflow.com/questions/39570557/want-to-move-y-axis-scrollbar-with-mouse-wheel-in-highcharts-highstock] – Vladimir M Apr 16 '17 at 13:41
  • @Deep3015 are you trying with highcharts . I am working with react-highcharts . The bar does not even appear for me – Balaji V Apr 16 '17 at 13:55
  • true it not working [sample](http://jsbin.com/simaquduno/1/edit?html,js,output) – Deep 3015 Apr 16 '17 at 18:00
  • @Deep3015 raised an issue on github for this – Balaji V Apr 17 '17 at 06:16
  • 4
    Scrollbar is available only in Highstock, not in Highcharts. – Paweł Fus May 17 '17 at 14:44

1 Answers1

8

I came up with the following

import Highcharts from 'highcharts';
import Highstock from 'highcharts/highstock';
import ReactHighcharts from 'react-highcharts';

const Charts = ReactHighcharts.withHighcharts(Highstock);

...

function render() {
   <Charts isPureConfig={true} config={this.state.config}></Charts>
}
Shane
  • 193
  • 4
  • 10