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'
},
}
}
Related
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
I'm wondering if it is possible to place two text titles at each side (negative/positive), centralized on each side.
I tried with this jsfiddle.
...
yAxis: [{
title: {
text: "right",
align: "right"
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
{
title: {
text: "left",
align: "left"
}
}
I tried to add another yxis, but it doesn't work.
you can only set xaxis title to
"low", "middle" by default, "high"
but for multiple title ,i think its not possible via api, it depends on your axis.
like you have one xaxis and 2 yaxis,
so you can have title separatly on both yaxis but not on xaxis.
the problem is you cant get the center point (0,0), if you can get Y of this point then you can update Y for the title.
I need the xAxis label to have a tool tip. But when I use a formatter to add the tool tip , then long labels tend to overlap with the chart instead of pushing it to the right. Also this only happens if the label has a white space , if white spaces are removed then it work properly and pushes the chart to the right. This problem is shown in this fiddle: http://jsfiddle.net/W5wag/44
$(function(){
var chart1;
$(document).ready(function(){
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
xAxis: {
categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'],
labels: {
formatter: function() {
return '<span title="abc">' + this.value + '</span>';
},
useHTML: true,
style: {
whiteSpace: 'nowrap'
}
},
},
};
options.series = [{
data: [3, 4, 4, 3, 9]
}];
chart1 = new Highcharts.Chart(options);
});
})
I tried to execute some code after the labels have been rendered, but my experience is a bit limited there. I'd try to find the maximum width of any of the x-axis labels, set that as the min-width of the parent (as below), and invalidate the labels to trigger a redraw. Maybe you can find a way to do that.
If all else fails, you could "cheat" with these quick-n-dirty solutions:
Set the text without spaces, and add them afterwards, when the layout is done.
window.setTimeout(()=>document.querySelector('span[title=abc]')
.innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500);
Or, add css to the page (which requires knowing how wide the labels will be, though):
.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }
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
});
});
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.