How to make highcharts scrollable vertically in column range - highcharts

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"}]
});
});

Related

Apply Background Image to A Column

I am using Highcharts to create a column chart with two data points. There's only one series. I am using styling to make each column a different color, but I would also like to add a background image behind each column. I've tried using pattern fill, but it repeats the image for the whole area of the column, whereas I just need a single 30x30 image at the bottom of each column. I also tried using chart.renderer.image to add the svg image and managed to position it well, but can't make the image responsive (chart will be viewed on tablets and mobile devices in addition to computer screens).
My chart details are below:
const categoryColors = {
'cat1': '#ff9800',
'cat2': '#8256ce'
};
Highcharts.chart('gap_bar_chart', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['cat1','cat2'],
labels: {
useHTML: true,
formatter: function () {
console.log(this);
return '<span style="color: ' +categoryColors[this.value] + '">'+this.value+'</span>';
}
},
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: '<b>Percent Earning Junior Status</b>'
},
labels: {
format: "{value} %"
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent'
},
tooltip: {
headerFormat: '<table><tr><th>Percent of Students Earning Junior Status within 2 Years</th></tr><tr><th><hr/></th></tr>',
pointFormat: '<tr><td><b>{point.name}</b>: {point.y: .0f}% ({point.numberStr} students)</td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
legend: {
enabled: false
},
series: [{
data: [
{
y: chartData.p_jun2yr_nongap*100 || 0,
total: chartData.n_jun2yr_nongap,
color: '#FCCA7D',
category: 'Non-URM',
name: 'Non-URM',
numberStr: chartData.n_jun2yr_nongap.toLocaleString()
},
{
y: chartData.p_jun2yr_gap*100 || 0,
total: chartData.n_jun2yr_gap,
color: '#9675CF',
category: 'cat2',
name: 'cat2',
numberStr: chartData.n_jun2yr_gap.toLocaleString()
}
]
}]
});
Here is what I would like to accomplish: https://imgur.com/a/oTG34G6
In render event you can use Highcharts.SVGRenderer.image to add the image and make its position and size dynamically dependent on the column:
events: {
render: function() {
var chart = this,
shape,
points = this.series[0].points;
if (chart.customImages) {
chart.customImages.forEach(function(el) {
el.destroy();
});
chart.customImages.length = 0;
} else {
chart.customImages = [];
}
points.forEach(function(p) {
shape = p.shapeArgs;
chart.customImages.push(
chart.renderer.image(
'https://www.highcharts.com/samples/graphics/sun.png',
shape.x + chart.plotLeft + shape.width / 2 - shape.width / 2,
shape.y + chart.plotTop + shape.height - shape.width,
shape.width,
shape.width
).attr({
zIndex: 3
}).add()
);
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/eLwv9ruh/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

How to properly plot UTC data in Highcharts if labels do not match x-axis?

I have a series of data points (UTC date and value) that I need to plot using Highcharts, which by default uses UTC. However, the data can be in different user timezones, so in this example I am setting it to New York. I noticed that even though the tooltip on each of my data points is correct, e.g. those for 10/26, some of them seem to be plotted in the section of the plot corresponding to 10/27. I expect all 9 data points for 10/26 to be plotted before the 10/17 mark. Does anyone see the issue in my code? I have created a JSFIFFLE to illustrate the issue clearly.
var timeZone = 'America/New_York';
var timeZoneOffsetValue = moment(values[0].data[0][0]).tz("America/New_York")._offset;
console.log(timeZoneOffsetValue);
Highcharts.chart('container', {
yAxis: {
gridLineWidth: 0.5,
gridLineColor: '#D6D6D6',
tickInterval: 5,
dashStyle: 'LongDash',
lineColor: '#D6D6D6'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d',
week: '%d/%b',
month: '%b/%y',
year: '%Y'
},
title: {
enabled: true,
text: 'date'
},
gridLineWidth: 0,
lineColor: '#D6D6D6',
lineWidth: 0.5,
startOnTick: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: this.toolTip
}
},
chart: {
marginTop: 5,
marginRight: 0,
reflow: false,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
style: {
fontFamily: 'Open Sans'
},
type: 'scatter',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0
},
tooltip: {
formatter: function () {
var time = new Highcharts.setOptions({
global: {
timezoneOffset: -timeZoneOffsetValue
}
}, this);
var s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M:%S', this.x)
+ ' - ' + Highcharts.numberFormat(this.y, 2);
return s;
},
},
series: values
});
http://jsfiddle.net/thehme/a47Lbnwr/25/
Note: in my actual code, I have noticed that sometimes when I first load the plot, most of the time the 3 data points are in the 10/27 slot, but if I reload the plot, then sometimes the data points move into the 10/16 date range. This is what makes this more confusing.

Highcharts Heatmap by Column

I'm creating a heatmap from highcharts that shows the allocation to different asset classes for multiple portfolios. The y-axis contains asset classes and the x-axis contains the portfolios (1 - 20).
The heatmap I've constructed looks very much like the one in this demo: https://www.highcharts.com/demo/heatmap. What I would like to do is to essentially construct a heatmap per column (or per portfolio). Is this possible with highcharts?
I'm using the code below to construct the heatmap currently:
Highcharts.chart('portfolioChart', {
chart: {
type: 'heatmap',
height: 700
},
title: {
text: 'After-tax Portfolio Composition'
},
xAxis: {
categories: json.columns,
align: 'top'
},
yAxis: {
categories: json.index,
title: null,
reversed: true
},
colorAxis: {
min: 0,
minColor: '#fff',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 600
},
tooltip: {
formatter: function() {
return '<b>' + this.series.xAxis.categories[this.point.x] + ', ' + this.series.yAxis.categories[this.point.y] + '</b> = ' + (this.point.value*100).toFixed(1) + '%'
}
},
series: [{
name: 'Portfolio Allocation',
borderWidth: 1,
data: portfolioData,
dataLabels: {
enabled: true,
color: '#000',
formatter: function() {
return (this.point.value * 100).toFixed(1) + '%';
}
}
}]
});

Highstock: How do i display the series name along the line

Here is a sample fiddle (1) that shows the series name along the line body
(Sessions, Users). How do I make similar label for a highstock chart?
(The label seems to be appearing due to the data module that does the csv processing)
(1) https://jsfiddle.net/4restw8a/9/
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
'057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
beforeParse: function (csv) {
return csv.replace(/\n\n/g, '\n');
}
},
title: {
text: 'Daily sessions at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
hs.htmlExpand(null, {
pageOrigin: {
x: e.pageX || e.clientX,
y: e.pageY || e.clientY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' sessions',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All sessions',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New users'
}]
});
This comes from the series label module, which you can use by including series-label.js:
<script src="https://code.highcharts.com/modules/series-label.js"></script>
See this JSFiddle example of a Highstock chart with it included.
See this API documentation for its settings.

How I can rotate a polar chart?

I want a polar chart (with highcharts library), but I need the chart is rotated 45º. I have the following base script:
$(function () {
var interval = 90;
var startAngle = 0;
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
margin: 60
},
title: {
text: 'Style of thought',
},
pane: {
startAngle: startAngle
},
xAxis: {
tickmarkPlacement: 'on',
startOnTick: true,
tickInterval: interval,
min: 0,
max: 360
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: interval
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [
{
type: 'area',
name: 'Luis',
data: [40, 60, 35, 89]
}, {
type: 'line',
name: 'Media de comunidad',
data: [60, 75, 15, 52]
}]
});
});
Example in jsfiddle and the chart nice.
I need to rotate the chart 45º, for this I change the value of startAngle to 45
$(function () {
var interval = 90;
var startAngle = 45;
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
margin: 60
},
title: {
text: 'Style of thought',
},
pane: {
startAngle: startAngle
},
xAxis: {
tickmarkPlacement: 'on',
startOnTick: true,
tickInterval: interval,
min: 0,
max: 360
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: interval
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [
{
type: 'area',
name: 'Luis',
data: [40, 60, 35, 89]
}, {
type: 'line',
name: 'Media de comunidad',
data: [60, 75, 15, 52]
}]
});
});
Example 2 in jsfiddle and now the chart is bad. If you see it, the center of the circle is not equidistant from the circumference.
Any idea of the problem?
Thank you very much!!
It looks like a bug, so I've reported to our devs here: https://github.com/highslide-software/highcharts.com/issues/1561
Thanks for suggestion

Resources