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
Related
In this example, I tried to move the points by points.graphic.translate(0, -25), but it can't help to move point's label and SVGs. You can see the details in the example.
events: {
load() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
point.graphic.translate(0, -25);
});
}
}
You need to move each element separately.
Label:
point.dataLabel.text.translate(0, -25)
And custom image just after rendering it:
points.forEach(function(point) {
point.customImg = 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();
point.customImg.translate(0, -25)
});
Demo: https://jsfiddle.net/BlackLabel/05hmufxa/
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
How do I make a button to add a horizontal line with 3 points?
1. Height
2. Beginning
3. The end
As in the example below.
Thank you very much!
enter image description here
You can use Highcharts.SVGRenderer class to add the line. For example:
document.getElementById('addLine').addEventListener('click', function() {
var height = document.getElementById('height').value,
start = document.getElementById('start').value,
end = document.getElementById('end').value,
xAxis = chart.xAxis[0],
x1 = xAxis.toPixels(start),
x2 = xAxis.toPixels(end),
y = chart.yAxis[0].toPixels(height);
chart.renderer.path(['M', x1, y, 'L', x2, y])
.attr({
'stroke-width': 5,
stroke: 'red',
zIndex: 4
})
.add();
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4782/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
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/