How can I change background color of a stacklabel. I didn't find any example to this.
I tried ... but it dont worked.
yAxis: {
title: {text:'%'},
stackLabels: {
style: {
backgroundColor: 'rgba(252, 255, 197, 0.7)',
color: 'black',
borderWidth: 1
},
Any ideas?
You need to enable useHTML.
stackLabels: {
style: {
backgroundColor: 'rgba(252, 255, 197, 0.7)',
color: 'black',
borderWidth: 1
},
enabled: true,
useHTML: true
}
With formatter and enable useHTML
`
yAxis:{ stackLabels: {
style: {
color: 'black'
},
enabled: true,
useHTML: true,
formatter: function() {
return '<span style="background-color:red">' + this.total + '</span>';
}
}
},`
Related
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 an issue displaying the column categories on the xaxis. I can get them to display in the "legend" and the "tooltips".
I have searched for a solution with no result. Can anyone see where I am going wrong.
My code:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Detractors','Passives','Promoters','Not used']
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 30,
gridLineColor:'#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
},
tooltip: {
formatter: function() {
return 'Guest responses:<br/> '+ this.y +'%<br/>'+ this.series.name +'<br/>';
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
colors: ['#FF0000','#FF6600','#009900','#333333'],
plotOptions: {
column: {
colorByPoint: false
},
series: {
cursor: 'pointer',
pointWidth: 20,
point: {
events: {
//click: function() {
}
},
legendIndex:0,
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
//borderRadius: 5,
//backgroundColor: 'rgba(252, 255, 255, 255)',
//borderWidth: 1,
//borderColor: '#AAA',
y: -6,
format: '{y:.1f} %', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function() {
return '<b>Guest responses: '+ this.y +'<br/>'+ this.series.name +'%</b>';
}
}
}
},
credits: {
enabled: false
},
lang: {
noData: "No data"
},
noData: {
style: {
fontWeight: 'normal',
fontSize: '12px',
color: '#303030'
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
series: []
}
$.getJSON("../charts/1-2-4-reports_chart.php?TAG=<?php echo $_SESSION['SectionVar'];?>&From=<?php echo $_SESSION['StartDate'];?>&To=<?php echo $_SESSION['EndDate'];?>", function(json) {
options.xAxis.categories = json[0];
options.series[0] = json[0];
options.series[1] = json[1];
options.series[2] = json[2];
options.series[3] = json[3];
chart = new Highcharts.Chart(options);
});
});
Many thanks in advance for your time.
How do you set a classname for an exported graph in Highcharts? I tried this but it did not work:
exporting: {
chartOptions: {
chart: {
className: 'negPos'
}
}
}
negativeColor add to plot options
Highcharts.chart(container, {
chart: {
//className: 'negPos',
type: 'column',
spacingBottom: 20,
style: {
fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
fontSize: '11px',
fontWeight: 'lighter'
}
},
title: {
text: 'Highcharts',
align: 'center',
style: {
fontSize: '15px',
fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
fontWeight: 'lighter'
}
},
xAxis: {
categories: [1, 2, 3, 5, 6]
},
yAxis: {
title: {
text: '%'
}
},
tooltip: {
borderWidth: 0,
style: {
fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
fontSize: '11px',
align: 'center'
},
formatter: function() {
return '<b>' + this.x + ': </b><br>' + Highcharts.numberFormat(this.y, 1) + '%'
}
},
plotOptions: {
column: {
negativeColor: '#d9534f',
threshold: 0,
}
},
/* plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},*/
legend: {
layout: 'vertical',
verticalAlign: 'bottom',
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
series: [{
showInLegend: false,
color: '#5cb85c',
data: [54, 21, -3, 18, 5, -11]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I want to give a color for bars depending on their values.
For example if you a bar value 5000 then the color should be Dark RED similar for 3000 less darker than 5000 bar values so on...
I want to add total space like 100TB above all bars(some text on my bar value)
`
Availability Bar Chart
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Disk Utility'
},
subtitle: {
text: 'Source: Application Name'
},
xAxis: {
categories: ['Checkout', 'Hermes', 'Hybris', 'Marketplace', 'Mobile'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Used (TB)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
data: [107, 311, 635, 203, 244]
}]
});
});
Fiddle
Here is updated fiddle
You can use "Zones" in plotoptions to define a range and relevant color , as per code below :
zones: [{
value: 200,
color: '#bdbdbd'
},{
value:300,
color: '#ff0000'
},
{
value:500,
color: 'blue'
},{
value:800,
color: 'black'
}]
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