React-highcharts scrollbar feature not working

Question

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]
  }]
};

Answer 1

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>
}