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
});
});
Related
I want to only show the first and last label for the xAxis. Then, I want to show it without rotation and in a single line. And when I do this, this happens and the last label gets cut when there are many columns or the width of the viewport is small.
Demo online:
https://jsfiddle.net/8esnf4dj/
This is my xAxis config:
xAxis: {
categories: [....],
labels: {
rotation: 0,
style: {
textOverflow: 'none',
whiteSpace: 'nowrap'
},
}
}
Is there any way to align the text in a way that this won't happen?
I've seen that this can be fixed by adding chart.marginRight but I would rather prefer not to "lose" that space not the right and just align the text in a way that will always be visible.
I am not sure if it is possible to achieve it by using only API options, because all the labels are rendered in the center of the tick, but you can move/set the position of each label 'manually'.
events: {
render() {
const chart = this;
const xAxis = chart.xAxis[0];
const lastTickPosition = xAxis.tickPositions.length - 1;
const lastLabel = chart.xAxis[0].ticks[lastTickPosition].label;
lastLabel.translate(-lastLabel.getBBox().width/ 4, 0)
}
}
Demo: https://jsfiddle.net/BlackLabel/kbn7zwfc/
API: https://api.highcharts.com/highcharts/chart.events.render
You can use "align: right"
Read the usage of align to understand why this works. Basically this would mean that the bar would align to the rightmost end of the label so the label always fits
xAxis: {
categories: [....],
labels: {
rotation: 0,
align: "right",
style: {
textOverflow: 'none',
whiteSpace: 'nowrap'
},
}
}
I have a type area chart, with minor grid lines and a datetime xAxis. data is feed through an array of y values, and I got to render xAxis labels depending on the data length successfully.
My issues are:
the chart has a unwanted padding on the X axis
the markers don't align with their labels
Check it:
Here's a working fiddle: https://jsfiddle.net/fernandaparisi/e07q32ay/53/
I noticed that if I remove all the max, min, tickInterval, pointStart and pointInterval properties the markers are aligned correctly, but the chart doesn't expand its full available width.
margin and spacing chart properties seem to affect the chart as a whole, and not the plotted area.
Any thoughts?
The padding is caused by combined tickInterval and endOnTick: true, to remove it just disable endOnTick.
To position the labels in a different way use align, x and y properties.
xAxis: {
labels: {
align: 'center',
y: 30,
formatter: function() {
return Highcharts.dateFormat('%e %b', this.value);
},
rotation: -45
},
title: undefined,
type: 'datetime',
min: lastSunday - (weekLength * (data.length - 1)),
max: lastSunday,
tickInterval: weekLength,
endOnTick: false,
minorTickInterval: weekLength
}
Live demo: https://jsfiddle.net/BlackLabel/eLbp48d3/
API Reference:
https://api.highcharts.com/highstock/xAxis.labels.align
https://api.highcharts.com/highstock/xAxis.endOnTick
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/
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
}
}
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