Develop Reference

How to displey negative values in highcharts js?

I try to draw a chart. Negative values are not drawing. Here is a link of picture:
new Highcharts.chart('container', {
chart: {
type: 'spline',
plotBorderWidth: 1,
zoomType: 'xy',
panning: {
enabled: true,
type: 'xy'
},
panKey: 'shift'
},
rangeSelector: {
selected: 1
},
title: {
text: 'David'
},
xAxis: {
min: -1,
max: 2,
title: {
text: "dcjdkjckjdkc"
}
},
yAxis: {
min: -120,
max: 120,
title: {
text: "dcjdkjckjdkc"
}
},
series: [{
name: 'AAPL Stock Price',
data: [-1, 0, -2, 1],
type: 'spline'
}, {
name: 'black',
data: dataRealGraph,
}]
});

Showing multiple data with same x and y in highchart

I try using highchart in react-native to show 6 data from the state, and it works the data shown. But because the 6 data have same X and Y, so the data were shown but stacking so it looks like there is only one data (the X is the time when the data get the post, and the Y the day when the data get the post). Is there any way to make the data all appear in the chart.
This is the chart look like :
This is my highchart conf :
var conf= {
chart: {
type: 'scatter',
backgroundColor: '#233767',
zoomType: 'xy',
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
style:{
color:'white'
}
},
},
yAxis: {
type: 'datetime',
lineWidth: 1,
dateTimeLabelFormats: {
minute: '%H:%M'
},
labels: {
style:{
color:'white'
}
},
title: {
enabled: false
},
gridLineColor:'transparent'
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: false,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
Highcharts.dateFormat('%H:%M:%S', this.y);
},
},
credits: false,
exporting: false,
legend: {
itemStyle: {
color: '#FFFF',
fontWeight: 'bold'
}
},
title: false,
series: this.state.chartState
}

You can for example distinguish points by using different radius:
series: [{
data: [
[10, 10]
],
marker: {
radius: 10
}
}, {
data: [
[10, 10]
],
marker: {
radius: 5
}
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/tm0v6fw4/
API Reference: https://api.highcharts.com/highcharts/series.scatter.marker.radius
Or use multiple axis with different scale:
series: [{
data: [
[10, 10]
]
}, {
data: [
[10, 10]
],
yAxis: 1
}, {
data: [
[10, 10]
],
yAxis: 2
}]
Live demo: https://jsfiddle.net/BlackLabel/qwj4mu7n/
API Reference: https://api.highcharts.com/highcharts/yAxis

Custom Line Chart

How to make changes in highcharts time series zoomable chart to get similar to the one mentioned in below link:
https://www.highcharts.com/demo/line-time-series
Used JS :
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
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: 'Exchange rate'
}
},
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
}]
});
}
);

Move x-axis (tick, labels and line) in highcharts

Is it possible to move the y-position of the x-axis in highcharts? So far, I have only been able to move it to the top or bottom of my chart using
opposite: true/false
but now I need it to be in the middle of my graph, at a fixed y-value. My current code is
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
type: 'spline',
renderTo: 'container'
},
title: {
text: 'Title'
},
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1
},
yAxis: {
labels: {
enabled: true
},
title: null,
gridLineWidth: 0,
min: 1,
max: 3.1
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
marker: {
enabled: false
},
name: 'Year 1800',
data: [
[1, 1],
[2.5, 1]
],
showInLegend: false
}, {
marker: {
enabled: false
},
name: 'Year 1900',
data: [
[1.5, 2],
[3, 2]
],
showInLegend: false
}, {
name: 'name1',
data: [
[2, 3]
],
type: 'scatter',
zindex: 10
}, {
name: 'name2',
data: [
[3, 3]
],
type: 'scatter'
}, {
name: 'name3',
data: [
[1.5, 3]
],
type: 'scatter'
}]
});
});
});
My JSfiddle is http://jsfiddle.net/5xum/fVpqU/7/ .
I want the x axis (along with the ticks and labels) to run through y=2.5, between the two different data sets. Does HighCharts support this?

You can use offset property to move xAxis. In your case you have to use negative offset to move xAxis down:
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1,
offset: -130
},

$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text : <%=jtitle%>
},
xAxis : {
min:Date.UTC(2016, 0, 0),
max:Date.UTC(2016, 11, 1),
//allowDecimals: false,
type : 'datetime',
tickInterval : 24 * 3600 * 1000*30, //one day
labels : {
rotation : 0
},
},
yAxis: {
dateTimeLabelFormats: {
day: '%Y' },
labels :{
formatter:function() {return Highcharts.dateFormat('%Y',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 5,
color: '#808080'
}]
},
series : [
{
name : 'MB Data',
data : <%=datasp%>,
tooltip: {
valueDecimals: 2,
dateTimeLabelFormats: {
hour: '%H:%M'
}
}
},
{
name : 'Date & Time',
data : <%=datetime%>
},
]
});
});

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/