Highchart expected:
[1]: https://i.stack.imgur.com/pXRj8.png
I want to make a Stacked bar like the picture, is it possible? If yes, please give me the solution. Thanks
Use stackLabels:
https://api.highcharts.com/highcharts/yAxis.stackLabels
https://jsfiddle.net/BlackLabel/kcusx40g/
yAxis: {
stackLabels: {
enabled: true
}
}
Here is a response for the problem:https://jsfiddle.net/6pcm4znk/3/
yAxis: {
gridLineWidth: 0,
title: {
text: null
},
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, null, null, ',');
},
style: {
color: 'white',
fontWeight: 'normal'
}
},
labels: {
style: {
color: 'white'
},
formatter: function() {
return Highcharts.numberFormat(this.value, null, null, ',');
}
}
},
Related
I am trying to set the start of drawing column data from a minimum value, but cannot figure out how to do this. That is, that the axis starts with a value of -43, and not with 0 (see screenshots).
what i have
I want to get something like this:
what i want
chart: {
renderTo: 'container',
backgroundColor: 'transparent'
},
tooltip: {
formatter() {
return `${moment(this.x).format('MMM DD')}: ${this.y.toFixed(2)}`;
}
},
plotOptions: {
column: {
pointStart: -50,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
title: {
text: ''
},
yAxis: {
plotLines: [{
zIndex: 1,
color: '#5c5c5c',
value: 0,
width: 3,
}],
title: {
text: ''
}
},
xAxis: {
gridLineWidth : 1,
labels: {
formatter() {
return moment(this.value).format('MMM DD');
}
}
},
legend: {
enabled: false
},
series: [{
data: [...this.monthData.resultByDays.map(res => [res.date, res.result])],
type: 'column'
}]
I think that a good approach will be to use the columnrange series rather than basic column. In the columnrange it is possible to set the range where the point could start from.
Demo: https://jsfiddle.net/BlackLabel/ur6qgnbz/
And the code to hide the '-60' data label:
dataLabels: {
enabled: true,
formatter() {
if(this.y === -60) {
return false
} else {
return this.y
}
}
}
API: https://api.highcharts.com/highcharts/plotOptions.columnrange
Add Plugin 'angular2-highcharts'
add code for highmaps
ERROR
Please use this code
ionViewDidLoad() {
var chart = Highcharts.mapChart('container', {
chart: {
map: 'custom/europe',
spacingBottom: 20
},
title: {
text: 'Europe time zones'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
})
}
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
Here is my code:
window.revenueIncomeChart = new Highcharts.Chart('revenueIncomeChartBox', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: chartData.categories,
title: {
text: null
},
labels: {
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
yAxis: {
title: {
text: null
},
className: 'axis-class',
labels: {
formatter: function() {
return '$ ' + this.value + $.trim(chartData.tooltipSuffix);
},
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
tooltip: {
valueSuffix: chartData.tooltipSuffix,
valueDecimals: 2,
shared: true,
split: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
borderColor: '#f2f2f2',
backgroundColor: '#FFFFFF',
shadow: false,
itemStyle: {
fontSize: '16px',
color: '#797979',
fontWeight: 'normal'
}
},
credits: {
enabled: false
},
series: chartData.series
});
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
I have a highchart, as showed on the appended image.
I am attempting to format the legend of only my last data stacked. In this case, index 1 always.
Any help on how to achieve this?
My main goal, being, on there always showing a value i have in a variable, which will be the max value possible.
createChart: function (id, chartData, maxYValues, chartTitle, chartNames, dataToMax) {
var me = this;
debugger;
me.highChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: id
},
title: {
text: chartTitle,
fontSize: '8px'
},
xAxis: {
labels: {
overflow: 'justify'
},
categories: chartNames
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
stackLabels: {
enabled: true,
format: maxYValues
},
title: {
enabled: false
}
},
colors: ['#afafaf', '#f89c1c', '#3aaa80'],
credits: {
enabled: false
},
tooltip: {
pointFormat: '<span>{point.name}</span>'
},
plotOptions: {
series: {
colors: ['#3aab80', '#3aab80'],
colorByPoint: true,
borderWidth: 0,
dataLabels: {
enabled: true,
headerFormat: '{point.y + point.name}',
format: '{y} mb',
verticalAlign: 'top',
y: -20
}
},
column: {
stacking: "percent"
},
area: {
dataLabels: {
enabled: false
}
}
},
legend: {
labelFormat: '<b>{point.y} MB</b><br/>',
labelFormatter: function () {
if (me.series.data.index === 1) {
return maxYValues;
}
}
},
series: [{
showInLegend: false,
data: chartData,
color: '#3aab80'
}, {
showInLegend: false,
data: dataToMax,
legend: {
labelFormat: maxYValues + 'MB</b><br/>'
}
}],
navigation: {
menuItemStyle: {
fontSize: '8px'
}
}
});
},
Thank you
UPDATE: Added code snipped, and updated the image to what my current code is showing
I'm working with the highcharts stacked bar and want to remove some space between the bars so I can make room for some text I am rendering.
I've tried pointPadding and groupPadding but those are not working. I've tried minPadding/maxPadding on the xAxis and that did not do anything as well.
Seems the only way get rid of that space is to change the width of the whole chart which is what I really don't want.
Here is my fiddle:
http://jsfiddle.net/nick1572/dfcysj39/
$("#profit-chart").highcharts({
lang: {
thousandsSep: ","
},
chart: {
type: "column",
style: {
fontFamily: "Open Sans, sans-serif"
}
},
legend: {
enabled: false
},
title: {
text: ""
},
xAxis: {
//minPadding: 20, Not working here
//maxPadding:1, Not working here either
categories: [ "other business", "somekind of business profit" ],
labels: {
style: {
color: "#333333",
fontSize: "15px"
}
}
},
yAxis: {
gridLineDashStyle: "longdash",
title: {
text: "Dollars"
},
labels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: "normal",
dataLabels: {
enabled: true,
color: "white",
inside: true,
useHTML: true,
style: {
fontSize: "18px",
fontWeight: "600"
}
}
},
series: {
//pointPadding: 0,
//groupPadding: 0, this does not work
animation: {
complete: function() {
}
},
pointWidth: 145
}
},
series: [ {
color: "#327631",
data: [ 0, 850 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0);
else return null;
}
}
}, {
color: "#ADC9AD ",
data: [ 10000, 10000 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.y, 0);
}
}
}]
},
function (chart) { // on complete
chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 870, 85)
.css({
color: 'green',
fontSize: '24px',
x: 200
})
.add();
});//End HighCharts Call
Thanks in advance!
it seems that the point width setting is conflicting with the groupPadding and pointPadding .. if you remove the pointWidth: 145 in the series and add groupPadding and pointPadding to the column you will get the gap removed. on the flipside however the bars will take up the entire available width of your chart.
column: {
stacking: "normal",
groupPadding: 0,//add here
pointPadding: 0,//add here
...
}
http://jsfiddle.net/dfcysj39/9/
Ok so I think this may solve my problem at this point. Not sure if its the right way but it works. The pointPadding and groupPadding partially worked for this particular problem. I thank you Birgit for taking the time to respond!!!
What I did to solve this is explicitly put a spacingRight on the chart to give the plot area more space w/o making the bars wider. I did go back and add some pointPadding to make the cols a little wider for aesthetics. This allowed for the rendered text to show.
http://jsfiddle.net/nick1572/dfcysj39/
$("#profit-chart").highcharts({
lang: {
thousandsSep: ","
},
chart: {
spacingRight: 220,
type: "column",
width: 1200,
style: {
fontFamily: "Open Sans, sans-serif"
}
},
legend: {
enabled: false
},
title: {
text: ""
},
xAxis: {
//minPadding: 20, Not working here
//maxPadding:1, Not working here either
categories: [ "other business", "somekind of business profit" ],
labels: {
style: {
color: "#333333",
fontSize: "15px"
}
}
},
yAxis: {
gridLineDashStyle: "longdash",
title: {
text: "Dollars"
},
labels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.value, 0, "", ",");
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
stacking: "normal",
dataLabels: {
enabled: true,
color: "white",
inside: true,
useHTML: true,
style: {
fontSize: "18px",
fontWeight: "600"
}
}
},
series: {
pointPadding: 0.05,
//groupPadding: 0, this does not work
animation: {
complete: function() {
}
}//,
//pointWidth: 145
}
},
series: [ {
color: "#327631",
data: [ 0, 850 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
if (0 != this.y) return "$" + Highcharts.numberFormat(this.y, 0);
else return null;
}
}
}, {
color: "#ADC9AD ",
data: [ 10000, 10000 ],
stack: "female",
dataLabels: {
enabled: true,
formatter: function() {
return "$" + Highcharts.numberFormat(this.y, 0);
}
}
}]
},
function (chart) { // on complete
chart.renderer.text('<span class="bracketed">}</span> <em>Profit</em>', 900, 84)
.css({
color: 'green',
fontSize: '24px',
x: 200
})
.add();
});//End HighCharts Call