Related
chartOptions: Highcharts.Options = {
title: {
text: undefined,
style: {
fontSize: '32px',
fontFamily: 'Prompt',
fontWeight: '500'
}
},
xAxis: {
categories: [],
labels: {
enabled: false
},
},
yAxis: [
{
title: {
text: null
},
showEmpty: false
}
],
credits: {
enabled: false
},
legend: {
align: 'left',
verticalAlign: 'top',
itemStyle: {
color: '#636363',
weight: '100',
fontWeight: 'bold'
}
},
colors: ['#0084FE'],
series: []
};
This behaviour defaults for the category type xAxis.
Set series.pointPlacement: on to prevent it
Demo: https://jsfiddle.net/BlackLabel/Lf4a6b3q/
In case you don't pass any categories to your chart, just remove xAxis.categories option and set tickWidth: 0 to achieve the same result
Demo: https://jsfiddle.net/BlackLabel/a03xt5sh/
API References:
https://api.highcharts.com/highcharts/xAxis.type
https://api.highcharts.com/highcharts/series.line.pointPlacement
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
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
For the past two days I've been trying real hard to figure out a way on how to provide a custom stack label instead of using the this.stackTotal option.
My Scenario is, the label for each stack is not basically dependent on each series but rather a multitude of factors. Therefore the client wants to set an arbitrary value to the end of each stacked bar. What I have so far is this (http://jsfiddle.net/yybLxgkd/) but have been unsuccessful so far in trying to display a custom label at the end of each stacked bar.
I tried to pass-in the value that I needed to be displayed at the end of each stack from within the series by providing a series option called QTotal, but later I realized that the stackLabel does not support (this.point.series). So I tried to play around and get atleast the category name displayed at the end of each bar but this too has been in complete vain.
I would really appreciate any help I can get in trying to resolve this issue.
Once again, what I what I would like to accomplish is display a custom label for each stack rather than (this.stackTotal) option.
My logic was perhaps I could initiate a loop for all the categories, from the stackLabel formatter, that are present and depending on the category - display the arbitrary value that is needed.
Many Thanks,
Jerry
My code is below:
$(function () {
var categoriesVal = {
'Term 1':'Term 1',
'Term 2':'Term 2',
'Term 3':'Term 3',
'Term 4':'Term 4',
'Term 5':'Term 5'
};
$('#container').highcharts({
chart: {
defaultSeriesType: 'bar',
style: {
fontFamily: 'Geneva, Tahoma, Verdana, sans-serif'
}
},
title: {
text: 'Serious AEs',
style: {
fontSize:'1.2em',
fontWeight:'bold'
}
},
xAxis: {
categories: ['Term 1','Term 2','Term 3','Term 4','Term 5'],
// lineColor:'#000',
lineWidth:.5,
tickWidth:.5,
tickLength:3,
tickColor:'#000',
title: {
text: '',
style: {
color:'#000',
fontSize:'.8em'
}
},
labels: {
style: {
fontWeight:'bold'
}
}
},
yAxis: {
min: 0,
//lineColor:'#000',
lineWidth:.5,
tickWidth:.5,
tickLength:3,
tickColor:'#000',
//gridLineWidth:0,
//gridLineColor:'#eee',
title: {
text: 'Total',
rotation:0,
style: {
color:'#000',
fontSize:'.8em'
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
// color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function() {
// var s = this.series.options.QTotal;
// return Highcharts.numberFormat(Math.round(s*100)/100,2)+'%';
return categoriesVal[this.value]+' Test';
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
//shared: true,
crossHairs: true,
//useHTML: true,
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y + this.point.dtLabel; /*+'<br/>'+
'Total: '+ this.point.stackTotal*/;
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
/*formatter:function(){
return this.point.dtLabel;
},*/
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [
{
name: 'Not Serious',
data: [{y:2,dtLabel:'<br />Subject(s):0012001,006007'},6, 3, 3, {y:4,dtLabel:'<br />Subject(s):0012001,006007'}],
color: '#000000',
QTotal:0.79
},
{
name: 'Serious Severe',
data: [0,0,0,2, 5],
color: '#FF0000',
QTotal:0.79
},
{
name: 'Serious Moderate',
data: [2, 2, 3, 2, 1],
color: '#00FF00',
QTotal:0.79
},
{
name: 'Serious Mild',
data: [5, 3, 4, 7, 2],
color: '#0000FF',
QTotal:0.79
}
]
});
});
The stack label this doesn't contain a reference back to its series because it's a combination of all the series; so I'm not sure how you'd map a series QTotal to each stack.
The easiest way to do this would be to place your custom property directly into the stackLabel options:
stackLabels: {
qTotals: ['This','is','a','qTotal','!'],
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.options.qTotals[this.x];
}
}
Updated fiddle.
I have a column chart combined with a line drawing across the chart.
When decreasing the width of the chart container to a value smaller than 357px the horizontal line is only drawn half way instead of the full width.
chart = new Highcharts.Chart({
chart: {
renderTo: 'chartcontainer',
defaultSeriesType: 'column',
borderRadius:0,
marginRight: 22,
marginBottom: 140
},
title: {
text: 'test norm',
align: 'left'
},
xAxis: [{
title: {
text: 'x',
style: {
}
},
categories: ['2008','2009','2010','2011','2012'],
labels: {
style: {
}
}
},
{ //secondary xAxis for range and norm values
gridLineWidth: 0,
labels:{
enabled:false
},
lineWidth:0,
tickWidth:0,
opposite: true,
minPadding:0,
maxPadding:0
}
],
yAxis: {
title: {
text: 'y',
style: {
}
},
labels: {
style: {
}
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom',
width:700,
borderRadius: 0,
shadow:false,
floating:true,
borderWidth: 0
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
borderRadius: 0,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: false,
style: {
font: 'bold 11px Arial, Verdana, sans-serif',
fontWeight: 'bold'
},
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>';
}
},
plotOptions: {
column: {
dataLabels: {
enabled: false
},
shadow: false
}
},
series: [{ name: 'A', shadow: false, data: [8,2,8,4,6] },{ name: 'B', shadow: false, data: [1,4,2,3,4] },{ name: 'C', shadow: false, data: [4,16,8,12,16] },{ name: 'E', shadow: false, data: [8,4,6,8,2] },{
type:'line',
name:'Norm',
data:[
{
y:10.000000,
x:0.000000,
dataLabels: {
enabled: false,
align: 'left',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
},
{
y:10.000000,
x:1.000000,
dataLabels: {
enabled: true,
align: 'right',
formatter:function(){return 'Norm: ' + this.y;},
style: {fontWeight:'bold'}
},
}
],
color: '#01A1EB',
lineWidth:1,
dashStyle:'Solid',
shadow: {
opacity:0.1
},
enableMouseTracking:false,
marker:{enabled:false},
xAxis:1,
showInLegend: true
}]
});
See my jsfiddle example here:
The line fully drawn:
http://jsfiddle.net/ramon_ackermann/WwSbT/7/
The line only half way:
http://jsfiddle.net/ramon_ackermann/WwSbT/8/
Any ideas what might cause this?
Cheers.
Use Plotline on the y axis instead: http://jsfiddle.net/paranoir/WwSbT/9/
plotLines: [{
color: '#FF0000',
width: 1,
value: 10
}]
Plotline would be my preferred option as well.
If you need it to be a series for some reason, however, you can do it like this:
1) set your min x value for the line at -0.5, max x value at 4.5
2) set xAxis min at 0 and max at 4
3) forget about the secondary x axis
http://jsfiddle.net/jlbriggs/WwSbT/10/
for the x axis:
xAxis: [{
min:0,
max:4,
}]
and then in the data:
...
y:10.000000,
x:-0.5,
...
y:10.000000,
x:4.5,
The second x axis appears to be part of the problem. If you hide the norm series, and then reshow it, it fills the plot area properly.