I've been trying to rotate highcharts VU dials (http://www.highcharts.com/demo/gauge-vu-meter). I'm trying to make them vertical with the VU labels centered and horizontal. Does anyone know if there is a property for this?
With a guage chart (VU dial), adjust the angles of the pane:
pane: [{
startAngle: 0, // 12 o'clock
endAngle: 180, // to 6 o'clock
background: null
}],
Horizontal labels can be obtained by getting rid of the rotation option on the labels:
labels: {
distance: 20
},
Example here.
Related
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/
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.
I would like some help with this chart. If the series values are not 0.0, the minimum value of the chart is 0, and it's correctly on the bottom of the chart:
But if the values are all equal to 0.0, the y-axis line is shown in the middle of the chart:
I try to set
{min: 0,}
on the y-axis, but it doesn't work. Obviously I can't set a max value because I have a dynamic data. How can I solve this?
If you can't set a max, you can set a minRange
yAxis: [{ // Primary yAxis
min: 0,
minRange: 0.1,
http://jsfiddle.net/tZayD/