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/

represent time in highcharts

i'am creating a highcharts that represent time ex : (02:00:00) on the yAxis and Dates on xAxis but i didn't found how to change the yAxis series type to do it .
here is my code :
$(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: ["02:00:00","03:00:00","01:00:00"]
}]
});
});

Highcharts: Need heatmap with month and date

I have created following heatmap using highcharts heatmap-highchart
On Y-axis it displays months but on X-axis it should display only days of month as [1,2,3,4,.......29,30,31] and heat map should be plotted accordingly.
this is the desired result
desired heat map
Here is the code
<script src="http://www.highcharts.com/lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var example = 'heatmap',
theme = 'default';
(function ($) { // encapsulate jQuery
$(function () {
$('#container').highcharts({
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
inverted: false
},
title: {
text: 'Highcharts heat map [test]',
align: 'right'
},
subtitle: {
text: 'Temperature variation by day and hour through Nov 2015',
align: 'right'
},
yAxis: {
labels: {
format: '{value}'
},
categories: ['0','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickWidth: 1,
min: 1,
max: 12
},
xAxis: {
type: 'datetime',
tickPixelInterval: 1,
min: Date.UTC(2015, 10, 20),
max: Date.UTC(2015, 11, 10),
labels: {
step: 1,
},
},
colorAxis: {
stops: [
[0, '#20255A'],
[0.5, '#4B8EE2'],
[0.9, '#AAEBFF']
],
min: 1,
max: 40
},
series: [{
borderWidth: 0,
colsize: 24 * 36e5, // one day
tooltip: {
headerFormat: 'Power Generated<br/>',
pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} kWh</b>'
}
}],
});
});
})(jQuery);
</script>
<!--[X,Y,Val]-->
<pre id="csv" style="display: none">Date, Time, Temperature
2015-11-01,11,6.94
2015-11-02,11,14.6
2015-11-03,11,25.3
2015-11-04,11,27.2
2015-11-05,11,10.5
2015-11-06,11,4.77
2015-11-07,11,7.98
2015-11-08,11,26.9
2015-11-09,11,23.4
2015-11-10,11,2.2
2015-11-11,11,4.11
2015-11-12,11,2.82
2015-11-13,11,24.8
2015-11-14,11,24.1
2015-11-15,11,26.1
2015-11-16,11,24.9
2015-11-17,11,27.9
2015-11-18,11,15.0
2015-11-19,11,7.72
2015-11-20,11,23.3
2015-11-21,11,26.8
2015-11-22,11,3.58
2015-11-23,11,27.8
2015-11-24,11,24.7
2015-11-25,11,12.2
2015-11-26,11,17.7
2015-11-27,11,22.4
2015-11-28,11,7.59
2015-11-29,11,21.7
2015-11-30,11,18.3
2015-11-01,12,5.33
2015-11-02,12,2.55
2015-11-03,12,13.8
2015-11-04,12,24.0
2015-11-05,12,23.1
2015-11-06,12,23.1
2015-11-07,12,19.4
2015-11-08,12,16.8
2015-11-09,12,21.0
2015-11-10,12,20.5
2015-11-11,12,15.1
2015-11-12,12,18.1
2015-11-13,12,11.6
2015-11-14,12,4.71
2015-11-15,12,21.5
2015-11-16,12,14.2
2015-11-17,12,2.40
2015-11-18,12,1.95
2015-11-19,12,19.8
2015-11-20,12,22.8
2015-11-21,12,8.48
2015-11-22,12,2.45
2015-11-23,12,7.00
2015-11-24,12,7.36
2015-11-25,12,13.8
2015-11-26,12,7.97
2015-11-27,12,4.09
2015-11-28,12,16.3
2015-11-29,12,2.73
2015-11-30,12,2.67
2015-11-31,12,16.4
</pre>
</body>
jsfiddle Here: jsfiddle.net/zor_el/Lrejpk69/
Kidly assist me with this.
Any help is appreciated.
thanks!

I would do this without using any datetime axes.
I would parse out the month and day number from the date, and set an array for each data point that was:
[day number, month number, data value]
Then you can set a min and max for your y axis as 0-11, and for your x axis as 1-31.
The resulting data set looks like this:
[
[1, 10, 6.94],
[2, 10, 14.6],
[3, 10, 25.3],
[4, 10, 27.2],
[5, 10, 10.5],
[6, 10, 4.77],
[7, 10, 7.98]
...
]
And the resulting chart can be seen here:
http://jsfiddle.net/jlbriggs/e12xLbe1/

Check updated fiddle http://jsfiddle.net/Lrejpk69/30/
$(function () {
$('#container').highcharts({
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
inverted: false
},
title: {
text: 'Highcharts heat map [test]',
align: 'right'
},
subtitle: {
text: 'Temperature variation by day and hour through Nov 2015',
align: 'right'
},
yAxis: {
labels: {
format: '{value}'
},
categories: ['0','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickWidth: 1,
min: 1,
max: 12
},
xAxis: {
type: 'datetime',
tickPixelInterval: 1,
min: Date.UTC(2015, 10, 10),
max: Date.UTC(2015, 11, 10),
dateTimeLabelFormats: {
day: '%e'
},
labels: {
step: 1,
},
},
colorAxis: {
stops: [
[0, '#20255A'],
[0.5, '#4B8EE2'],
[0.9, '#AAEBFF']
],
min: 1,
max: 40
},
series: [{
borderWidth: 0,
colsize: 24 * 36e5, // one day
tooltip: {
headerFormat: 'Power Generated<br/>',
pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} kWh</b>'
}
}],
});
});

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.