Highcharts - How to show intermediate values on Area chart - highcharts

Question

I have the following chart: https://jsfiddle.net/w7jm2n6u/
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x'
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
title: {
enabled: false
},
min: Date.UTC(2018, 10, 1)
},
yAxis: {
title: {
enabled: false
},
labels: {
formatter: function() {
return this.value / 1000;
}
},
max: 2000
},
tooltip: {
split: false,
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
series: [{
name: 'Exceeds',
color: '#0000FF',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 2000
},{
x: Date.UTC(2019, 0, 1),
y: 2000
}, {
x: Date.UTC(2019, 1, 1),
y: 2000
}, {
x: Date.UTC(2019, 2, 1),
y: 2000
}],
}, {
name: 'Meets',
color: '#00FF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 700
},{
x: Date.UTC(2019, 0, 1),
y: 800
}, {
x: Date.UTC(2019, 1, 1),
y: 700
}, {
x: Date.UTC(2019, 2, 1),
y: 800
}],
}, {
name: 'Minimum',
color: '#FFFF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 400
},{
x: Date.UTC(2019, 0, 1),
y: 400
}, {
x: Date.UTC(2019, 1, 1),
y: 400
}, {
x: Date.UTC(2019, 2, 1),
y: 400
}],
}, {
name: 'Below Minimum',
color: '#FF0000',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 100
},{
x: Date.UTC(2019, 0, 1),
y: 200
}, {
x: Date.UTC(2019, 1, 1),
y: 300
}, {
x: Date.UTC(2019, 2, 1),
y: 320
}],
},
{
name: 'Data',
color: '#000000',
type: 'line',
data: [{
x: Date.UTC(2019, 0, 3),
y: 50
},
{
x: Date.UTC(2019, 0, 15),
y: 500
},
{
x: Date.UTC(2019, 1, 4),
y: 1000
},
{
x: Date.UTC(2019, 1, 15),
y: 1400
},
{
x: Date.UTC(2019, 1, 28),
y: 1900
},
]
},
]
});
Ideally, I would like to be able to hover over each area and see a tooltip with the value at that point in time for each of the 4 areas. For instance, between January 1st and February 1st, the Below Minimum (red) value ranges from 200 to 300. If I were to put my mouse halfway between those dates, I would want to see 'Below Minimum: 250'. Is there a way to achieve this?
If not, I would at least like the current tooltip to always show the previous point value instead of whichever it is closest to. If I hover around 12/2018, I want to see the point from Sept 1, 2018, not January 1, 2019. Essentially these are start dates for the values and are only valid on or after the date.

Answer 1

You need to increase the density of points. Below you can find an example how you can do it programmatically:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series,
iterations = 2,
i = 0,
newData = [];
for (; i < iterations; i++) {
series.forEach(function(s) {
newData = [];
s.points.forEach(function(p, j) {
if (j) {
newData.push(
[
s.points[j - 1].x +
(p.x - s.points[j - 1].x) / 2,
s.points[j - 1].y +
(p.y - s.points[j - 1].y) / 2
],
[p.x, p.y]
);
} else {
newData.push([p.x, p.y]);
}
});
s.setData(newData, false);
});
this.redraw(false);
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/d8jq9bvh/
API Reference: https://api.highcharts.com/highcharts/chart.events.load