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
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
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 need some help for the handles in the navigator of highstock.
My set options do not work in my example:
http://jsfiddle.net/q1xpn6hL/
Please take a look at line 5 to 9:
borderColor: '#666',
width: 10,
height: 35,
borderRadius: 2,
borderWidth: 0.5
thanks a lot!
Those options are not supported. You would have to extend Highcharts to enable them. It is possible to override function that handles creating of handles.
Example: http://jsfiddle.net/v4vhy01j/
(function (H) {
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
var scroller = this,
chart = scroller.chart,
renderer = chart.renderer,
elementsToDestroy = scroller.elementsToDestroy,
handles = scroller.handles,
handlesOptions = scroller.navigatorOptions.handles,
borderWidth = H.pick(handlesOptions.borderWidth, 1),
borderRadius = H.pick(handlesOptions.borderRadius, 0),
width = H.pick(handlesOptions.width, 9),
height = H.pick(handlesOptions.height, 16),
attr = {
fill: handlesOptions.backgroundColor,
stroke: handlesOptions.borderColor,
'stroke-width': borderWidth
},
tempElem;
// create the elements
if (!scroller.rendered) {
// the group
handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
.css({
cursor: 'ew-resize'
})
.attr({
zIndex: 4 - index
}) // zIndex = 3 for right handle, 4 for left
.add();
// the rectangle
tempElem = renderer.rect(-5, 9 - height/2, width, height, borderRadius)
.attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);
// the rifles
tempElem = renderer.path([
'M', -1.5, 13 - height/2,
'L', -1.5, 5 + height/2,
'M',
0.5, 13 - height/2,
'L',
0.5, 5 + height/2]).attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);
}
// Place it
handles[index][chart.isResizing ? 'animate' : 'attr']({
translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10),
translateY: scroller.top + scroller.height / 2 - 8
});
});
}(Highcharts));
The Highstock navigator does not support all those options. Here's what the documentation says:
handles: Object
Options for the handles for dragging the zoomed area. Available options are backgroundColor (defaults to #ebe7e8) and borderColor (defaults to #b2b1b6).
I want to draw a border on chart.Basically its a rectangular chart. So I can use plotxsize,plotysize,plotleft,plottop to draw border as rectangle.
chart.renderer.rect(
chart.plotLeft,
chart.plotTop,
chart.plotSizeY,
chart.plotSizeX,
0).attr({
'stroke-width' : 2,
'stroke' : '#3fa9f5',
'fill' : 'none'
}).add();
But is there any way to remove that rectangular border.
Or is there a way to update plotborderwidth and plotbordercolor dynamically?
Keeping rendered object in variable, allows to show/hide SVG object by show/hide option.
Example:
- http://jsfiddle.net/n9tLuf92/
var r = chart.renderer,
borderColor = '#346691',
borderWidth = 2,
top = chart.plotTop,
width = chart.plotWidth,
left = chart.plotLeft,
height = chart.plotHeight,
border;
border = r.path(['M', left, top, 'L', left + width, top, 'L', left + width, top + height, 'L', left, top + height, 'Z'])
.attr({
'visible': true,
'stroke': borderColor,
'stroke-width': borderWidth
})
.add();
Docs:
- http://api.highcharts.com/highcharts#Renderer.path
By attr() function you can manipulate params.
Example:
border.attr({
'stroke': 'green'
})
Is there any way to increase the height of the handles in the highstock navigator component? Right now, the only options available are to change the color and the border-color. How about the height and width of the handles?
http://api.highcharts.com/highstock#navigator.handles
Thanks,
Vikas.
You can wrap drawHandles function and modify it to have increased height.
var height = 20;
(function (H) {
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
var scroller = this,
chart = scroller.chart,
renderer = chart.renderer,
elementsToDestroy = scroller.elementsToDestroy,
handles = scroller.handles,
handlesOptions = scroller.navigatorOptions.handles,
attr = {
fill: handlesOptions.backgroundColor,
stroke: handlesOptions.borderColor,
'stroke-width': 1
},
tempElem;
// create the elements
if (!scroller.rendered) {
// the group
handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
.css({
cursor: 'e-resize'
})
.attr({
zIndex: 4 - index
}) // zIndex = 3 for right handle, 4 for left
.add();
// the rectangle
tempElem = renderer.rect(-4.5, 0, 9, height, 0, 1)
.attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);
// the rifles
tempElem = renderer.path([
'M', -1.5, 4,
'L', -1.5, 12,
'M',
0.5, 4,
'L',
0.5, 12]).attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);
}
// Place it
handles[index][chart.isResizing ? 'animate' : 'attr']({
translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10),
translateY: scroller.top + scroller.height / 2 - 8
});
});
}(Highcharts));
http://jsfiddle.net/za68w54r/
There is an option for increasing the height of the navigator too..
Check this fiddle:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/navigator/height/
Code:
navigator: {
height: 100
},