I have a highchart graph with tooltips. This is how I want to render tooltips every time.
When the tootlip doesn't fit the svg container, highcharts swaps the position of tooltip like this.
I know how to fix this but when I do this.
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX,
y: point.plotY - boxHeight
};
},
Tooltip is correctly always on top, but overflows to the right(image_1). I would like to have the tooltip always on top + fit the container from the sides. (image_2)
Is there any easy way to achieve this?
Thanks (http://jsfiddle.net/4xomw3aj/)
Ok I just found out how to 'not swap'. In Tooltip.getPosition()
firstDimension = function (dim, outerSize, innerSize, point) {
ret[dim] = point - distance - innerSize;
},
Related
How can I align Chart title with the bar in highcharts?
The bar length may vary because of the data, so I want my title to end where the bar is ending.
I want to implement something like this:
To adjust the title you can set tittle.attr in the events.redraw event. You need to remember that a bar chart is an inverted column chart and where you have an x-axis there will be a y-axis.
chart: {
events: {
render: function() {
let chart = this,
series = chart.series[0],
title = this.title,
point = series.points[0];
title.attr({
x: chart.plotTop + point.x,
y: chart.plotLeft + point.y
});
}
}
},
API References:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement
Demo: https://jsfiddle.net/BlackLabel/ud45prLg/
I would suggest adding a padding-right: ##px as you havent provided any code to work with. try applying the method via inspect element and add the code into your css after with the right amount of "px" needed.
In Highcharts, I know you can put your tooltip in a fixed position using:
tooltip: {
positioner: function () {
return { x: 50, y: 50 };
},
},
But how would I center it in the same way that margin: 0 auto would center it? I am trying to get the tooltip text to stay in the middle of a donut chart. The solution is probably something obvious but I have yet to figure out what it is. Thanks in advance!
You can make use of chart plotHeight and plotWidth to get access to current chart height and width and adjust the tooltip x and y accordingly as below:
positioner:function(){
return { x: chart.plotWidth/2, y: chart.plotHeight/2 };
}
A working demo here: https://angular-raebwk.stackblitz.io
I am wanting to move the tooltip downwards a few pixels instead of always at the top of each stack (on stacked bar chart).
I found this in the docs about positioners, but I cannot understand the structure of code and where it should actually go.
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
var tooltip = this;
return {
x: 0,
y: -50
};
}
For reference, you can see where I've tried to place it here ( not much wonder why its not working )
Config seems to have a position and yPadding, neither of which seem to have effect I want when I put them in the tooltips options:
tooltips: {
yAlign: 'top',
position: 'nearest',
yPadding: 50
}
yPadding distorts the tooltip, I'm not sure why but it muddles up the caret and box.
How to keep the chart from cropping on resize, but instead just change its viewport?
I find it a a bit hard to explain, so please let me know if more explanation is needed.
The chart on the first screenshot look nice, they have a 'normal spacing between them and the bars are not cropped. This one has a 1000px width.
Chart box wide
On the second screenshot, the chart is only 300px wide, and the candlesticks become 'cropped'..
Chart box cropped
Instead I would like to only change the viewport, so that the bars are never cropped and are always te same size.. Only the date-range (Viewport) changes.. You see more bars on a wider chart, but it doesn't meen the bars itself should grow or shrink.
I tried it with simple algoritme, but its very prone to error.
let parentW = this._elementRef.nativeElement.parentNode.clientWidth,
data = this.chart.xAxis[0].series[0].data,
barW = 10,
barsToShow = Math.ceil(parentW / barW),
firstBar = (data[data.length - barsToShow] || data[0]),
lastBar = data[data.length - 1];
this.chart.xAxis[0].setExtremes(firstBar.x, lastBar.x, redraw);
I couldn't find any setting in the Highcharts doc and google didn't help much either. Many thanks
Desired behaviour can be achieved with the changing data grouping groupPixelWidth property.
When the chart has smaller width than, e.g. 300px, groupPixelWdith can be set to a higher value.
responsive: {
rules: [{
chartOptions: {
plotOptions: {
series: {
dataGrouping: {
groupPixelWidth: 30
}
}
}
},
condition: {
maxWidth: 300
}
}]
}
example: http://jsfiddle.net/b894z8ug/1/
I have two issue to request for help,
Have an issue with the highcharts, it looks like some calculation needs to be done for the chart, but could not ale to figure out the actual thing.
please look at this Fiddle , In this the label at the right hand side $500 is at the correct position that is ok, but when the value is big/large, lets say $555555555555, then the
chart label goes out of chart. Have a look at this fiddle now
Fiddle having Issue
Error:
what should happen is that the $555555555555 should be inside the chart only, having the same position as show in the first fiddle.
What I tried.
Adding/subtracting the length of the string (point.y) with + 30
var chart = new Highcharts.Chart({
...
....
/*********RIGHT SIDE CPM*******************/
var point = chart.series[0].data[7];
var text = chart.renderer.text(
'$'+point.y,
point.plotX + chart.plotLeft - 30,
// point.plotX + chart.plotLeft - ( ((point.y).toString().length) + 30 ), //My change
...
});
But this point.plotX + chart.plotLeft - ( ((point.y).toString().length) + 30 ), did not support when the value again changes from $555555555555 to $5
so Basically the position should not vary when the length of the label is big/small.
My next question, The chart is starting with a small displacement at both sides.
have a look at the image below
As you can see the gap between the two red lines, at both the corners in the image, I need to remove that, It may be a padding issue, but I could not able to figure it out.
Please help me in this two issues.
Thanks for helping in advance.
Issue: Aligning rendered text
So from reading your code I think you are trying to adjust the position of the text and box from the length of the content. Problem here is you have a font that has variable width characters while subtracting a constant value per character. Also, the renderer.text method always anchors in the bottom left, which isn't in your favor.
What I would do here is leverage that the text.getBBox knows the exact bounding box of the text Element. You might be able to get this to look a bit better, but here's a crude example:
/*********RIGHT SIDE CPM*******************/
var point = chart.series[0].data[7];
// Draw dummy text, just to get bounding box
var text = chart.renderer.text('$'+point.y, 0, 0)
.attr({
zIndex: 5
}).add();
// Get bounding box
var box = text.getBBox();
// Destroy dummy text
text.destroy();
// Draw actual text based on bounding box
text = chart.renderer.text(
'$'+point.y,
point.plotX + chart.plotLeft - box.width + 2 ,
point.plotY + chart.plotTop - 10
).attr({
zIndex: 5
}).add();
// Get actual box
box = text.getBBox();
// Draw actual box
chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
.attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 1,
zIndex: 4
})
.add();
And a JFiddle example (I only bothered to fix your right side CPM, but you get the point).
Issue: Spacing on sides of graph
Set the min and max of your x-axis to specific values, as shown in the JFiddle example, with the code:
xAxis: {
...,
min: 1,
max: 8
}