We Keep Coding

Highcharts - How to format yAxis label to have single digit?

I am using Highcharts to display data from an API. I would like to label my yAxis as "Thousands" and have the numbers shown in a single digit. For example my graph right now labels are 2k, 4k, 6k, 8k, 10k I would like to adjust to formatting to only display 2,4,6,8,10
I am currently using formatter:function () { } to return my the 2k,4k,6k... as it previously displayed 2000,4000,6000... I am having issues figuring how to to properly format my numbers in order to display with a single digit.
My expected outcome is for the yAxis labels displayed on the left side to show 2,4,6,8,10
Here is a jsfiddle of my graph.
Also here is my code:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
formatter: function () {
return this.axis.defaultLabelFormatter.call(this);
}
},
title: {
text: 'Thousands'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [3625, 4320, 4055, 4852, 5120, 6251, 7852, 8000, 9102, ]
}, {
name: 'London',
data: [2210, 3152, 3852, 4102, 4300, 4657, 6521, 7022, 7982]
}]
});

You can use the label.formatter callback with the logic shown below to display wanted format.
Demo: https://jsfiddle.net/BlackLabel/c0e2jwa6/
yAxis: {
labels: {
formatter() {
return this.value / 1000
}
},
title: {
text: 'Thousands'
}
},
https://api.highcharts.com/highcharts/yAxis.labels.formatter

Highchart columnrange with scrollbar

I am using the columnrange type from Highcharts-more. The default data labels formatter puts the low / high data at both ends of the range, which is nice.
but when I use scrollbar,high labels don`t move Follow scroll,
How do I setting,to use scrollbar in columnrange chart?
example:enter link description here
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2017'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
max:4,
scrollbar: {
enabled: true
}
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
format: '{y}°C'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6]
]
}]
});

This is Highcharts bug, which is already fixed in the master branch and will be published in version 7.0.2. In the meantime you can use the code from master branch:
<script src="https://github.highcharts.com/master/highstock.src.js"></script>
<script src="https://github.highcharts.com/master/highcharts-more.js"></script>
or the older Highcharts version:
<script src="https://code.highcharts.com/stock/6/highstock.js"></script>
<script src="https://code.highcharts.com/6/highcharts-more.js"></script>
Live demo: https://jsfiddle.net/BlackLabel/cqzn0tu3/
Highcharts file service: https://code.highcharts.com/

Highcharts column range change color for negative numbers

I am having issue with HighCharts, more specifically with Column range graph. I would like to have red color for negative numbers and blue color for positive numbers.
The current code give the red color to the bars with Only positive values, and blue color to those where the interval contains a negative value:
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
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,
grouping:true,
formatter: function () {
if(this.y == 0)
return "";
else
return this.y;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
color: '#FF0000',
displayNegative: true,
negativeColor: '#0088FF' ,
data: [
[0, 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]
]
}]
});
});
The Current graph looks like:
The result needed should be like:
Link to fiddle

After some researchs and based on the comment above from #Sebastian here is the conclusion:
You can modify your Data by adding the index to match the xAxis like Data[[Index,from,to],[SecondIndex,from,to] etc... and when it comes to the negative values you can set Data Data[[IndexForNegative,from,to],[IndexForNegative,from,to]... for the same value.
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange'
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
negativeColor: 'red',
threshold: 0,
dataLabels: {
enabled: true,
formatter: function() {
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[0,0,9.4],
[1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index
[2,-3.5,0],[1,0,9.4],
[3,-1.4,0],[2,0,19.9],
[4,0.0],[4,0,22.6],
[5,2.9, 29.5],
[6,9.2, 30.7],
[7,7.3, 26.5],
[8,4.4, 18.0],
[9,-3.1,0],[9,0,11.4],
[10,-5.2,0],[10,0,10.4],
[11,-13.5,0],[11,0,9.8]
]
}]
});
});
http://jsfiddle.net/0ns43y47/

Highcharts disable click on column

I have a column chart. When clicking one of the vertical bars, the color of the selected bar changes. I want to disable this behaviour by disabling the detection of the 'click' event on the graph so when the user clicks there nothing happens.
Anyone knows how to do that?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
backgroundColor: 'transparent',
container: {
onclick : null
}
},
colors: ['#27A1DE'],
title: {
text: null
},
credits : {
enabled: false
},
exporting : {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'h',
align: 'high',
offset: -15
},
tickColor : 'transparent',
labels: {
style: {
fontWeight:'bold'
},
y: 12,
formatter: function() {
var index = this.axis.categories.indexOf(this.value);
var yValue = this.chart.series[0].yData[index];
if (yValue === 0){
return '<span>'+this.value+'</span>';
} else {
return '<span style="color:#009DE0;">'+this.value +'</span>';
}
}
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
title: {
align: 'high',
rotation: 0,
text: 'kWh',
offset: 0,
y: -2
}
},
plotOptions: {
column: {
pointPadding: 0.05,
groupPadding: 0,
dataLabels : {
enabled: true,
crop :false,
overflow: 'none',
rotation: 270,
x:2,
y:-14,
style: {
color: '#009DE0',
fontSize: 'xx-small',
},
formatter: function() {
if (this.y != 0){
return '<span>'+this.y +'</span>';
} else {
return '<span style="display:none;">'+this.y +'</span>';
}
}
},
borderWidth: 0,
events: {
click: function(e){
//this.update({ color: '#27a1de' }, true, false);
e.preventDefault();
return false;
}
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
}
}
}
}
},
series: [{
name: '',
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]
}],
tooltip: {
enabled: false
}
});
Fiddle : here
Thanks

the way I understood your problem, you want to remove the style change on mouse hover (as there is no color change on click in your fiddle unlike you described).
http://jsfiddle.net/6pur4o1w/
states: { hover: 'none' }
in the series should do what you want.

How do I rotate my HighCharts bar chart so its vertical, not horizontal?

$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'QueryResultsChart',
type: 'bar'
},
title: {
text: 'Production History'
},
xAxis: {
title: {
text: 'Production Day'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'Gross Production'
}
},
series: [{
name: 'Data',
data: []
}]
});
chart1.series[0].setData(". json_encode($aChartData) .");
});
The data is there an correct, it's just showing my xAxis on the yAxis for some reason...

Vertical bar charts are called column's in Highchart.
Change this:
type: 'column' //was 'bar' previously`
See example here: http://jsfiddle.net/aznBb/

To expand on Moin Zaman's answer, I played with his jsfiddle http://jsfiddle.net/aznBb/ and found this.
This is horizontal.
chart: {
type: 'bar',
inverted: false // default
}
This is also horizontal.
chart: {
type: 'bar',
inverted: true
}
This is vertical.
chart: {
type: 'column',
inverted: false // default
}
This is horizontal and apparently identical to the bar charts.
chart: {
type: 'column',
inverted: true
}
Very odd. I can only guess that type: 'bar' aliases type: 'column' and forces inverted: true no matter what it's actually set at. It'd be nice if it just toggled the inverted boolean.

You should try something like this:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
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]
]
}]
});
});
http://jsfiddle.net/b940oyw4/