We Keep Coding

Highcharts Tootip in wrong location for multiple x axis

I've got a chart with two x axis side-by-side, with one series in each. When I float over the Series 1 data, I see the tooltip, as expected. When I float over Series 2 data, it highlights the line, but no tooltip. However, if I move the cursor to the left at the same height as the data in Series 2 data, but above the Series 1 data, the tooltip shows the Series 2 information, and the Series 2 points are highlighted. Here's an example:
http://jsfiddle.net/q0gphwx2/5/
Is there a way to correct for this?
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
plotOptions : {
area : {
stacking : 'normal',
}
},
title: {
text: 'Tooltip Hover Anomoly'
},
subtitle: {
text: 'Float over Series 2 data, then stay at same height, but over series 1. '
},
xAxis: [{
width:300,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},{
left: 400,
width: 300,
offset:0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [{ // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {
shared: false
},
series: [{
name: 'Series 1',
type: 'line',
xAxis: 0,
stack: 0,
data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Series 2',
type: 'line',
xAxis: 1,
stack: 1,
data: [100, 120, 100, 120, 100, 120, 100, 120, 100, 120, 100, 120],
tooltip: {
valueSuffix: ' mm'
}
}]
});
});

Unfortunately it is known bug, reported to our developers here

Adding a second axis like that (using widths, left, offset, etc...) just to space out two years seems very problematic. Instead, use one axis, extend the categories through two sets of months and then start the second series at point 12:
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
series: [{
name: 'Series 1',
type: 'line',
data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Series 2',
type: 'line',
pointStart: 12, // start this one at 12
data: [100, 120, 100, 120, 100, 120, 100, 120, 100, 120, 100, 120],
tooltip: {
valueSuffix: ' mm'
}
}]
Updated fiddle.

Highcharts threshold background color from 100 y-axis

This can be done using flotCharts, but I like using Highcharts a lot more for graphing data.
It's done by using:
grid: {
markings: [ {
xaxis: { from: -1, to: 12 },
yaxis: { from: 100, to: 300 },
color: "#FFA5A5" }]}
I was wondering if something like this is possible in highcharts ?
Right now I'm using limit-min and limit-max to draw a line at y-axis 10 like this: http://jsfiddle.net/kyUaR/32/ but I'd rather have the entire background change from that point upwards.

flots markings is analagous to Highchart's plot bands.
Quick example:
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
plotBands: [{
color: '#FCFFC5',
from: 100,
to: 300
}]
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Fiddle here.

Cannot hide x axis in highchart

Demo jsfiddle
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
gridLineColor: '#197F07',
gridLineWidth: 0,
lineWidth:1,
plotLines: [{
color: '#FF0000',
width: 1,
value: 0
}]
},
series: [{
data: [-2,1,2,3,-3,2,1]
}]
});
});
Hi, I'm working on highchart (line). I want to hide x axis, only horizontal line at 0
At above chart, I want a horizontal line at 0 only, not at -4
Is there a way to do that?

Add this to your x-axis config:
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
lineColor: 'transparent'
Here you have it working: http://jsfiddle.net/edgarinvillegas/ssQVJ/8/

Resize chart and navigator

How can I resize a chart and the navigator? In my JSFiddle http://jsfiddle.net/Charissima/8nenL/4/ the chart disappears, when the window is resized.
$(window).resize(function()
{
chart.setSize(
$(document).width(),
$(document).height()/2,
false
);
});
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
spacingTop: 3,
spacingRight: 0,
spacingBottom: 3,
spacingLeft: 0
},
navigator: {
enabled: true,
top: 330, // Abstand von oben
outlineColor: '#C0C0C0',
outlineWidth: 1
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});

It looks like a global problem with highstock, so I reported it to our developers here: https://github.com/highslide-software/highcharts.com/issues/2364

Highcharts Information bubbles at bottom of chart - is it possible?

I have built a chart and I am looking to add information bubbles (like the image below) to the bottom of the chart, is there anything in highcharts that I could use to do this?

You could use a scatter plot series to add dots at specific points. jsFiddle and code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis : {
min:0
},
series: [{
type: 'line',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
name: 'Temperature'
}, {
type: 'scatter',
data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
name: 'Rainfall'
}]
});
});​
Edit:
You can set showInLegend to false to hide the scatter series from the legend, and you could add a tooltip function to display whatever info you want.