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

Fourth y axis does not show labels in Highcharts

I have a chart with 4 series plotted, I decided to put two y axis on each side of the graph, which worked. The only trouble I am having is showing all the labels of each y axis, specifically the last one in the series that I have named "Stuff Data", it is apparently using the Voltage data's y axis
Please see:
https://jsfiddle.net/Lprm4ofw/51/
I have tried switching the order of the series and yAxis but always the last one's label would not show up. I also tried playing with the margins in case it's hidden but it is definitely not. What can I try to do to fix it? here is the code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
type: 'spline'
},
title: {
text: 'Whatever'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Voltage',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
format: '{value} V',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
title: {
text: 'Current',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
},
{ // Third yAxis
gridLineWidth: 0,
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
},
{ // Fourth yAxis
title: {
text: 'stuff',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: 'WHEREAMI',
style: {
color: Highcharts.getOptions().colors[4]
}
},
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yaxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3 , 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6 , 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yaxis: 3,
}]
});

You have to use correct property name, xaxis is not the same as xAxis:
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yAxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3, 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6, 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yAxis: 3,
}
]
Live demo: https://jsfiddle.net/BlackLabel/6wrahgko/

Highcharts BarRange with multiple points marked within the range?

I've been tasked with generating charts that would display a BarRange and list additional points in the range. I've been looking at the examples for Highcharts, and like the inverted ColumnRange they show here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
and here:
http://jsfiddle.net/Q2JMF/2/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
series: [{
name: 'Data',
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
},{
x: 2,
low: 6,
high: 7,
color: "blue"
}]
}]
});
but what I need is not just a range high/low with an x point value, I need a high/low with several other points marked (preferably as a line) within the bar.
Think about it like quartiles and average. I want to display the range of values in my series and mark the 25th%, median, 75th% and average as line markers within the high/low bar range.
I have not been able to find any examples of marking points within a bar range. Is this something that can be done with Highcharts? Can you show me an example of how to achieve this?
Edit:
I've found that I can simulate what I'm after by adding additional series to the chart data. I mocked that up by modifying the second fiddle above:
http://jsfiddle.net/tLucL6mq/1/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
series: [{
name: 'Data',
enableMouseTracking: false,
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
},{
x: 2,
low: 6,
high: 7,
color: "blue"
}]
},{
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#000000',
radius: 6,
symbol: "square"
},
name: "Inclusive data points",
type: "scatter",
data: [[2,6.25],[2,6.6],[2,6.9],[1,7.2],[1,7.6],[1,7.9]]
},{
marker: {
fillColor: '#FFFF00',
lineWidth: 2,
lineColor: '#000000',
radius: 5
},
name: "Data points with Outliers",
type: "scatter",
data: [[2,5.9],[2,6.4],[2,6.7],[2,7.15],[1,6.8],[1,7.5],[1,7.8],[1,8.2]]
}
]
});
That looks pretty good, but I'd like to have one series that defines the range and lists points to be marked within the range.
If I have to use separate ranges like this, that's ok, but I would love the ability to mark the Inclusive data points using a line within the range rather than circle or square markers.

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 - 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