Develop Reference

How to add legend to a 3D scatter graph using Highcharts?

I am trying to add a legend to a 3d graph using highchart but i am unable to do that..How can i achieve that ?
Below is the jsfiddle code
jsfiddle
Below is the code i added for legend but its not working...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter3d',
animation: false,
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 150,
viewDistance: 5,
}
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
categories: snr,
title: {
text: null
},
labels: {
format: '{value:.2f}'
}
},
xAxis: {
type: 'category',
categories: mac,
title: {
text: null
}
},
zAxis: {
// categories: count,
min: 0,
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25
},
legend :{
enabled : false
},
series: [{
name: 'Reading',
colorByPoint: true,
});
Please guide me to display the legend in the 3d graph...

Negative color with area color fill and yAxis

Base chart:
type: 'area',
https://jsfiddle.net/q3x9psdz/19/
But when cross value is to big for curent chart - yAxis is expanding:
plotOptions: {
series: {
threshold: 20,
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50,
crosshair: true,
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
},
{
value: 20,
color: 'coral',
dashStyle: 'shortdash',
width: 2,
}
]}
https://jsfiddle.net/q3x9psdz/14/
Workaround is to use spline or line:
series: [{
type: 'spline',
name: 'Chart',
data: [[1523195126000,1],[1523195426000,3],[1523195726000,1],[1523196026000,2],[1523196326000,6],[1523196626000,5],[1523196926000,2],[1523197226000,3],[1523197526000,1]],
negativeColor: true,
color: '#FF4040',
shadow: true
}]
https://jsfiddle.net/q3x9psdz/23/
But on cros no area color:
plotOptions: {
series: {
threshold: 2.5,
}
},
https://jsfiddle.net/q3x9psdz/21/
Any solution to have color fille area and not expanding yAxis?

Set series.softThreshold to true.
plotOptions: {
series: {
threshold: 20,
softThreshold: true
}
},
live example: https://jsfiddle.net/j58bvw36/

X-axis interval in Highcharts

I have this highchart graph displayed on my website. How can I set an interval for my x-axis? e.g. I want the fist value to be displayed and then skip the second and display the third.
Can this be done? Or do you always just HAVE to display all the data you're passing to the axis in an array?
My code: (timestamp is a JS array that contains my time. I can get that time in epoch format. act and temps are arrays for data to be plotted along y-axis)
$(function () {
$('#tempactgraph').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature & Activity Monitoring '
},
subtitle: {
text: 'Source: Cowlar Sensors'
},
xAxis: [{
categories: timestamp,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Activity',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} xx',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Activities',
type: 'spline',
connectNulls: 1,
yAxis: 1,
data: act,
tooltip: {
valueSuffix: ' xx'
}
}, {
name: 'Temperature',
type: 'spline',
connectNulls: 1,
data: temps,
tooltip: {
valueSuffix: '°C'
}
}]
});
});

You need to Add a tickInterval:2 to your x-axis decleration like so
xAxis: [{
categories: timestamp,
crosshair: true,
tickInterval: 2
}],
Highcharts API Reference

HighCharts axis flip on export

I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?

bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.

Date-labels missing in Highcharts

In the chart described in this fiddle, the date-labels on the x axis are missing. Can anyone tell me why that is? The code in the fiddle is listed below:
$(function () {
var counts = [[635172879695710000, 383], [635172882696280000, 271], [635172885696780000, 274]],
averages = [[635172879695710000, 288774], [635172882696280000, 85592], [635172885696780000, 79455]],
ranges = [[635172879695710000, 12, 2760740], [635172882696280000, 12, 2761263], [635172885696780000, 12, 2761265]];
$('#container').highcharts({
title: {
text: 'Testing!'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
labels: {
format: '{value}B',
style: {
color: '#89A54E'
}
},
title: {
text: 'Size',
style: {
color: '#89A54E'
}
},
min: 0
}, {
labels: {
format: '{value}M',
style: {
color: '#4572A7'
}
},
title: {
text: 'Messages',
style: {
color: '#4572A7'
}
},
min: 0,
opposite: false
}],
tooltip: {
shared: true
},
series: [{
name: 'Line',
type: 'spline',
data: averages,
color: '#89A54E',
zIndex: 1,
marker: {
enabled: false
}
}, {
name: 'Area',
data: ranges,
type: 'areasplinerange',
lineWidth: 0,
linkedTo: ':previous',
color: '#89A54E',
fillOpacity: 0.3,
zIndex: 0
}, {
name: 'Count',
data: counts,
type: 'spline',
zIndex: 2,
color: '#4572A7',
yAxis: 1,
marker: {
enabled: false
}
}]
});
});

High charts is unable to parse the datetime that you have given.
Check console for the following error
Cannot call method 'substr' of undefined
Your dateTime seems to be micromilliseconds, which is not valid
635172879695710000
635172882696280000
635172885696780000
Try to change the format to milliseconds

check the timestamp they are invalid.
[timestamp, value]
updated your timestamps and got it working http://jsfiddle.net/BbZq7/7/