Develop Reference

Highstock display multiple series with wrong scale on yAxis so lines are stacked randomly

I have a Highstock chart displaying 3 data series. The series have the correct values but the line with higher values is not displayed above the other two, but between them, and this changes randomly.
Here you can see three spots of the same chart:
spot one spot two spot three
I've tried changing the data series, changing the period. This only happens when I have three data series. I have charts with two and four data series and they work well.
This is the chart config that I'm using.
Highcharts.stockChart(container, {
chart:{
zoomType: 'x',
events: {
load: updateLegendLabel
}
},
title: {
text: graficoData.nombre
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
menuItems: buttons
}
}
},
rangeSelector: {
enabled: showRangeSelectors,
buttons: [
{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'all',
text: 'Todo'
}],
buttonTheme: {
width: 60
},
selected: 2
},
xAxis: {
events: {
afterSetExtremes: updateLegendLabel
}
},
yAxis: {
resize: {
enabled: true
},
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
navigator: {
height: 30,
margin: 2
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2,
split: true,
valueSuffix:' ' + unidad
},
responsive: {
rules: [{
condition: {
maxHeight: '100%'
},
chartOptions: {
rangeSelector: {
inputEnabled: false
}
}
}]
},
series: series
});
I expect that when the yAxis value is higher, the line get displayed above, and when the value is lower the line get displayed below, since they share the same scale.
Thanks in advance for your help.

How to render a specific data point marker on HightCharts Bell Curve?

Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: null
},
visible: false
}, {
title: {
text: '5 Meter Sprint'
},
opposite: false,
visible: true
}],
yAxis: [{
title: {
text: null
},
visible: false
}, {
title: {
text: null
},
opposite: true,
visible: false
}],
series: [{
name: null,
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
intervals: 4,
baseSeries: 1,
enableMouseTracking: false,
}, {
name: 'Data',
data: data,
visible: false,
}]
});
jsfiddle: https://jsfiddle.net/0b24mwfs/40/
So I've been try to do a highly customized bell curve chart with HighCharts, right now I'm able to disable most of the stuff expect the xAxis and the bell curve itself, but How to render a point on the curve by passing it a specific value?
Update:
Seems like it called marker on highcharts, by default it is rendering all the markers along the curve, is there a way to let it render only one by specifying the value?

You can update generated points in load event: https://jsfiddle.net/BlackLabel/g1qhj8bv/1/
chart: {
events: {
load: function () {
this.series[0].points[10].update({
marker: {
enabled: true,
fillColor: 'white',
radius: 6,
lineWidth: 2,
lineColor: 'red'
}
});
}
}
},
The only problem is to find index of a point you need: points[10]. I think you can simply loop over them, until you find the needed one, then update.

How to join the graph points using curve or arc

I am using highcharts to make a graph . My graph is look like below,
I want to merge the points using an Arc or Curve. So my excepted output look like below,
Also i am using PlotLines to draw a line in Yaxis. I want to mark the point in the PlotLine . I am using the following code to make this graph .
$(document).ready(function () {
var left = [[4,7],[9,2]];
var right = [[2,2],[9,9]];
Highcharts.chart('container', {
title:{
text:''
},
tooltip: { enabled: false },
exporting: { enabled: false },
credits: {enabled: false},
plotOptions: {
series: {
pointStart: 1
}
},
xAxis: {
max: 10,
min: 1,
tickInterval: 1
},
yAxis: {
max: 11,
min: 0,
tickInterval: 1,
plotLines: [{
color: 'black',
value: 5.5,
width: 2
}],
},
series: [{
showInLegend: false,
data: left
},
{
showInLegend: false,
data: right
},
],
});
});

HighCharts not plotting decimal values in x-axis

I'm trying to plot decimal values on my x-axis, but each of my data points gets placed only on my major tick marks (at whole numbers). I'm using an array of [x,y] paired data, e.g. [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]]
What is happening, is the first item get's placed over the starting value (35), the second value (x 35.21) is being placed directly over 36, the next value (x 35.72) gets placed over 37, etc. It's as if the x-value in my data is being ignored.
Here is the chart's setup attributes:
chart: {
zoomType: 'x',
spacingRight: 10,
type: 'area'
},
title: {
text: null
},
xAxis: {
allowDecimals: true,
tickInterval: 1,
minorTickInterval: 10,
labels: {
step: 1
},
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
pointStart: 35,
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
//index: 1,
name: 'trajectory$',
data: progressUpdateData,
}
]
How do I get the x-values plotted properly?
Thanks

Here's a fiddle showing your points in-between whole numbers
http://jsfiddle.net/LLExL/2462/
plotOptions: {
area: {
pointStart: 35,
pointPlacement: 'between',
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
}
You might want to look at http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement as maybe you have this set to "on" instead of "between" somewhere?

Will's answer didn't work for me. However, setting a min and a max to yAxis did. If you have these values [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]], you simply set a minimum of 35 and a maximum of 37.
This
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
became this
yAxis: {
min: 35,
max: 37,
title: {
text: 'total$'
}
},

Highchart line chart tooltip issues with large dataset

I have quite a large dataset displaying in a highcharts line chart. Tooltips are enabled but the displaying of the tooltip is quite erratic, especially when zoomed in.
You can see the dataset here: http://jsfiddle.net/ARfcB/2/
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
zoomType: "x"
},
plotOptions: {
line: {
marker: {
enabled: true
},
animation: true
}
},
legend: {
enabled: true,
layout: "vertical",
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
enabled: true,
shared: false
},
xAxis: {
type: "datetime"
},
yAxis: {
title: {
text: 'Up/Down'
},
labels: {
style: {
color: "blue"
}
},
min: 0,
max: 1,
tickInterval: 1,
categories: ['Down', 'Up']
},
credits: {
enabled: false
},
series: "large dataset on jsfiddle page"
});
});
The graph basically shows an up/down value for each series. When the mouse is hovering over the 'down' values, no tooltip displays.
When zooming in its even worse. Tooltips are displayed but for a point other than the one that is hovered over; and never for the 'down' values.
I'm wondering is this just because the dataset is quite large or is it an issue with highcharts itself.
Thanks in advance for the help.

Your data should be sorted via x ascending.