Set at the same level the unit of two yaxis highcharts - highcharts

I would like to set at the same level 2 yAxis with highcharts. Because it's difficult to explain what I want, this picture should help you to understand :
I want to align the two "0" value of my 2 charts.
This is my current code :
$(function () {
$('#tresorerieChart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // First yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Third yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
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: '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: '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'
}
}]
});
});
Thanks in advance.

Long time ago I have created example how to align two yAxis to the same value, you can find this here: http://jsfiddle.net/5m9JW/414/
Code responsible for linking axes:
var i = 15;
while (chart.yAxis[1].translate(0) != chart.yAxis[0].translate(0) && i > 0) {
chart.yAxis[0].setExtremes(chart.yAxis[0].getExtremes().min - chart.yAxis[0].translate(chart.yAxis[1].translate(0), true));
i--;
};

Related

How to add image/icon below y-axis in column highcharts

I have integrated a column highchart in my application having primary and secondary y-axis(dual-axis). Now I need to add an image/icon below both y-axes for reference of the axis. I have implemented below code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
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[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
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: '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'
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Now I need to add an icon below both y-axes for reference of the axis. Any help would be definitely appreciated!
You can add the image as an axis title located below the plot area:
yAxis: [{
title: {
text: '<img src="https://www.highcharts.com/samples/graphics/sun.png" />',
align: 'low',
useHTML: true,
rotation: 0,
reserveSpace: false,
y: 40
}
}, {...}]
Live demo: http://jsfiddle.net/BlackLabel/mzquL6je/
API Reference: https://api.highcharts.com/highcharts/yAxis.title

highchart- how do I hide y-axis, when y-axis is set with max and min limits

I am working with highcharts and I have to set min and max limits on y-axis but when I try to hide the series by clicking on legends y-axis does not disappear as shown in the snippet. Temperature y-axis does not hide when its corresponding series get disappeared on clicking legend. Issue is that in the code
showEmpty for y-axis is set to false which make the other axis without the max and min values dissaper on click. I tried to find out the solution in Highchart documentation but have not found anything usefull in regard to my issue,
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
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']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true,
showEmpty: false,
max: 100,
min:0,
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
showEmpty: false
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true,
showEmpty: false
}],
tooltip: {
formatter: function() {
var unit = {
'Rainfall': 'mm',
'Temperature': '°C',
'Sea-Level Pressure': 'mb'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
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]
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
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'
}, {
name: 'Temperature',
color: '#89A54E',
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]
}]
});
});
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
You can avoid this issue if you use softMin and softMax instead of min and max.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
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']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
opposite: true,
showEmpty: false,
softMax: 100,
softMin:0,
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},
showEmpty: false
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value +' mb';
},
style: {
color: '#AA4643'
}
},
opposite: true,
showEmpty: false
}],
tooltip: {
formatter: function() {
var unit = {
'Rainfall': 'mm',
'Temperature': '°C',
'Sea-Level Pressure': 'mb'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 80,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
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]
}, {
name: 'Sea-Level Pressure',
type: 'spline',
color: '#AA4643',
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'
}, {
name: 'Temperature',
color: '#89A54E',
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]
}]
});
});
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Highcharts bad rendering with slightly big numbers

When I use multiaxes and big numbers, Highcharts renders double the height needed to show the data. How can I achieve fitting the vertical axis to the data correctly?
Here the example code:
$(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]
}
}
}, { // 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
}],
tooltip: {
shared: true
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 991009.6, 1010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [967416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 1010.2, 14563.1, 991016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 991010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
Fiddle here: http://jsfiddle.net/voqxkb3m/1/
You can set alignTicks: false to your chart properties.
Updated fiddle:
http://jsfiddle.net/jlbriggs/voqxkb3m/2/
You can adjust settings like maxPadding and endOnTick to further reduce the yAxis spacing.
http://jsfiddle.net/jlbriggs/voqxkb3m/3/

Highcharts yaxis max

I have a script which uses HighCharts. Below is the yAxis part of the script that deal with the formation of said yAxis. Where I have "yAxis:max I am trying to use a PHP variable produced by a query.
I know the PHP variable "$row_Rooms['Rooms']" contains "400", but when I run the script the yAxis max displays "420".
$(function () {
var categories=[];
var data2 =[];
var chart;
$(document).ready(function() {
$.getJSON("temp_hot_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name=="Count")
categories = el.data;
else data2.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 60,
marginRight: 30,
marginBottom: 90,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Failed hot water temperatures',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '11px'
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
max:<?php echo $row_Rooms['Rooms'];?>,
reversedStacks: false,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '12px'
}
},
plotLines: [{
color: '#808080'
}]
},
legend: {
enabled: true
},
colors: [
'#0066CC',
'#FF2F2F',
],
plotOptions: {
series: {
legendIndex:0,
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000000',
align: 'center',
//format: '{point.y:.1f}', // one decimal
y: 20, // 10 pixels down from the top
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false
},
series: data2
});
});
});
});
Can anyone throw any light on to why this is happening. Many thanks in advance for your time.
Regards.
use endOnTick and set it to false,
as in described in the documentation http://api.highcharts.com/highcharts#yAxis.endOnTick and http://api.highcharts.com/highcharts#yAxis.max
If the endOnTick option is true, the max value might be rounded up
Please check the following example:
$(function () {
$('#container').highcharts({
chart: {
plotBorderWidth: 1
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
endOnTick: false,
max:101,
},
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]
}]
});
});
try to add alignTicks: false to the chart block:
chart: {
alignTicks: false
}
Hope it helps

Highcharts tooltip formatter

For this.x, I am getting the index location when I push the data in via code. If I populate the data separately, like the following code, then this.x returns the right item. How can I fix this issue?
Works
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]
}]
Index location is getting pushed out for this.x here
var points = [{
Name: 'good',
Y: '15000'
}, {
Name: 'baad',
Y: '3000'
}, {
Name: 'wow',
Y: '2000'
}];
var chartData = {
GetChartSeries: function (points, name) {
var seriesData = [];
if (points != null && points != 'undefined') {
for (i=0; i<points.length; i++) {
seriesData.push({
name: ""+points[i].Name,
y: parseFloat(points[i].Y)
//,color: ''
});
}
}
return seriesData;
}
};
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [ 50, 50, 100, 80],
borderColor: '#A4A4A4',
borderRadius: 5,
borderWidth: 2
},
legend: {
enabled: false
},
title: {
text: 'Graduation Year Breakdown'
},
colors: ['#790000'],
legend: {
enabled: false
},
plotOptions: {
series: {
/*
dataLabels: {
enabled: true,
color: 'red'
},
*/
borderRadius: 3,
colorByPoint: true
}
},
tooltip: {
formatter: function() {
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.x;
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Students'
}
},
series: [{
//name: 'Population',
data: chartData.GetChartSeries(points, ""),//[4000, 3400, 2000, 34000, 120000],
dataLabels: {
enabled: true,
//rotation: -90,
color: '#4F4F4F',
align: 'center',//'right',
//x: 4,
//y: 10,
style: {
fontSize: '12px',
//fontWeight: 'bold',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
While I am uncertain as to why your solution doesn't work, I can propose an alternative solution.
The tooltip formatter function has access to a number of different parameters. Instead of this.x, you could use this.point.name.
For example:
formatter: function() {
// If you want to see what is available in the formatter, you can
// examine the `this` variable.
// console.log(this);
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'in year: '+ this.point.name;
}

Resources