PlotLines on Date-Axis: (intermediate value).concat is not a function - highcharts

I'm trying to add a plotLine to my chart, but always get this error:
(intermediate value).concat is not a function
I've prepared a jsfiddle: (intermediate value).concat is not a function
Any suggestions, what I'm doing wrong here?

Please take look at examples: http://jsfiddle.net/ge3fg/ http://jsfiddle.net/47zgw/
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]

Related

Highcharts heatmap not rendering squares or rectangles

Can someone help me to understand what is wrong here. Everything seems perfect.
http://jsfiddle.net/prakash4mail/nt86gj7z/1/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
borderWidth: 1,
data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
dataLabels: {
enabled: true,
color: '#000000'
},
}]
});
});
heatMap showing lines instead of squares
The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.
As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/
Notice how the data structure looks like in this demo from Highcharts demo base:
https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/
And to show your truly y scale you can use the categories feature.
yAxis: {
categories: ['18000', '18500', '19000']
},
API: https://api.highcharts.com/highcharts/yAxis.categories
EDIT:
Another solution suggested by #prakash is to use the series.rowsize property and series.colsize to fit the squares.
API: https://api.highcharts.com/highcharts/series.heatmap.rowsize
API: https://api.highcharts.com/highcharts/series.heatmap.colsize

Highcharts gauge chart customization

I need to display a white line in the middle of the gauge chart like this:
But I can't find a customization option suitable to do that in Highcharts gauge chart. Can anyone please help?
I don't want the "gauge" arrow. I just want the white separator at 50%.
You can add the separator by using plotLines option:
yAxis: {
plotLines: [{
value: 100,
width: 4,
color: '#fff',
zIndex: 4
}],
...
}
Live demo: https://jsfiddle.net/BlackLabel/1mj80dc6/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines

Column Chart is not Printing when all values are negative

I have a chart that is feeded with positive and negative values, and I thought that it was working perfectly, but suddenly I realize that the columns are not printed when all values are negative....Is there anything I am doing bad??
Here is my code:
new Highcharts.chart('av2', {
chart: {
type: 'column',
height: 500,
},
series: [{
name: 'Direct Purchase',
data: [ { y: -1.82, name: 'DK' }, { y: -19.8, name: 'DL' }]
}]
});
Mixed Values: https://jsfiddle.net/zowcqz09/6/
All Negative Values: https://jsfiddle.net/zowcqz09/5/
Best Regards,
You can use the yAxis options as workaround - Fiddle
Definitely a bug in v6. Even the official demo doesn't render anything if you change it to all negative values. You can use v5 until that is fixed:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts.js"></script>
Edit: Fixed in v6.0.1 (https://github.com/highcharts/highcharts/issues/7228).

How to draw a vertical line on HighCharts?

I want to trace a vertical time line on the current day, but I didn't found solution on HighCharts documentation.
Like this :
You're looking for a plot line. See the documentation here: http://api.highcharts.com/highcharts#xAxis.plotLines.
The basic format is:
xAxis: {
plotLines: [{
color: '#FF0000', // Red
width: 2,
value: 5.5 // Position, you'll have to translate this to the values on your x axis
}]
},

Can I have multiple plotlines with Highcharts?

Simply put I am looking for a way to set two or more plotLines in highcharts/highstocks. The API doccuments do a good job of showing how to set one although I am not sure if there is a way to set two of them.
Yes it is possible, just declare multiple plotLine configurations in the array:
plotLines: [{
color: '#FF0000',
width: 2,
value: 4.5
}, {
color: '#00FF00',
width: 2,
value: 5.5
}]
Example on jsfiddle
Is there a method where i can supply an array of points to value ? Instead of new tags
{
color: '#00FF00',
width: 2,
value: 5.5
}
for each point .

Resources