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

javascript highcharts builder function

I am trying to make a function which will be building Highcharts charts dynamically based on parameters passed. I do it the following way:
function makeChart(name, title, series)
{
var options = {
chart: {
type: 'areaspline',
renderTo: name
},
credits: { enabled: false },
legend: { enabled: true },
title: {
text: title
},
xAxis: {
type: 'datetime'
},
yAxis: {
gridLineDashStyle: 'dot',
title: {
text: 'Quantity'
}
},
plotOptions: {
areaspline: {
animation: false,
stacking: '',
lineWidth: 1,
marker: { enabled: false }
}
},
series: [] //chart does not display except title. It will draw if I paste the data here manually
};
this.chart = new Highcharts.Chart(options);
for (index = 0; index < series.length; ++index) {
options.series[index] = {'name':series[index][0], 'data':series[index][1], 'color':series[index][2], 'fillOpacity': .3};
}
}
makeChart('container2', 'second chart', [['thisisname1', [20,21,22,23,24,25,26,27,28], '#d8d8d8']]);//calling function with test parameters
But everything I can see is the charts title. I guess the problem is in adding data to series array. I tried to add it with several ways but it did not work, although I see that the data has been added if I console.log(options.series). Any ideas how to fix that? Thank you.

Place this.chart = new Highcharts.Chart(options); after the for loop.
You're adding the data after the chart has been initialized, for it to work this way you need to tell HighCharts to redraw itself, easier option is to init after the loop. :)

Issue parsing JSON for use as data in HighCharts

I'm trying to create a chart using highcharts with dates on the x-axis.
I'm using the following example from the Highcharts website as it is almost exactly what I am trying to achieve.
Using getJson I am getting json from a URL in this format:
[[Date.UTC(2016,04,29),3],[Date.UTC(2016,04,30),1],[Date.UTC(2016,05,02),4]]
As you can see it is similar to the format used in the example. However I get the following error from getJson:
angular.js:12416 SyntaxError: Unexpected token D in JSON at position 2
I don't think Date.UTC is the issue, as when I remove it I still get an error for the next character "(".
When I remove the getJson function and simply hardcode the above values into data, exactly as it is formatted above, the chart renders perfectly. I don't understand how it works when I hardcode it but doesn't if not.
The code is as follows (exactly like in the official highcharts example really)
$(function () {
$.getJSON('http://localhost:8181/graphData', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Visitors per day'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Num people'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});

Setting options.rangeSelector.selected to 0 does not set zoom to correct level in highstock

I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?

rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.

highchart json data points

I am breaking my head over this one.
i have an highchart with Json data. now would like to split the Json data in to 2 data points.
json data;
[1340283205000,5,32]
Explanation
time, number, number
The current chart works with time, number. Now i have added another datapoint but that dows not work.
function requestData() {
$.ajax({
url: 'php/hits_json.php',
success: function(point) {
var series = chart1.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart1.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
$(document).ready(function() {
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'areaspline',
events: {
load: requestData
}
},
title: {
text: 'Hits per 5 sec'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
maxZoom: 10 * 10000
},
yAxis: {
min: 0,
minPadding: 0.25,
maxPadding: 0.1,
title: {
text: 'Hits',
margin: 40
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
marker: {
enabled: true
},
}
},
credits: {
enabled: false
},
series:
[{
name: 'Hits',
data: [0],lineWidth: 1
},{
name: 'Requests',
data: [0],lineWidth: 1
}]
});
});
Can someone point me in the right direction to solve my issue :)
Thnx in advance

You do not have the data labeled in your json. So the first two values are treated as x and y and the third is ignored. To properly format your data do something like the following:
var json = [
{
"x":1340283205000,
"y":5
},
{
"x":1340283205000,
"y":32
}];