The default behavior of the x-axis title alignment is within the bounds of the x-axis. However, the legend alignment is within the bounds of the entire chart. Thus, if you align both center, they have a slight offset. How can I get the legend to base its position off of the x-axis bounds instead? My graph options are dynamic, so I would need to do it dynamically.
Sample JS Fiddle
$('#container').highcharts({
legend: { margin:5, padding:0 },
xAxis:{
title:{
text:'THIS IS MY X-AXIS TITLE',
align:'middle',
},
categories:["A","B","C","D","E","F"]
}
});
Thanks in advance!
Example for you: http://jsfiddle.net/xqag5e72/2/
In short, you can change translation for legend to be similar to xAxis' title:
function moveLegend(e) {
var legend = this.legend,
x = this.plotLeft + (this.xAxis[0].width / 2) - legend.group.getBBox().width / 2,
y = legend.group.translateY;
legend.group.attr({
transform: 'translate(' + x + ',' + y +')'
});
}
Note: I'm using load and redraw events, to translate legend after first initialization and later to make this legend responsive.
Related
Highcharts tooltip is shown at bottom of the column bar for negative values but i want it to show on top or at 0 axis level. Please help.
Present tooltip position as per highcharts:
Reference image of how i want to position:
You can set the positioner of tooltip like this
tooltip: {
positioner: function(__, __, point) {
return {
x: point.plotX,
y: point.negative ? point.plotY - point.h : point.plotY
}
}
}
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 displaying the x-axis of my Highstock chart at the top of the chart area with xAxis: { opposite: true}.
However the tooltip continues to show the x-axis value at the bottom of the chart, see for example here http://jsfiddle.net/ckj7kf2y/
Is there any way I can change the positioning of this be at the top, close to the x-axis?
Bonus points if someone knows why the tooltip.positioner callback isn't called when tooltip: { split: true }
It's possible to wrap core code to add this feature like in this demo: http://jsfiddle.net/ygmbwxtx/
(function(H){
H.wrap(H.Tooltip.prototype, 'renderSplit', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
var tooltip = this,
topAxis = tooltip.options.topAxis,
axisTT = tooltip.tt,
top = tooltip.chart.plotTop;
if (topAxis) {
axisTT.attr({
y: top - axisTT.height,
anchorY: top + 10
});
}
});
}(Highcharts))
and in chart's options:
...
tooltip: {
split: true,
topAxis: true
...
Bonus: positioner is not used for split tooltip - split uses own logic for positioning
I have manipulated highcharts heatmap graph to suit some of my requirement. But I am not able to hide the tick lines on secondary y axis. Below is the jsfiddle link of what I have done. http://jsfiddle.net/sandeepkparashar/39xBU/389/389
Please suggest how to hide the tick lines.
Actually, those lines are grid lines and an axis line (the one in the bottom). You can disable them by setting their width to 0.
xAxis: {
lineWidth: 0
...
},
yAxis: {
gridLineWidth: 0,
...
}
example: http://jsfiddle.net/sebdom/39xBU/390/
I have a column chart that has yAxis labels inside the plot area. DEMO: http://jsfiddle.net/o4abatfo/
This is how I have set up the labels:
yAxis: {
labels: {
align: 'left',
x: 5,
y: -3
}
}
The problem is that the leftmost column is so near the plot area edge that labels are overlapping it. Is there a way to adjust the plot area padding so that the columns would start a bit further on the right?
You can set min value as -0.49.
http://jsfiddle.net/o4abatfo/2/
One possible solution:
Keep the labels on the outside, and apply the plotBackgroundColor as the chart backgroundColor.
This means that the legend will be encased in the background color too, but, again, it's on option.
Example:
http://jsfiddle.net/jlbriggs/o4abatfo/11/
I asked the same thing in the Highcharts forum and got this solution as a reply from #paweł-fus:
var chartExtraMargin = 30;
Highcharts.wrap(Highcharts.Axis.prototype, 'setAxisSize', function (p) {
p.call(this);
if (this.isXAxis) {
this.left += chartExtraMargin;
this.width -= chartExtraMargin;
this.len = Math.max(this.horiz ? this.width : this.height, 0);
this.pos = this.horiz ? this.left : this.top;
}
});
However, adding this made the tooltips appear in the wrong position. This was fixed by overriding the Tooltip.prototype.getAnchor() method and adding the extra margin in the x coordinate:
Highcharts.wrap(Highcharts.Tooltip.prototype, 'getAnchor', function(p, points, mouseEvent) {
var anchor = p.call(this, points, mouseEvent);
anchor[0] += chartExtraMargin;
return anchor;
});