How to create a column range chart in Highcharts using range and navigator functions?

So after a few hours of digging, I have just found out the culprit (or I really hope so). The problem is your definition of yAxis label formatter:

yAxis: {  tickInterval: 1,    gridLineWidth: 1,    labels: {    formatter: function() { // THIS IS THE PROBLEM      if (tasks[this.value]) {        return tasks[this.value].name;      }    }  },  startOnTick: false,    endOnTick: false,    title: {    text: 'Task'  }},

You don't actually check if you should display the label according to task.intervals (see json.js). A simple update (Plunker) of the formatter seems to work:

  yAxis: {    tickInterval: 1,    gridLineWidth: 1,    labels: {      formatter: function () {        console.log("scripts.js - yAxis.labels.formatter", this.value);        if (tasks[this.value]) {          //if (tasks[this.value].name === 'LILLY_C') {            var _xAxis = this.chart.axes[0];            var _task = tasks[this.value];            var _show = false;            // Not optimized for large collections            for (var _i = 0; _i < _task.intervals.length; _i++) {              var _int = _task.intervals[_i];              if (_xAxis.min <= _int.to) {                _show = true;              }            }            console.log("scripts.js - yAxis.labels.formatter",              tasks[this.value].name,              _show,              _xAxis.min,              _xAxis.max,              _task.intervals            );            if (_show) {              return tasks[this.value].name;            } else {              return;            }          //}          //return tasks[this.value].name;        }      }    },    startOnTick: false,    endOnTick: false,    title: {      text: 'Task'    }  },

See Plunker for demo.

Meaning of the yAxis labels is: Show label if you see a run in the graph or if there is a run on the right of the graph. Please modify the condition

if (_xAxis.min <= _int.to) {

as you see fit.

Disclaimer: I don't use Highcharts, so this answer tries to explain the problem and not to suggest a Highcharts-way of solving the problem.

Lessons learned:

• yaxis-plugin.js is irrelevant to the problem.
• Highstock.js is an open-source library (highstock.src.js). Any debugging is much easier if you debug original source code. Minified code adds unnecessary complexity and guessing. I have downloaded the library and added some console.log() to find out what is going on.