Develop Reference

Rotate X Axis labels in Highchart Gantt

I'm using Highcharts Gantt to display my data. But I've stacked with one problem: I cannot rotate X-Axis labels. Sometime I have to display long time period on the small screen and it looks like on this pic:
It's almost 4 year on this pic and some moths are missed. The best solution (in my opinion) is to rotate labels. I've tried this:
xAxis: { labels: { rotation: 90 } }, but it seems that this not working for Gantt. The full working example is here: (code copied from Highchart documentation)
Highcharts.ganttChart('container', {
title: {
text: 'Left Axis as Table'
},
xAxis: {
tickPixelInterval: 70,
dateTimeLabelFormats: {
week: "%w"
},
labels: {
rotation: 90
}
},
yAxis: {
type: 'category',
grid: {
enabled: true,
borderColor: 'rgba(0,0,0,0.3)',
borderWidth: 1,
columns: [{
title: {
text: 'Project'
},
labels: {
format: '{point.name}'
}
}, {
title: {
text: 'Assignee'
},
labels: {
format: '{point.assignee}'
}
}, {
title: {
text: 'Est. days'
},
labels: {
formatter: function () {
var point = this.point,
days = (1000 * 60 * 60 * 24),
number = (point.x2 - point.x) / days;
return Math.round(number * 100) / 100;
}
}
}, {
labels: {
format: '{point.start:%e. %b}'
},
title: {
text: 'Start date'
}
}, {
title: {
text: 'End date'
},
offset: 30,
labels: {
format: '{point.end:%e. %b}'
}
}]
}
},
tooltip: {
xDateFormat: '%e %b %Y, %H:%M'
},
series: [{
name: 'Project 1',
data: [{
start: Date.UTC(2017, 10, 18, 8),
end: Date.UTC(2017, 10, 25, 16),
name: 'Start prototype',
assignee: 'Richards',
y: 0
}, {
start: Date.UTC(2017, 10, 20, 8),
end: Date.UTC(2017, 10, 24, 16),
name: 'Develop',
assignee: 'Michaels',
y: 1
}, {
start: Date.UTC(2017, 10, 25, 16),
end: Date.UTC(2017, 10, 25, 16),
name: 'Prototype done',
assignee: 'Richards',
y: 2
}, {
start: Date.UTC(2017, 10, 27, 8),
end: Date.UTC(2017, 11, 3, 16),
name: 'Test prototype',
assignee: 'Richards',
y: 3
}, {
start: Date.UTC(2017, 10, 23, 8),
end: Date.UTC(2017, 11, 15, 16),
name: 'Run acceptance tests',
assignee: 'Halliburton',
y: 4
}]
}],
exporting: {
sourceWidth: 1000
}
});
#container {
max-width: 1200px;
min-width: 800px;
height: 400px;
margin: 1em auto;
}
.scrolling-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div class="scrolling-container">
<div id="container"></div>
</div>
Is some other way to rotate X-Axis labels?

It looks that the rotation feature is not supported if grid is enabled for an axis. You can disable grid (example: http://jsfiddle.net/BlackLabel/Ltnhu739/) or write a piece of code to operate directly on svg elements:
chart: {
events: {
render: function() {
const ticks = this.xAxis[0].ticks;
for (let tickPos in ticks) {
ticks[tickPos].label.attr({
rotate: -90,
translateX: 10
});
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/y9kqf1xu/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

Highcharts 6 time line chart

(Highcharts version 6)
Is it possible to have a time line looking chart in addition to data points like in this example:
https://jsfiddle.net/s1eL30Lh/97/
<script src="https://code.highcharts.com/stock/highstock.js"></script>
but without using highstock and instead only use highcharts ?
I know it's possible to use xrange module but it's not quite the same:
https://jsfiddle.net/deep3015/q18yvy75/
If the ranges are long enough to simulate a line then you lack the ability to add "data points" on top of the line, and if you make the ranges small enough to look like data points then you don't have a line.
NOTE
I'm aware of the new chart type 'timeline' in version 7 but I need to work with version 6.1

Yes, it is possible. However, you can't use flags series because it is only supported by Highstock. Check the demo and code posted below.
Code:
function toMs(yeah, month) {
return Date.UTC(yeah, month, 1);
}
var series = [{
// First series
name: 'Running',
color: 'green',
id: 'green',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2000, 1), toMs(2002, 8)],
[toMs(2006, 10), toMs(2006, 11)]
]
}]
}, {
// Second series
name: 'Filed',
color: 'yellow',
id: 'yellow',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2002, 8), toMs(2006, 10)]
]
}]
},
{
// Second series
name: 'Granted',
color: 'blue',
id: 'blue',
dataRaw: [{
y: 1,
xRanges: [
// first value: from; second value: to
[toMs(2006, 11), toMs(2021, 8)]
]
}]
}
].map(function(series) {
series.data = [];
series.dataRaw.forEach(function(dataRaw) {
dataRaw.xRanges.forEach(function(xRange) {
series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line
}); // forEach
}); // forEach
return series;
});
console.log(series);
var chart = Highcharts.chart('container', {
chart: {
type: 'scatter'
},
title: {
text: 'Example'
},
plotOptions: {
scatter: {
lineWidth: 5,
marker: {
enabled: true,
symbol: 'circle',
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
radius: 5
},
dataLabels: {
enabled: true,
align: 'right',
rotation: -30,
x: -2,
y: 15,
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.x);
}
},
tooltip: {
pointFormatter: function() {
return Highcharts.dateFormat('%Y-%m', this.x);
}
}
},
flags: {
lineWidth: 1
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
minTickInterval: 365 * 24 * 36e5,
labels: {
align: 'left'
},
plotBands: [{
from: Date.UTC(2000, 10, 27),
to: Date.UTC(2004, 11, 1),
color: '#EFFFFF',
label: {
text: 'Office 1',
style: {
color: '#999999'
},
y: 30
}
}, {
from: Date.UTC(2004, 11, 1),
to: Date.UTC(2012, 9, 1),
color: '#FFFFEF',
label: {
text: 'Office 2',
style: {
color: '#999999'
},
y: 30
}
}, {
from: Date.UTC(2012, 9, 1),
to: Date.UTC(2020, 10, 27),
color: '#FFEFFF',
label: {
text: 'Office 3',
style: {
color: '#999999'
},
y: 30
}
}]
},
yAxis: {
tickInterval: 1
},
series: series,
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)'
},
labels: [{
distance: 10,
point: {
xAxis: 0,
yAxis: 0,
x: toMs(2002, 8),
y: 1
},
text: 'Filled Date'
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1/modules/annotations.js"></script>
<div id="container" style="height: 400px"></div>
Demo:
https://jsfiddle.net/BlackLabel/6eahoxjv/

X axis shows the time from 12 till 12:55 instead of dates

This code generates a highchart with 2 Y axis and 1 X:
$('#main_chart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Overview'
},
xAxis: [{
type: 'datetime'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '${value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Y2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
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'
},
scrollbar: {
enabled: true
},
series: [{
name: 'Y1',
data: y1Data
}
,{
name: 'Y2',
data: y2Data
}
]
});
y1Data and y2Data are the arrays of arrays [[1426525200, 2], [1426611600, 0], [1426698000, 0]...] where the 1st element is date. The dates are sequent with a step of 1 day:
1 Mar 2015, 2 Mar 2015, 3 Mar 2015....
However, I see only time from 12:00 till 12:55 on X and nothing else:
What I want to see is the dates 1 Mar 2015, 2 Mar 2015, 3 Mar 2015.... EndDate. Moreover, why is there minus $20? There're no negative values in the data set.

When defining data, either provide timestamp in miliseconds (not seconds) or use JavaScript Date object instead:
var y1Data = [[new Date(), 2], [1426611600000, 0], [Date.UTC(2010, 2, 1), 0]];
To answer your $-20 question, Highcharts use their own algorithm to guess the most appropriate axis minimums a maximus. If you're not happy with it, simply set
yAxis: {
min: 0,
...
}

Highcharts datetime tick start and interval

The data starts at 6am on Monday and has a data point for each hour. I am having trouble getting the xAxis tick marks to read "6am Monday", and repeat every 24 hours.
Any tips? Here is a fiddle http://jsfiddle.net/4x136qxg/1/
Here is my main graphing function:
var dayInMilliseconds = 3600 * 1000 * 24;
$(function () {
$('#chart1').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Orders'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
// month: '%A',
},
// tickInterval: dayInMilliseconds,
title: {
text: null
},
labels: {
align: 'left',
x: 3
},
// startOnTick: true,
// endOnTick: true,
// min: 1413352800000,
},
yAxis: {
title: {
text: null
},
min: 0,
},
legend: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle'
},
lineWidth: 0,
fillOpacity: 1,
// pointStart: 1413352800000,
},
},
series: [{
name: '1',
color: '#edc54b',
data: seriesData[0].data
},{
name: '2',
color: '#edc54b',
data: seriesData[1].data
},{
name: '3',
color: '#edc54b',
data: seriesData[2].data
},{
name: '4',
color: '#edc54b',
data: seriesData[3].data
},{
name: '5',
color: '#edc54b',
data: seriesData[4].data
},{
name: '6',
color: '#edc54b',
data: seriesData[5].data
},{
name: '7',
color: '#fbd046',
data: seriesData[6].data
}]
});
});

Move x-axis (tick, labels and line) in highcharts

Is it possible to move the y-position of the x-axis in highcharts? So far, I have only been able to move it to the top or bottom of my chart using
opposite: true/false
but now I need it to be in the middle of my graph, at a fixed y-value. My current code is
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
type: 'spline',
renderTo: 'container'
},
title: {
text: 'Title'
},
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1
},
yAxis: {
labels: {
enabled: true
},
title: null,
gridLineWidth: 0,
min: 1,
max: 3.1
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
marker: {
enabled: false
},
name: 'Year 1800',
data: [
[1, 1],
[2.5, 1]
],
showInLegend: false
}, {
marker: {
enabled: false
},
name: 'Year 1900',
data: [
[1.5, 2],
[3, 2]
],
showInLegend: false
}, {
name: 'name1',
data: [
[2, 3]
],
type: 'scatter',
zindex: 10
}, {
name: 'name2',
data: [
[3, 3]
],
type: 'scatter'
}, {
name: 'name3',
data: [
[1.5, 3]
],
type: 'scatter'
}]
});
});
});
My JSfiddle is http://jsfiddle.net/5xum/fVpqU/7/ .
I want the x axis (along with the ticks and labels) to run through y=2.5, between the two different data sets. Does HighCharts support this?

You can use offset property to move xAxis. In your case you have to use negative offset to move xAxis down:
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1,
offset: -130
},

$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text : <%=jtitle%>
},
xAxis : {
min:Date.UTC(2016, 0, 0),
max:Date.UTC(2016, 11, 1),
//allowDecimals: false,
type : 'datetime',
tickInterval : 24 * 3600 * 1000*30, //one day
labels : {
rotation : 0
},
},
yAxis: {
dateTimeLabelFormats: {
day: '%Y' },
labels :{
formatter:function() {return Highcharts.dateFormat('%Y',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 5,
color: '#808080'
}]
},
series : [
{
name : 'MB Data',
data : <%=datasp%>,
tooltip: {
valueDecimals: 2,
dateTimeLabelFormats: {
hour: '%H:%M'
}
}
},
{
name : 'Date & Time',
data : <%=datetime%>
},
]
});
});