Horizontal Scrollbar for highcharts, NOT Highstock

Question

I want to implement the scrollbar in highcharts, not highstock because it will cost additional money for my company (just for a scrollbar, does not make sense). I have tried this but apparently does not help me:

How to enable highcharts x and y axis scrollbars? .

There are some examples here:

http://jsfiddle.net/fj6d2/3076/
https://www.highcharts.com/blog/news/224-scrollbars-for-any-axis/

but with highstock, I want to do the same thing with Highchart.

From what I have found out Highcharts does not support scrollbars. If I just insert use overflow: scroll on a wrapped div of the chart, that would still make my title center in the middle of a long div and also the y axis will be hidden when I go to the right of that long div.

Is there any way to have ScrollBar with the above things on a highchart (NOT HIGHSTOCK) ?

Here is my option

let options = {
  legend: {
    itemStyle: {
      fontWeight: 'bold',
      fontSize: '13px'
    },
    // width: 780,
    itemWidth: 130,
    floating: false
  },
  xAxis: {
    position: {align: 'left'},
    text: null,
    }, // ,
    // tickLength: 0
    type: 'category',
    categories: categories,
    min: 0// ,
    // max: 10
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: true,
    showFull: false,
    barBackgroundColor: 'rgb(44,89,142)',
    barBorderRadius: 0,
    barBorderWidth: 0,
    buttonBackgroundColor: 'rgb(44,89,142)',
    buttonBorderWidth: 0,
    buttonArrowColor: 'white'
  },
  yAxis: {
    // minorTickInterval: 'auto',
    title: {
      /* style: {
        textTransform: 'uppercase'
      }*/
    }, // ,
    min: 0,
    // max: 20,
  },
  // General
  background: '#FFFFFF',
  chart: {
    height: 500,
    width: 3900,
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'column',
    backgroundColor: '#FFFFFF',
    style: {
      fontFamily: 'Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, 
sans-serif'
    },
    borderColor: '#ACB2BC',
    borderWidth: 1,
    events: { load: function fn() { console.log(this); /* this.width(800); 
*/ } } // #container
  },

  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    },
    candlestick: {
      lineColor: '#404048'
    },
    pie: {
      dataLabels: {
        enabled: true,
        distance: -50,
        style: {
          fontWeight: 'bold',
          color: 'white'
        }
      },
      allowPointSelect: true,
      cursor: 'pointer',
      data: values,
      showInLegend: true
    }
  },
  series: [{
    name: 'reports',
    data: values
  }],
  credits: {
    enabled: false
  }
};

I am using React. I just pass the options to a Highcharts.

 this.chart = new Highcharts['Chart'](
  this.refs.chart,
  this.props.options);

user_4046096 · Answer

chart.scrollablePlotArea

Since Highcharts v7.1.2, a scrollable plot area can be defined for either horizontal or vertical scrolling, depending on whether the minWidth or minHeight option is set. This does NOT require Highcharts Stock (aka Highstock) to be used.

A demo from the API reference is here and below:

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        scrollablePlotArea: {
            minWidth: 700,
            scrollPositionX: 1
        }
    },
    title: {
        text: 'Scrollable plot area'
    },
    subtitle: {
        text: 'Open on mobile and scroll sideways'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        }
    },
    yAxis: {
        tickWidth: 1,
        title: {
            text: 'Wind speed (m/s)'
        },
        lineWidth: 1,
        opposite: true
    },
    tooltip: {
        valueSuffix: ' m/s',
        split: true
    },

    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
        }
    },
    series: [{
        name: 'Hestavollane',
        data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6,
            5.5, 6.2, 5.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1,
            5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7,
            9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]

    }, {
        name: 'Vik',
        data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2,
            0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2,
            0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2,
            0.7, 1.3, 0.4, 0.3]
    }]
});

#container {
    max-width: 800px;
    min-width: 320px;
    height: 400px;
    width: 400px;
}

Horizontal Scrollbar for highcharts, NOT Highstock

1 Answers