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

Add more than 3 y-axis in Highcharts. 4th y-axis values aren't displayed

I've tried to figure out how to add multiple y-axis were the right hand side of the chart could be x amount of measurments to be displayed. The issue is only 3 out of 4 y-axis values are displayed.
What I want to be displayed https://gyazo.com/623c1c120c3794cf404c82f7aa36119e
Example from Highcharts docs https://jsfiddle.net/ojzc2h51/
My dummy code here https://jsfiddle.net/Lamborobin/ojzc2h51/1/
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Test',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: ' °C'
}
}, {
name: 'Test',
type: 'spline',
data: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
}]
});

You need to assign the new series to the yAxis:
series: [..., {
name: 'Test',
type: 'spline',
data: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
yAxis: 3
}]
Live demo: https://jsfiddle.net/BlackLabel/2fqa8rcs/
API: https://api.highcharts.com/highcharts/series.spline.yAxis

scrollbar is not initially visible in highstock

I am using highstock to create charts in my asp.net MVC application
I have added a navigation along with it i have added a scroll bar
I am viewing 4 charts in a single view, for all charts the horizontal scroll bar is visible only for one as show in the image
In the image the above chart's scrollbar is visible but not for the chart bellow it
But when i move my navigation bar a bit it displays the scrollbar like this
Bellow is my Razor for chart
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar: {
enabled: true,
showFull: false
},
rangeSelector: {
enabled: true,
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
// disabled: { ... }
}
},
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
navigator: {
enabled: true,
height: 30,
},
//scrollbar: {
// enabled: true,
// barBackgroundColor: 'silver',
// barBorderRadius: 7,
// barBorderWidth: 0,
// buttonBackgroundColor: 'silver',
// buttonBorderWidth: 0,
// buttonArrowColor: 'yellow',
// buttonBorderRadius: 7,
// rilfeColor: 'yellow',
// trackBackgroundColor: 'none',
// trackBorderWidth: 1,
// trackBorderRadius: 8,
// trackBorderColor: '#CCC'
//},
title: {
text: 'Voltage vs Date & Time',
style: {
//color: '#FF00FF',
fontWeight: 'bold'
}
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
type: 'datetime'
},
yAxis: {
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Voltage (V)'
}
},
plotOptions: {
line: {
turboThreshold: 50000
},
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 3
}
}
},
series: [{
name: 'Voltages Phase 1',
color: 'red',
data: arry_voltage_1,
}, {
name: 'Voltages Phase 2',
color: 'yellow',
data: arry_voltage_2,
}, {
name: 'Voltages Phase 3',
color: 'blue',
data: arry_voltage_3,
},
],
});
Any help would be highly appreciated

Remove or comment showFull: false in your scrollbar: {enabled: true, showFull: false}, or set the value to true and it will work surely

Highcharts Series Margins

Looking since a while to this issue, but I can't find a correct answer.
See attached picture. How can I control/increase the margins of the chart drawing ONLY? Axis and the rest should stay as they are, I would like to make the margin between the Y Axis and the Chart Itself bigger.
Is this somehow possible?
Fiddle code: http://jsfiddle.net/klodoma/ood4vykf/1/
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // 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: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
//type: 'spline',
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 18.5, 26.4, 14.1, 195.6, 154.4],
tooltip: {
valueSuffix: ' mm'
}
},
{
name: 'Rainfall2',
type: 'spline',
yAxis: 1,
data: [19.9, 73.5, 100.4, 111.2, 134.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}]
});

You can utilize the offset of the yAxis object using the Highcharts API.
jsfiddle: http://jsfiddle.net/mariocatch/d1e6h96y/1/
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
},
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
offset: 50
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
offset: 50
}]

I have found a solution:
The offset property of the xAxis and yAxis from the Highcharts API can be used.
The "trick" is to specify the offset just to the first axis and not to all of them.
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
},
title: {
text: 'Temperature',
},
offset: 150
},{ // Primary yAxis
labels: {
format: '{value}°C',
},
title: {
text: 'Temperature',
},
//offset: 50 //do not set this value
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
},
labels: {
format: '{value} mm',
},
opposite: true,
offset: 50 //set this value, it's an opposite axis!
}],
A full example is here:
http://jsfiddle.net/klodoma/2k4akses/3/

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.