We Keep Coding

Need to join x axis and y axis label highcharts

I am trying to join the nodes of the x axis and the y axis of the area spline chart. Here is my fiddle and also I need to move title and subtitle at the left corner and need to integrate dropdown. Basically I need graph something like this .
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
title: {
text: 'Total Visitors',
x: 0,
},
subtitle: {
text: 'This is all users that visited your site',
x: 0,
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
},
series: {
marker: {
enabled: false
},
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
lineColor: '#8b8bff',
color: '#c5c6ff',
showInLegend: false,
lineWidth: '4px',
name: 'John',
data: [37, 25, 50, 20, 37, 28, 50, 42, 70, 46, 55, 26]
}]
})
Kindly help
Thank you!!!

To start axes ticks in the same place set tickmarkPlacement to on and also set min and max.
To move title and subtitle to the left corner use align property:
title: {
...,
align: 'left'
},
subtitle: {
...,
align: 'left'
},
xAxis: {
tickmarkPlacement: 'on',
min: 0.5,
max: 10.5,
...
}
Live demo: https://jsfiddle.net/BlackLabel/w7p6rL8o/
API Reference: https://api.highcharts.com/highcharts/title.align

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.

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/

How to add a plotline to a bar chart in Highcharts?

I am trying to add a plot line to a bar chart but it isn't showing up. All of the examples of plot lines I have found have to do with line charts but I don't see anything in the documentation that says plotlines don't work with bar. I tried adding the plotline when I initialized the chart and adding it after the fact and neither way works.
Here is the example I am testing with.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
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]
}]
});
});

plotLines is a sub-option of the yAxis or xAxis config and not a base option as you have it:
<SNIP>
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
},
<SNIP>
Update fiddle here.

Axis.addPlotLine() api allows to add a line in the axis after the chart has been rendered .
var plotOption = {
color: '#FF0000',
dashStyle: 'ShortDash',
width: 2,
value: 1000,
zIndex: 0,
label : {
text : 'Goal'
}
};
this.lineChart.yAxis[0].addPlotLine(plotOption) ;
//where lineChart is the reference to the existing chart

Highcharts - the third line is not displayed properly

I have a Highcharts graph that consist of 3 lines - fiddle here. The problem is, that the third line (the black one - New York) is not displayed properly - the points with 0 value are not shown into the graph.
But the zero-points for those 2 previous lines are displayed properly.
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [0, 5.68, 0, 0, 2.55, 0, 0, 0]
}, {
name: 'New York',
data: [0, 1, 0, 1, 2, 0, 0, 0]
}, {
name: 'Berlin',
data: [0, 1, 0, 0, 1, 0, 0, 0]
}]
});
});
Am I missing something or why is the third line incomplete?
Thanks