I have a series that is composed of:
Daily values, until a certain date
6-monthly values, from that date
onward
I'd like to increase the tick interval exclusively for the second part of the chart, so I can compact the data. To be clear, I want the same space that represents one month on the left side of the chart to represent 6 months on the right side.
I'm not sure if Highcharts allows this... I think there can be two different approaches:
Create two series with two different axis and set one axis after the other
Set different tickInterval for the same axis.
Using tickPositions and tickPositioner I've only managed to show more or less ticks, but always keeping their position on the time axis.
This is my code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
animation: false
},
title: {
text: 'Some data'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 0
},
xAxis: {
type : 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
},
yAxis: {
title: {
text: null
},
maxZoom: 0.1
},
series: jsonData
});
Here's a jsfiddle with a subset of my original data.
Which would be the best way to achieve this?
Highcharts does not allow it by default, but you can use a workaround. You can create two xAxis with right size proportion and two series, like in an example below:
xAxis: [{
type: 'datetime',
endOnTick: false,
tickInterval: 30 * 24 * 3600 * 1000,
max: 1536278400000,
width: '65%',
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
}, {
min: 1536278400000,
startOnTick: false,
offset: 0,
type: 'datetime',
tickInterval: 180 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
width: '35%',
left: '65%'
}]
Live demo: https://jsfiddle.net/BlackLabel/zxd4j5tn/
I want to make a column range charts vertically scrollable. scrollbar: {enabled: true} seems not to work.
My goal is to show min: 10 categories. The rest should be visible by scrolling down in the chart.
Here is my fiddle: http://jsfiddle.net/ttrtb6xt/2/
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
},
xAxis: {
categories: ["Bulk Order Submission","CAD","CiteAb","DDF Order Management","EB-eye","Enterprise Asset Manager","Enterprise Search","False EAMS - Enterprise Architecture Management System","Funnelback","GenieKnows","Giga EAMS - Enterprise Architecture Management System","Google Maps","Google SOAP Search","GoPubMed","Hieroglyphs EAMS - Enterprise Architecture Management System","I Y I","IAM - Identity & Access Management","in","de","Jumper 2.0","LANDesk Management","LIMS 2010","LIMS 2016","Master Data Management System","Monster.com","MuleSoft ESB","Nextbio","Office 365","Oracle Peoplesoft HR","Order Tracking Portfolio","Q-Sensei Enterprise Search","Quertle","salesforce.com","SAP Finance","SAP HR","SCM - Supply Chain Manager","ServiceNow","Strategic Information System","TeraText Suite","Test App 1","Test App 1","Test App 2","Test App","Testing L","UP","Academy","International"],
min: 5,
scrollbar: {
enabled: true
},
},
yAxis: {
type: 'datetime',
tickInterval: 1000 * 60 * 60 * 24 * 30 * 6,
plotLines: [{
color: 'red', // Color value
dashStyle: 'Solid', // Style of the plot line. Default to solid
value: [1411344000000], // Value of where the line will appear
width: 3, // Width of the line
zIndex: 4,
label: {
text: 'Current Date',
},
}],
},
plotOptions: {
series: {
grouping: false,
stacking: 'normal',
pointPadding: 0,
groupPadding: 0.0,
allowPointSelect: true,
dataLabels: {
enabled: true,
align: 'center',
x: -10,
formatter: function() {
return this.series.name;
}
}
}
},
tooltip: {
formatter: function() {
var x = this.x,
low = this.point.low,
high = this.point.high,
duration = high - low;
return x + ':<br> start: ' + new Date(low).toDateString() + '<br> end: ' + new Date(high).toDateString() + '<br> duration: ' + duration / (1000 * 60 * 60 * 24) + ' days';
}
},
legend: {
enabled: false
},
series: [{"color":"#dedede","data":[[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000]],"name":"Planning"},{"color":"#34d440","data":[[1436918400000,1531612800000],[1436918400000,1475020800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000]],"name":"Standard"},{"color":"#ffd440","data":[[],[1475020800000,1474761600000],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],"name":"Expiring"},{"color":"#ff34f4","data":[[],[1474761600000,1569369600000],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],"name":"Exception"}]
});
});