Develop Reference

How to show xAxis categories up to the each chart in Bar-Highcharts library?

I want to show my categories on the top of each bar chart. like the image.
for this i set bar-chart option as below without any xAxis categories label.
options: {
title: null,
chart: {
type: 'bar'
},
colors: ['#9696b2', '#ff058d'],
xAxis: {
categories: ['Tokyo', 'Fukuoka', 'Hiroshima', 'Osaka', 'Nagoya'],
visible: false,
},
yAxis: {
visible: false,
},
tooltip: {
valueSuffix: ' '
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Compliant',
data: [1300, 1121, 1700, 1121, 700]
}, {
name: 'Non-Compliant',
data: [60, 30, 50, 20, 0]
}]
}
how can i make this one with stacked horizontal bars?

You can align labels to left and position them by x and y properties:
xAxis: {
...,
lineWidth: 0,
labels: {
align: 'left',
x: 0,
y: -24
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4767/
API Reference: https://api.highcharts.com/gantt/xAxis.labels

How to add legend to a 3D scatter graph using Highcharts?

I am trying to add a legend to a 3d graph using highchart but i am unable to do that..How can i achieve that ?
Below is the jsfiddle code
jsfiddle
Below is the code i added for legend but its not working...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter3d',
animation: false,
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 150,
viewDistance: 5,
}
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
categories: snr,
title: {
text: null
},
labels: {
format: '{value:.2f}'
}
},
xAxis: {
type: 'category',
categories: mac,
title: {
text: null
}
},
zAxis: {
// categories: count,
min: 0,
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25
},
legend :{
enabled : false
},
series: [{
name: 'Reading',
colorByPoint: true,
});
Please guide me to display the legend in the 3d graph...

Align Highcharts bars right

I used the opposite attribute to move the xAxis to the right. How is it possible that the bars will also start on the right side?
Thanks!
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>

Found this from the documentation and managed to get it to work by setting
yAxis:{reversed:true}
By reversing the y-axis the bars go from right to left.
Highcharts.chart('absoluteInterruptions', {
chart: {
type: 'bar',
rotate: -90
},
title: {
text: 'Absolute Interruptions'
},
xAxis: {
min: 0,
opposite: true,
categories: [
'Linie5007',
'Linie5007.ST405',
'Linie5007.ST406',
'Linie5007.ST407',
'Linie5007.ST408',
'Linie5007.ST409',
'Linie5007.ST410',
'Linie5007.ST411',
'Linie5007.ST412',
'Linie5007.ST413'
]
},
yAxis: {
reversed: true,
legend: {
enabled: false
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
align: 'right',
name: 'Interruptions',
data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
dataLabels: {
enabled: true,
align: 'right',
color: '#000000'
}
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>

Adjust position of Highcharts line graph data points to be between rather than on each tick

Currently, my chart looks like this:
Currently, each data point is located on the tick i.e. at 3pm, 4pm, 5pm etc. However, the data represented are averages over hourly time periods i.e. 3-4pm, 4-5pm etc.
To accurately represent this data, I need the data points to be between each tick i.e. around the 3.30pm, 4.30pm etc. marks but I don't want to show the ticks at those positions.
How should I change my code?
Highcharts.chart('chart-container', {
chart: {
backgroundColor: null,
spacingTop: 40,
spacingRight: 55,
spacingLeft: 30,
spacingBottom: 10
},
title: null,
xAxis: {
title: {
text: '(Hour)',
align: 'high',
style: {
'color': 'white',
'fontSize': '12px'
},
offset: 0,
x: 42.5,
y: -8.75
},
type: 'datetime',
tickInterval: 3600 * 1000,
dateTimeLabelFormats: {
day: '%H:00'
},
min: startTime,
labels: {
style: {
'color': 'white',
'fontSize': '12px'
}
},
gridLineWidth: 1,
gridLineColor: '#494A55',
lineColor: '#494A55',
tickWidth: 0
},
yAxis: {
title: {
text: '(Boxes)',
align: 'high',
style: {
'color': 'white',
'fontSize': '12px'
},
rotation: 0,
offset: 0,
y: -20,
x: -15
},
min: 0,
max: maxY, // Computed variable
tickInterval: 0.5,
labels: {
style: {
'color': 'white',
'fontSize': '12px'
},
format: '{value:.1f}'
},
gridLineColor: '#494A55',
lineColor: '#494A55'
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointStart: startTime, // Computed variable
pointInterval: 3600 * 1000
}
},
series: chartData,
exporting: {
enabled: false
},
credits: {
enabled: false
}
});
// Format of chartData
var chartData = [
{
name: '',
color: hexColorCode,
data: [integers]
}
];

Highcharts: Heatmap using CSV

I am trying to load data via CSV file. Now if I have it already on the page as a hidden div, it works great. But trying to load it from a CSV file via Jquery $.get is not working. The x and y axis shows, but the heatmap itself does not.
The javascript looks like this (without the actual file offhand):
$.get('http://www.urltofile.com/cell001.csv', function(csv) {
generateHeatMap($('#heatmapBody'),csv);
});
function generateHeatMap(target,data) {
target.highcharts({
chart: {
type: 'heatmap',
//height: highChartsArguments.chartHeight
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts extended heat map',
style: {
color: 'black',
fontSize: '12px',
fontFamily: 'Verdana'
}
},
xAxis: {
type: 'text',
min: 0,
max: 427,
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 16, 32, 48, 64, 80, 96, 112, 133],
tickWidth: 1,
min: 0,
max: 133,
reversed: true
},
colorAxis: {
max: 1.5,
min: -1.5,
minColor: '#00FF00',
maxColor: '#FF0000',
stops: [
[0.0, '#00FF00'],
[0.5, '#003319'],
[0.9, '#FF0000'],
[1, '#FF0000']
]
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolHeight: 60
},
series: [{
name: 'heatmap',
data: {
csv: data
},
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
tooltip: {
headerFormat: 'Test<br/>',
pointFormat: '{point.x} {point.y}: <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
exporting: {
enabled: false
}
});
}
The CSV is over 100K rows. Is that causing a problem perhaps? As a sample, it looks like
Gene,Label,zScore
0,0,3.630958
0,1,1.547901
0,2,-0.604027
0,3,0.486755
0,4,-0.359456
0,5,0.228968
0,6,3.197601
0,7,1.554732
0,8,0.374111
Any help would be appreciated.

You load the data incorrectly. Series object is not responsible for handling csv data. If you use data module, you should move the data from series options to top level options, like this:
data: { // this is how you load the with data module
csv: data
},
series: [{
... // here, options for series goes but not data
}]
Compare your code with the official example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/heatmap/