my jsfiddle sample is here. The vertical align is bottom. When I set align = 'center', the legend is underneath the charting area. However, if I set align='left' or 'right', the legend will occupy the charting area's space and make the area really small.
I want the legend at bottom left of the charting area, is it possible?
http://jsfiddle.net/daxu/xeb3n/585/
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
y: 0,
padding: 0,
margin:5,
itemMarginTop: 0,
itemMarginBottom: 0,
itemStyle:{
fontSize: '10px'
}
},
You can set floating: true, and then adjust x and y to get to the position that you want.
Documentation
Instead of floating the position, you can use x when align: 'center'. In that case, the legend will be offset from the naturally aligned position. Of course, you'll need to determine the offset to works best for your chart. Negative x values will move the legend towards the left, see example image.
Related
i want to add round corners to radial bar using highcharts is there a way i can do it?
I was able to add round corners to simple column chart using 'borderRadius'. Here is an example
https://jsfiddle.net/agbvnm91/1/.
column: {
stacking: 'normal',
borderWidth: 0,
pointPadding: 0,
groupPadding: 0.01,
pointWidth: 10,
borderRadius: 10
}
But it's not working for radial bar. Here is example of what I tried https://jsfiddle.net/agbvnm91/1/.
I HV multi line chart, I want the shared tooltip to be at the top of the graph ( so that it doesn't covers up the space of graph) , but I want it to have fixed 'y'
And x coordinate to be Free.
So that user can hover over the graph and the tooltip comes at the top of that point ( x coordinate).
Is there a way where I can fix only the y coordinate of the tooltip position?
You can use the tooltip.positioner function. http://api.highcharts.com/highcharts/tooltip.positioner
tooltip: {
positioner: function (labelWidth, labelHeight, point) {
return { x: point.plotX, y: 15 };
},
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)'
},
http://jsfiddle.net/nt9x5tjj/
The callback receives a point object that contains plotX and plotY positions. Fix the y value to some number and return point.plotX as the x value.
I'm trying to position custom labels on the outside of a polar chart but can't figure out any way to do it. Please image below for what I'm trying to achieve.
Doesn't have to use the actual series labels but haven't found anything else that can be positioned relative to the actual chart (top level labels can be positioned anywhere but only using absolute left and top).
Have also tried changing the pointPlacement and tickmarkPlacement to "between" which sort of works but it rotates the actual chart so I get a diamond shape instead of a square, the effect I'm after would be more like rotating the labels and leaving the ticks in place.
IN such case custom labels can be positioned relative to grid line group.
Method for drawing the labels:
function drawLabels () {
let labels = this.customLabels,
bbox = this.xAxis[0].gridGroup.getBBox(),
positions = [
[bbox.x + bbox.width / 2, bbox.y],
[bbox.x + bbox.width, bbox.y + bbox.height / 2],
[bbox.x + bbox.width / 2, bbox.y + bbox.height],
[bbox.x, bbox.y + bbox.height / 2]
];
if (!labels) {
labels = this.customLabels = ['lab1', 'lab2', 'lab3', 'lab4'].map(text => this.renderer.label(text, 0, -9999).add().attr({zIndex: 4}));
}
labels.forEach((label, i) => {
label.align({
align: 'center',
verticalAlign: 'middle',
width: label.width,
height: label.height
}, null, {
x: positions[i][0],
y: positions[i][1],
width: 0,
height: 0
});
});
}
Draw labels on load/redraw:
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line',
events: {
load: drawLabels,
redraw: drawLabels
}
},
example: http://jsfiddle.net/d6y1bn31/
I am using Highcharts heatmap and would like to display one decimal place on the scale range. See image below. I would like to show 0.0, -5.0, -10.0, -15.0, -20.0.
I have increased the range of scale by adding "symbolHeight" to legend. See below code:
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 42,
symbolHeight: 360
}
You can format the Y-Axis decimals with using yAxis.labels.format.
For 0.0, -5.0, -10.0, -15.0, -20.0 ticks, you need to use minTickInterval
Just add this code;
yAxis: {
labels: {
format: '{value:.1f}'
},
minTickInterval: 5
}
Example: jsFiddle
I was able to display the decimal points by adding
labels: {
format: '{value:.1f}'
}
to colorAxis. See edited fiddle: https://jsfiddle.net/er1187/u7oax1ue/1/
I have an highchart rectangle on a chart. Is it possible to set only the borders on the right to have radius and sharp corners for the left?
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect/
I have tried to set the borderRadius (hyphenated) in .CSS as well, but that didn't work too.
renderer.rect(100, 100, 100, 100, 0)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.css({
borderRadius:'10px'
})
.add();
Thanks!
It seems this isn't possibly (easily) as highcharts will render it as SVG element which can't be altered preferentially. Thanks Pawel Fus.