Develop Reference

How can I align scale with axis in Highcharts?

By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively. I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
http://jsfiddle.net/z7eyv/60/
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},

Align label and the marker on the same vertical line(Highcharts)

I want to add a dash like in the red circle from the first point(blue). Is it possible?
Here is my code
function graph(graph_id, value_array,tool_tip_title, max, min){
$('#'+graph_id).highcharts({
chart: {
type: 'areaspline',
backgroundColor:'transparent'
},
title: {
text: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return moment(this.value).format("HH:mm:ss");
}
}
},
yAxis: {
title: {
text: false
},
gridLineColor: 'transparent',
labels:{enabled: true},
gridLineWidth: 0,
minorGridLineWidth: 0,
min: min,
max: max
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1
},
series: {
tooltip: {
dateTimeLabelFormats: {
second:"%A, %b %e, %H:%M:%S"
}
},
marker: {
fillColor: '#3D84B1',
lineWidth: 2,
lineColor: 'white',
radius: 6
}
}
},
series: [{
showInLegend: false,
name: tool_tip_title,
color: "#EC615F",
data: value_array
}]
});
}
I have also tried setting up the startOnTick to true and min to the least dateTime of x axis but nothing is happening.

Highcharts by default calculates some nice dates and sometimes the first possible label/datapoint is not fitting into that 'nice labels' algorithm. In case you want to display specific labels, use xAxis.tickPositioner. In your case, I think you can simply add two extra dates, like this:
tickPositioner: function() {
var tp = this.tickPositions; // get default positions
tp.splice(0, 1, this.min); // replace first label
tp.splice(tp.length - 1, 1, this.max); // replace last label
return tp;
}
Simple demo: http://jsfiddle.net/p98rggva/

you can use startOnTick and min as per your minimum data.
startOnTick: true,
min: your smallest data of xAxis/in date use first timestamp of sorted data

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$'
}
},

How do I show multiple line from dynamic data using javascript in highchart

I have a chart that is getting user input selection from a drop down list in jsf and generate chart based on the item selection. It is working perfectly. But If I want to select multiple items at a time and want to show multiple lines at a time, how is that possible? I know I have to use another jsf component instead of dropdown list. But I am not getting how can I pass multiple data series at the same time to highcharts. The sample code I used to generate chart based one single item selection is as following:
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 20
},
title: {
text: ''
},
xAxis: {
startOnTick:true,
showFirstLabel: true,
endOnTick : true,
showLastLabel:true,
categories: dateAndTimeArray,
tickInterval: 20,
labels:{
rotation:0.1,
align: 'left',
step: 12,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d',
shared: true
},
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')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series: [{
type: 'line',
name: 'Value',
/* pointInterval: 0.75 * 3600 * 1000,
pointStart: Date.UTC(2013, 1, 1), */
data: chartData,
marker: {
enabled: false
}
}]
});
});

You do not include your code for updating the chart with the data selected. So, this is just a general answer. The highchart series object can contain multiple elements:
series: [{series 1}, {series 2}]
You could get the list of the selected items in your ddl and then iterate over your data sets to find matches and use that to addSeries.

HighCharts pointRange trancating width. Is this a HighCharts bug or am I missing something?

I have a HighCharts chart that combines a spline and a column. The column data defines a single Y value---indicating a single column---and uses pointRange to indicate what X value range that single column covers. Everything works fine as long as the pointRange is less than the maximum X value in the spline data. But when the pointRange is greater than the maximum X value in the spline data, HighCharts radically truncates the point range, e.g. from my desired 10,000 to about 4200, about half the maximum X value. The label also shifts radically to the left, as if the column has a significant extent for X values less than 0, which do not exist in the data I pass.
(I would like to post a snapshot of the problem, but my reputation is insufficient.)
Is this a HighCharts bug, or am I missing something here? Bayes suggests the latter of course, but I can't fine what I am missing. Hence this request to the gods of stackoverflow.
Here is a fiddle illustrating my problem: http://jsfiddle.net/Bridgeland/UVF4P/1/ If you change the pointRange from 10000 to 8000, you can see the result that I expected, albeit with slightly smaller column.
Here's my code, with much of the data omitted for brevity:
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
(And you might be wondering why I have a column chart with a single column? My chart generally has more columns. The single column is a pathological case for a particular combination of data. But despite the pathology, I would still like it to display properly.)

It seems that Highcharts do not permit to have a pointRange greater than the max value in x or the minRange value.
You can fix that by doing :
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0,
minRange: 10000
//^^^^^^^^^^^
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
Since you set pointInterval at 10000, I think you can do the same thing with the minRange value ?

Can't you also set a xAxis max of, say, 10500? Wouldn't that allow the column to expand to 10k?