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.
Related
Current highcharts support free drawing of a line segment annotation. But I want to be able to draw a line based on the data points on the chart series. Basically I want to implement:
click on first point in the chart series to select the first data point
click on the second point on the chart to select the second data point
draw a line segment with those two data points
I should be able to edit the segment just like current highcharts annotations. The edit dialog should show line segment option plus two data points which I can edit.
Any idea how to implement this?
Let's start with this demo: https://jsfiddle.net/BlackLabel/7xvr85wt/
Select two points by clicking on them & holding the shift, next click on the button. Is that an output that you want to achieve? Now, what do you want to add to this segment line?
const chart = Highcharts.chart('container', {
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
allowPointSelect: true,
}]
});
function drawPath(points) {
points.length = 2;
const x1 = points[0].plotX + chart.plotLeft,
x2 = points[1].plotX + chart.plotLeft,
y1 = points[0].plotY + chart.plotTop,
y2 = points[1].plotY + chart.plotTop;
chart.renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
}
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
const selectedPoints = [];
chart.series[0].points.forEach(p => {
if (p.selected) {
selectedPoints.push(p);
}
})
drawPath(selectedPoints);
});
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
I want to put some images as SVG on each point in Gantt chart, I've tried something like below:
function (chartt) { // on complete
chartt.renderer.image('imageURL.png',100,100,30,30)
.add();
}
But after running this code, the image will be shown on the corner of the page. I want to draw images on each point in the chart and set their position related to its point.
Live Demo: https://jsfiddle.net/meysamm22/x41wdu5z/
You need to use the right x and y attributes, calculate them based on plotX and plotY point's properties:
function(chartt) { // on complete
var points = chartt.series[0].points,
width = 30,
height = 30;
points.forEach(function(point) {
chartt.renderer.image(
'https://www.highcharts.com/images/employees2014/Torstein.jpg',
point.plotX + chartt.plotLeft + point.shapeArgs.width / 2 - width / 2,
point.plotY + chartt.plotTop - height / 2,
width,
height
)
.attr({
zIndex: 5
})
.add();
});
});
Live demo: https://jsfiddle.net/BlackLabel/r4ph3ykz/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image
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 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/
the above graph shows the congestion between x and y coordinates how can that be avoided?
You can also add an offset to the labels of either xAxis or yAxis with
xAxis: {
labels: {
x: 5,
y: 5
}
}
This will move the label 5 points relative to the axis.
Increase the scale on the X axis by for example formatting x axis data to a Date without time information?