I want to dynamically align the dataLabel in center of two bars.
The data which is visible dynamically appears either for green or the blue bar by using :
dataLabels: {
enabled: true,
formatter: function() {
return this.point.avg;
}
}
I dont want to use x and y attributes, as data can appear for any of the bar. Hope below mentioned image gives you a clear picture.
Note: The value of avg_fare does not represent the bar's value.
Can anyone help me to achieve this usecase?
Thanks
You can use the dataLabels.y parameter to offset the label into the position you desire.
series: [{
data: series1,
dataLabels: {
enabled: true,
y: -14 // move this down
}
}, {
data: series2,
dataLabels: {
enabled: true,
y: 14 // move this one up
}
}]
Here's a fiddle.
enable datalables only for one. and disable for all the remaining ones.
position that single label as you want by seetting x and y Values
dataLabels: {
align:'left',
enabled: true,
x: 20,
y: -10
},
you can refer this as example : http://jsfiddle.net/fMdk3/
Hope this will help you
Related
I am getting image from highchart server to add into my pdf. But when I eport an column chart the column bars are coming at below the x-axis and not on the axis itself. Below is demo url
https://jsfiddle.net/ztcv2rhj/6/
Highcharts.chart('column-container-print',{
chart: {
animation: false,
type: "column",
marginLeft: 80
},
credits:false,
title:{
text: "Top 5 Questions"
},
subtitle: false,
yAxis: {
allowDecimals: false,
min: 0,
} ,
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
xAxis: {
categories: ["Are the characters clear and readable? Keyboards should be kept clean. If characters still can't be read, the keyboard may need modifying or replacing. Use a keyboard with a matt finish to reduce glare and/or reflection.","Does the keyboard tilt? Note, the tilt need not be built in.","Does the user have good keyboard technique?","Is it possible to find a comfortable keying position? Try pushing the display screen further back to create more room for the keyboard, hands and wrists. Users of thick raised keyboards may need a wrist rest.","Is the keyboard separate from the screen?"],
labels: {
rotation: -45
},
},
series: [{"name":"No","data":[1,1,1,1,1]}]
});
This issue occurs because you are providing chart.options as options to export. Instead, you should provide chart.userOptions.
Code:
var optionsStr = JSON.stringify(chart.userOptions);
var dataString = encodeURI('async=true&type=jpeg&scale=4&options=' + optionsStr);
Demo:
https://jsfiddle.net/BlackLabel/6mw03r7c/
Is there a way to have a point specific positionning of the xAxis labels ?
I am using a waterfall chart and for some bars I would like the label to appear directly under the bar like below :
I have found the following code in the xAxis plotOptions but at this point I don't see how I can acces the info on the bottom of the chart.
xAxis: {
labels: {
y:-100 //label's y position
}
},
You can use point dataLabels to achieve such result:
dataLabels: {
crop: false,
overflow: 'none',
verticalAlign: 'bottom',
format: 'label1',
y: 20
}
Live demo: https://jsfiddle.net/BlackLabel/71jtp5mf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.dataLabels
Another way is to create your own custom function to position the xAxis labels, for example:
events: {
load: function() {
var chart = this,
point;
Highcharts.objectEach(chart.xAxis[0].ticks, function(tick) {
if (!tick.isNewLabel) {
point = chart.series[0].points[tick.pos];
tick.label.attr({
y: point.plotY + chart.plotTop + point.shapeArgs.height + 15
})
}
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/oaj9bgt4/
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
If I try to rotate the data labels in my column charts, I can not align the labels at the bottom of my columns, verticalAlign appears to be completed ignored.
basically trying to use:
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
rotation: -90
}
}
}
fiddle with it at: http://jsfiddle.net/FbhAs/
Anyone know a work-around?
-= Jab
The dataLabels don't seem to align correctly to the bottom. Instead, use the axis labels themselves. For a column chart, you would put this in xAxis for the chart options.
xAxis: {
labels: {
enabled: true,
rotation: -90,
y: -10 // negative goes upwards
}
}
You can then add styling, a formatter function, etc. as per dataLabels.
You can update datalabels position, based on translate() function which allows to "move" svg object for defined postiison.
http://jsfiddle.net/wMLg6/37/
var bottom = chart.plotHeight - 20;
$.each(chart.series[0].data,function(i,data){
data.dataLabel.attr({
y: bottom
});
});