Very wide columns in stacking column graph - highcharts
if one of these graphs contains more than one value on XAxis (for example "data":[[52,1], [100,1]]), the more distance between them, the greater becomes the columns. How to get rid from this problem?
jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
},
xAxis: {
title: {
text: 'value'
}
},
yAxis: {
min: 0,
},
legend: {
},
tooltip: {
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{"name":"RunContractid = 316 name","stack":109,"data":[[52,1], [100,1]],"type":"column"},{"name":"RunContractid = 314 name","stack":109,"data":[[49,1]],"type":"column"},{"name":"RunContractid = 472 name","stack":109,"data":[[49,1]],"type":"column"},{"name":"RunContractid = 327 name","stack":109,"data":[[49,1]],"type":"column"},{"name":"RunContractid = 476 name","stack":109,"data":[[52,1]],"type":"column"},{"name":"RunContractid = 299 name","stack":109,"data":[[52,1]],"type":"column"},{"name":"RunContractid = 298 name","stack":109,"data":[[52,1]],"type":"column"},{"name":"RunContractid = 469 name","stack":109,"data":[[56,1]],"type":"column"},{"name":"RunContractid = 479 name","stack":109,"data":[[56,1]],"type":"column"},{"name":"RunContractid = 500 name","stack":109,"data":[[59,1]],"type":"column"},{"name":"RunContractid = 320 name","stack":109,"data":[[59,1]],"type":"column"},{"name":"RunContractid = 600 name","stack":109,"data":[[59,1]],"type":"column"},{"name":"RunContractid = 326 name","stack":109,"data":[[59,1]],"type":"column"},{"name":"RunContractid = 642 name","stack":109,"data":[[59,1]],"type":"column"},{"name":"RunContractid = 312 name","stack":109,"data":[[64,1]],"type":"column"},{"name":"RunContractid = 480 name","stack":109,"data":[[48,1]],"type":"column"}]
});
});
Found the solution - add zeros at blank points.
You can set pointWidth parameter
http://api.highcharts.com/highcharts#plotOptions.column.pointWidth
EDIT:
PointRange solves problem http://jsfiddle.net/UMpBL/4/
plotOptions: {
column: {
pointRange:1,
stacking: 'normal',
}
},
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
Fix both y-axis to 0 highcharts
I am trying to make a highchart, with both negative and positive values. Now the thing is, that negative values, are not very big, compared to the positive ones.
Here is a picture of the graph as is:
Now if you look closely on both the y-axis, they do not meet up at 0, there is a tiny gap. Is it possible to make them both start at 0, but allowing them to be negative?
This is my code:
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Sales Graph'
},
xAxis: {
categories: xAxisTicks
},
plotOptions: {
column: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
debugger;
if (this.series.type == "column") {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>' +
'Sales without discount: ' + prettyNumber(this.point.stackTotal);
} else {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>';
}
}
},
colors: ['yellow', 'orange', 'red', 'blue', 'green', 'red', 'blue', 'green'],
yAxis: [
{
title: {
text: 'Daily sales'
},
min: minYAxisValue,
startOnTick: false
}, {
title: {
text: 'Accumulated sales'
},
min: minYAxisValue,
startOnTick: false,
opposite: true
}
],
series: data
});
If you want two to align 0 tick together that is not yet possible with highcharts. Follow this discussion https://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control?page=3&per_page=20.
However you can try this simple workaround:
Have fixed min/max on both y Axes:
yAxis: [{ min: minYAxisValue, max: maxYAxisValue }
Or just link second axis to the first:
yAxis: [{ opposite: true, linkedTo: 0 }
How to make highcharts scrollable vertically in column range
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"}]
});
});
Show only two axis values in highcharts
I would like to show just the 2GB and the 4GB values (just 2 values) in the y-axis of this chart (see jsFiddle):
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Size']
},
yAxis: {
min: 0,
max: 4294967296,
labels: {
formatter: function() {
var maxElement = this.axis.max;
var kb = 1024, mb = 1048576, gb = 1073741824;
if (maxElement > gb) {
return (this.value / gb).toFixed(1) + " GB";
} else if (maxElement > mb) {
return (this.value / mb).toFixed(1) + " MB";
} else if (maxElement > kb) {
return (this.value / kb).toFixed(1) + " KB";
} else {
return (this.value) + " B";
}
}
},
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + filesize(this.y);
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Versioned trees',
data: [94371840]
}, {
name: 'Metadata',
data: [115343360]
}, {
name: 'Data',
data: [1395864371.2]
}]
});
});
Is it possible?
You can use the tickPositions property, like this: tickPositions:[0, 1073741824 * 2, 1073741824 * 4] It doesn't appear to respect the min:0 if you don't include 0, but you can hide the 0 label by adding: showFirstLabel: false Updated Fiddle: http://jsfiddle.net/jlbriggs/kv684von/2/ Reference: http://api.highcharts.com/highcharts#yAxis.tickPositions
How to reduce height of cell in highcharts
I have a area chart build with highcharts, I am trying to reduce some spaces between y axis cell columns means reduce height from 0 to 1 , 1 to 2 etc, but not getting proper result. how to achieve it ?
jQuery(document).ready(function () {
var txt = document.getElementById('hdnYaxis');
var txtFoxXAxis = document.getElementById('hdnXaxis');
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Monthly Status'
},
xAxis: {
categories: $.parseJSON(txtFoxXAxis.value),
labels: {
style: {
color: 'red'
}
},
maxPadding: 0,
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: $.parseJSON(txt.value)
});
});
set tickPixelInterval in yAxis ,use this:
yAxis: {
tickPixelInterval: 10 // whatever you want
}
Set maxPadding on yAxis as 0.
yAxis:{
maxPadding:0
}