Highcharts: Hide/remove values (in a range) from y axis - highcharts

Question

How can I remove some values from a yAxis?
My chart is a columnrange (https://www.highcharts.com/demo/columnrange) with days on the x axis (actually y axis, rotated), and I don't want show values for some days.
More in general I want hide some values from domain, i.e. a discontinuous domain.
Example:
Highcharts.chart('container', {
chart: { type: 'columnrange', inverted: true },
xAxis: { categories: [ 'FirstTask' ] },
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () { return Highcharts.dateFormat('%e.%b', this.y); }
}
}
},
series: [{ data: [1497718538701, 1498150538701] }],
});
This code generates a chart with horizontal bar and days from 17 June to 22 June on x Axis (y, rotated).
I want remove days 19 and 20, i.e. all points in interval
[1497891338701, 1497977738701]
Is it possible?

Answer 1

You can use broken axis module to set breaks on an axis.
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5,
breaks: [{
from: Date.UTC(2017, 5, 19),
to: Date.UTC(2017, 5, 20),
breakSize: 0
}],
It seems that in your case some ticks are overlapping, but it might be fixed with axis.labels.formatter - you can check if the value is outside the break.
labels: {
formatter: function () {
const hide = Date.UTC(2017, 5, 19) <= this.value && this.value < Date.UTC(2017, 5, 20)
return !hide ? this.axis.defaultLabelFormatter.call(this) : null
}
example: http://jsfiddle.net/qhrd9wnw/