Search code examples
javascripthighchartsscrollviewlinechart

Highcharts: Scrollable Plot Area In Line Chart To Contain Specific Number of Points

I've got a line-chart with potentially more than 10 points. It will be drawn inside a container element with fixed width (let's say 800px). In case the points count gets more than 10, I need to make the chart scrollable in a way which initially displays only the last 10 points.

Here's the fiddle for what I have right now:

https://jsfiddle.net/kpx13oz9/69/

Currently, I have the scroll-bar initially sitting on the rightmost position (which is what I want). But, as I increase the number of totalItemCount, more points are included inside the scrollable plot and some of the ticks on the x-axis become hidden.

I'm looking for a configuration which enforces the following:

  • regardless of the number of points, display the latest 10 points. the rest of the points will be accessible by horizontal scrollbar.
  • All the ticks on the x-axis need to be displayed always. No auto-hide.
Solution

  • You can dynamically calculate the minWidth property based on the created chart. To show all of the labels, set xAxis.tickInterval to one day.

      chart: {
    events: {
      load: function() {
        const minWidth = this.plotSizeX / 9 * workOrderHistory.length;

        this.update({
          chart: {
            scrollablePlotArea: {
              scrollPositionX: 1,
              minWidth
            }
          }
        }, false);

        this.xAxis[0].update({
          width: '100%'
        });
      },
      render: drawCrosshair(crosshair, 'red')
    }
  }

    Live demo: https://jsfiddle.net/BlackLabel/v3zowk9e/

    API Reference: https://api.highcharts.com/highcharts/xAxis