Develop Reference

Highchart - Column range as arrows

I am integrating column range chart but I want the column to appear as an arrow. The arrow could be facing downward / upwards based on if the value is increased or decreased.
I can't seem to find any workaround to achieve this.
Below is a reference picture of what I am trying to achieve..
Highcharts.chart('container', {
chart: {
type: 'columnrange',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6]
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

You can render triangles by using Highcharts.SVGRenderer.
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
But I think the easiest option will be using a scatter series with triangle markers to achive this. Check the following config and demo:
{
type: 'scatter',
showInLegend: false,
enableMouseTracking: false,
marker: {
symbol: 'triangle-down',
fillColor: 'rgb(124, 181, 236)',
radius: 9
},
states: {
inactive: {
opacity: 1,
},
},
data: [{
x: 9,
y: -1.3
},
{
x: 10,
y: -8.7
},
{
x: 11,
y: -9.0
}
]
}
Demo:
https://jsfiddle.net/BlackLabel/3rokf4aw/

Highchart - Connect nulls only when value is null

I have a Highchart which renders a line series as shown in the snippet below:
Highcharts.chart('container', {
title: {
text: 'The graphs connect from April to June, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
series: [{
data: [
20,
60,
null,
11,
null,
160,
120,
130,
NaN,
NaN,
80,
40],
type: 'line',
name: 'Area range series',
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
I know that Highchart has a property connectNulls to connect null values. But I want to connect only when value is Null and not NaN.

NaN is not a correct point format, just like String or Boolean. If value is not a number then it's treated as null-point. I think you want to use opposite options: connectNulls to false and just remove null points, with given indexes, demo: http://jsfiddle.net/BlackLabel/fquznbeq/4/
You can automate this process: http://jsfiddle.net/BlackLabel/fquznbeq/8/
function toHCFormat(data) {
var formatted = [];
data.forEach(function (point, i) {
if (point === null) {
// do nothing
} else if (isNaN(point)) {
formatted.push([i, null]);
} else {
formatted.push([i, point]);
}
});
return formatted;
}
Use:
data: toHCFormat([
20,
60,
null,
11,
null,
160,
120,
130,
NaN,
NaN,
80,
40
]),

how to use object as series for Highcharts

I'm really new to javascript and Highcharts so really sorry if this is a dumb question.
I have an object (called val) like this:
Object {month: Array[12], corporate: Array[12], family: Array[12], party: Array[12]}
Each array includes sales value over time for corporate/family/party.
I want to create a line chart in Highcharts with 3 lines (corporate, family, party) over time.
Below is my code:
$(function () {
$('#expandable-3').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: val
});
});
The chart is showing blank.
Could someone please help me on how to get this work?
Thank you.

If you view the options on the highcharts demo you can see how the series is specified. Highcharts basic line demo
You could change val to something like this:
var val = [
{
name: 'corporate',
data: [1,2,3]
},
{
name: 'family',
data: [1,2,3]
},
{
name: 'party',
data: [1,2,3]
}
];
To convert your data use something like:
Object.keys(val).map(function (key) {
return {
name: key,
data: val[key]
};
});

Displaying ajax requested JSON objects into HighCharts

Basically, I'm wanting to display the current temp of a city in highcharts, alongside the comparison of the expected minimum and maximum temperatures.
Currently this is my ajax request on the data, the data is then stored in a variable 'owDataJSON' which I manipulate.
$.ajax({
dataType: "jsonp",
type:'GET',
url: "http://api.openweathermap.org/data/2.5/......",
data: Object,
success: function(owData){
owDataJSON = owData;
max = owDataJSON.main.temp_max;
temp = owDataJSON.main;
min = owDataJSON.main.temp_min;
console.log(owData)
}
});
I then draw the chart using -
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
data: //what goes here?
}]
});
});
I'm wanting to know how to draw the chart? I've tried to iterate through an array but that doesn't appear to be working, the JSON data called from the URL is constantly changing so it's dynamic. I've also tried to pass 'owData' into the highcharts function and call it in the data property of series, still can't seem to get it going.
Basically when I output the data I want, I'm given a JSON object like such -
{temp: 301.15, pressure: 1007, humidity: 74, temp_min: 301.15, temp_max: 301.15}
Which is in correct highcharts format (I think), I want to print onto highcharts - the current temp, the min temp and the max temp. Any help would be greatly appreciate as I'm stuck on what to do next.
Thank you

You have to pass data to series as array of objects, so for example if you want to write chart with average temperatures per month in London you need to pass:
series: [{
name: 'London',
data: [10, 12, 16, 17, 16, 18, 22, 18, 15, 3, 4, 5]
}]
Next city will be next object in series array.
Here is full working example, and modified with dynamic data example2

Highcharts won't draw line when series values are all 0

Highcharts won't connect points in a line chart series if all the values in the array are 0 when a gradient is used.
Sample Code:
http://jsfiddle.net/p2EYM/20/
This seems to be related to the now closed issue found here. Does anyone know if there is there a workaround for this?
var colors = ['#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'];
var applyGradient = function(color) {
return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
]
};
};
//works if you comment this out.
colors = $.map(colors, applyGradient);
$('#container').highcharts({
colors: colors,
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 0,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{ data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20] },
{ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
]
});

If you move the "colors = $.map(colors, applyGradient);" line to after you call highcharts it should work.
//works if you comment this out.
colors = $.map(colors, applyGradient);
Updated example: http://jsfiddle.net/jQQF5/

This is 'bug' for Highcharts, and in general for SVG, see this.