Develop Reference

How to create Highcharts plotbands along every point in line chart

I want to create a linechart with HighCharts that has a plotband along every point of the line. Like so: https://imgur.com/a/WVj7uJb
(They are using HighCharts as well, so it must be possible).
However, I can't seem to manage getting it for every point specific. Whenever I add plotbands, it just draws a band using the highest and lowest point like so: https://imgur.com/a/PZdKIBz
How I currently render the chart (note the plotbands part):
Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);
So exact example would render a plotband from 10 to 14 along the whole linechart, instead of to different points: one from 12 to 14, and one from 10 to 13.
Any ideas as to how I can accomplish this? I have seen something with 'path', but I can't find anything about it.
Thanks in advance.

In that case, you should use arearange series instead of plotBand.
Demo:
https://www.highcharts.com/demo/arearange-line
API Reference:
https://api.highcharts.com/highcharts/series.arearange

Zoom hides last point from series

I just found this strange behavior, I don´t know if it's a misused property or if it's some kind of bug.
If I zoom for a 6 months periods it seems to work, but if I scroll to the beginning of the series the last value of the column series is hidden. Here is a working example.
Highcharts.chart('container', {
rangeSelector: {
enabled: true,
},
scrollbar: {
enabled: true
},
chart: {
zoomType: 'x'
},
title: {
text: 'Zoom broken on 6m'
},
xAxis: {
type: 'datetime'
},
yAxis: [{},{}],
series: timeSeriesParser.map(set=> ({
...set,
})),
});

The issue occurs because the column needs additional space to be rendered. Another problem is that notice that for some particular data 6months means something different - for example in the case which you described the 6 months range starts on March 1, 2011, but ends on the Aug 31, 2011 - meanwhile the next column point starts on the Sep 1, 2011.
I have two ideas on how to solve this issue:
Set the pointPlacement to 'on':
Demo: https://jsfiddle.net/BlackLabel/Lze67jf3/
plotOptions: {
column: {
pointPlacement: 'on',
}
},
API: https://api.highcharts.com/highstock/series.column.pointPlacement
Or set the getExtremesFromAll to true:
Demo: https://jsfiddle.net/BlackLabel/78wte2hs/
API: https://api.highcharts.com/highstock/series.column.getExtremesFromAll

Highcharts with boost not rendering correctly at small intervals

When using Highcharts in combination with Highcharts's boost module, the graph is not rendered correclty when using small MS intervals for the xAxis.
Rendering 5000 records, with an interval of 10 ms, it looks like highcharts gets the average for a periode of time (i think)? On hovering the labels shows the correct location of the point line, not the straight line
I some how figured that the graph shows correctly at 4999 record:
Also using 100.000 record, but with a lower interval of 1000ms shows fine:
This problem only shows up when using the boost (which i MUST use because im working with millions of records). Without boost it works fine.
I could not figure out why its behaving like this.
Is this a bug of Highcharts?
Am i missing a porpperty in my chartsettings?
How can i solve this problem?
See jsfiddle for the above example : http://jsfiddle.net/r8Lv41do/49/
My Settings:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
boost: {
useGPUTranslations: true
},
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});

Try enabling the boost without the useGPUTranslation set to true.
E.g.:
Highcharts.chart('container', {
chart: {
type: 'line',
zoomType: 'x'
},
xAxis: { type: 'datetime' },
// Enables boost without any other performance options
boost: { },
navigator: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
tooltip: {
valueDecimals: 2
},
series: [{
data: data,
}]
});

Using markings In Flot on a time axis

I have a graph that monitors the traffic of people visiting a website and it currently shows all of it's data no problem:
Every month or so I update and send out a newsletter to people that are subscribed to me and I want to know if there is a way to show on that graph the time that those newsletters came out.
So if I was looking at the past week of site-traffic in my graph and my newsletter was sent out on Monday, a line would appear on that day on the graph:
I know I can sort of do this with markings, a way to add lines to a graph in flot that already exists
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
But that doesn't seem to work the same when you have time mode enabled. E.g. The parameters I'm giving it for markings won't show up when time mode is on
So my question is: How do I add a marking to the graph that appears on a specific date with flot?
EDIT
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));

Markings work just fine in flot with time axes. Can you post some code to help understand the issue better?
You'll have to set the marking from and to to the timestamp you want the marking to appear:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle has a working example of a time series axis and markings.

Highcharts - Area between two y values highlighted

I have a situation where I need to predict a trend in a time series, and I have to display confidence intervals. Is there a way to plot two sets of y-values in Highcharts as linked, and shade the area between the two? Something like this:
http://www.psychosomaticmedicine.org/content/74/4/377/F2.large.jpg
I have five time series: the prediction, two time series that bound the narrower confidence interval, and two more time series that bound the wider confidence interval.

The new Beta has that feature:
see jsFiddle
You can read more about the upcoming features in this post.

Highcharts does not natively support range charts (as of version 2.2.5), but there is a workaround. You can stack two area series on top of each other, with the foremost series having a background color matching that of the chart background.
And here is example javascript (that results in this chart):
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'Range chart emulation'
},
xAxis: {
},
yAxis: {
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 0,
stacking: 'normal'
}
},
series: [{
// this series defines the height of the range
name: 'Range',
data: [1,2,3,5,7,8,9,6,4,7,5,3,4,7,6,5,6,7,5,4,2]
}, {
// this series defines the bottom values
name: 'Dummy',
data: [0,1,2,3,3.5,7,8.5,5,2.5,5.5,3,2,3,5.5,4,3,4,5.5,4,3.5,1.5],
enableMouseTracking: false,
showInLegend: false,
fillColor: 'rgba(255, 255, 255, 0)'
}]
});
});