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

Highstock Stock Tools Creating Indicator GUI Does Not See Chart Series

I have a chart with several series that have data monthly. I am trying to use the stock tools GUI to enable users to add/alter the SMA indicator. I can get the stock tools to load and have the popup to modify the SMA properties. Except, the GUI has no series listed in the drop down. I have created a very simplified version using unemployment data and just one series here.
I am adding the libraries as per usual and my chart code is nothing fancy. My series looks like:
type: 'line',
name: 'Unemployment Rate (%)',
tooltip: {
valueSuffix: '%',
valueDecimals: 1
},
visible: true,
showInNavigator: true,
data: [{
x: 189406800000,
y: 4.50
},
{
x: 192085200000,
y: 4.30
},
{
x: 194590800000,
y: 3.60
},...
I get no errors in the console - just no way to create the SMA series linked to a series of my choosing. Note that if I manually create the SMA series and link to my data series it does appear but I do not want to create a default ahead of time.

You need to add id property to your series:
series: [{
id: 'one',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/t91qeu3z/
API Reference: https://api.highcharts.com/highstock/series.line.id

Different X values for different columns on highchart

I have a problem with drawing a highchart like on this fiddle
Sample highchart. But I want chart like this one, but with many series/labels in legend. I want to get 'Jan', 'Feb', 'March', 'April' as a different series to filtering the chart. How can I do that?
When I'm using something like this instead of one series I've got 4 series only for first X value. So it's not a solution.
series: [{
name: 'Series1',
data: [49.9]
}, {
name: 'Series2',
data: [83.6]
}, {
name: 'Sereis3',
data: [48.2]
}, {
name: 'Sereis4',
data: [42.1]
}]

Thanks Sebastian Bochan. Your comment was very helpful.
This is solution of my problem
http://jsfiddle.net/tLjke7fp/6/
I have only added this code to your solution.
plotOptions: {
column: {
stacking: 'normal',
}
},
or
plotOptions: {
column: {
grouping: false,
}
},

Highcharts X-axis labels on the side

I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
This is the code I'm using, I add the series in a dynamic way.
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
enabled: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Score',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
});
// Add Series
var detailchart = $('#chart-detail').highcharts();
var categories = new Array;
// Set Chart Title
detailchart.setTitle({text: results[0].category});
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score]
});
});
detailchart.xAxis[0].setCategories(["1", "2"]);
$('#chart-detail').highcharts().reflow();
Results is an array that looks like this (I get it through ajax):

As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score, 40], //40 is some data for your second category.
});
});
Demo: http://jsfiddle.net/u6crkatv/

Only what you need is use 4 series, each of them with single data point.
series: [{
name: 'Year 1800',
data: [107]
}, {
name: 'Year 1900',
data: [138]
}, {
name: 'Year 2008',
data: [973]
},{
name: 'Year 20098',
data: [973]
}]
Example: http://jsfiddle.net/y9wzggc4/

Highchart ticks start point change when categories names are set

I have a chart made with highcharts.js.
The graph works the way I wanted but then if I try to set the categories (programmatically or not) somehitng strange happen, the tick become smaller and move to the centre leaving a big space on the sides of the graph.
BEFORE:
AFTER:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'graph',
type: 'area',
},
xAxis: {
title: {
text: ''
},
startOnTick: false,
endOnTick: false,
tickmarkPlacement: 'on',
},
series: [{
data: [['aa',29.9], ['bb',71.5], ['cc',106.4],['dd', 129.2 ]]
}],
});
// the button handler
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setCategories(['bb', 'bb', 'cc', 'dd']);
});
});
See this JsFiddle:
http://jsfiddle.net/MaurizioPiccini/d746v/3/
It all happens when you press the button (the categories can be set in the xAxis as well giving the same problem).
Is it possible to have named categories to start and end at the graph extremes?

You can use workaround which, updatse your axis with defined min/max value.
chart.xAxis[0].update({
categories: ['bb', 'bb', 'cc', 'dd'],
min: 0.5,
max: 2.5
});
http://jsfiddle.net/d746v/6/

I found a solution that is also reporteed here:
http://forum.highcharts.com/highcharts-usage/highchart-ticks-start-point-change-when-categories-names-are-t29052/
The solution is not to use categorized xAxis but linear or datetime with label formatter like this:
xAxis: {
labels: {
formatter: function(){
return categories[this.value];
}
}
}
where categories is an array of categories.
It looks like that is the only way to make the chart behave this way.