I want to draw rectangle or square in selection area to show the selected xAxis min, max and yAxis min max in highchart.
Thanks in Advance
Explaining #igor-shastin's example...
Set zoomType to "xy"
Add a rect to the chart with 0 dimensions and hang onto the reference
In the selection event:
Grab the event.xAxis[0].min and .max; same for .yAxis
Update the rect coordinates so it renders where the selection was made
Return false and/or call event.preventDefault() to prevent actually zooming
Related
I need help with the y-axis of polar charts like spiderweb or windrose.
I've an application with an dashboard which contains some widget, each containing an iframe with an Highcharts chart.
Because these widgets are reziable, I've some javascript for resizing the container of the charts.
$(window).bind("resize", resizeChart);
function resizeChart() {
var width = $(document).width() - 55;
var height = $(document).height() - 60;
$("#container").css("width", width);
$("#container").css("height", height);
}
Some example: http://jsfiddle.net/CwnDw/
My problem is, that the scale of the y-axis often look very ugly. When the chart loads the y-axis has only one tick.
After resizing the chart to + 10 px, it contains no tick, and after resizing to the inital size, the y-axis renders with 5 ticks. I don't understand why.
In my example I only get these effect when I resize the chart from a small size to a bigger size very fast.
Is there a better way for resizing a chart? I tried the chart.setSize() function to, but no effect. Or: is there a way to rerender/recalculate the y-axis?
Thank you
Torben
I'm not sure about a redrawing method that would accomplish what you are looking for, but with my experience using Highcharts, I found it is best to specify tick positions to avoid any unexpected results.
Here is a link to Highchart documentation regarding yAxis: tickPosition
http://api.highcharts.com/highcharts#yAxis.tickPositions
There is a pretty good jsFiddle example there that should cover implementation.
Try this:
function resizeChart() {
var width = $(document).width() - 55;
var height = $(document).height() - 60;
$("#container").css("width", width);
$("#container").css("height", height);
setTimeout(function () {
chart1.setSize(
width,
height,
false
);
},10);
}
http://jsfiddle.net/9YFB8/2/
I am building a pie chart where the labels for the data points can very greatly in length, the legend is configured to be vertical and positioned on the left side.
I have added a label element to the bottom of the chart that shows the total of all data points.
The problem I am facing is that the positioning of this label (via the style element) is based on how wide the legend is, which occasionally if the legend is wide enough will be pushed off the right side of the chart.
Does anyone know of a way that I can style this label so that is positioned based solely on the width of the entire chart.
Here is the styling applied to the label (I tried adding the position value but this didn't appear to do anything):
style: {
top: '325px',
position: 'absolute',
left: '-160px',
'font-size': '175%'
}
Here is an example of the chart that I'm working with, you can see that the value for the total has bee cut off.
EDIT:
As per Sebastian's comment I was able to effectively solve the issue by using the legend label formatter to limit the length of the series names. Here is the code:
labelFormatter: function () {
var formattedName = this.name;
if (formattedName.length > 17) {
formattedName = formattedName.substr(0, 14) + '...';
}
return formattedName;
}
Have you tried to use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter ?
I have a highstock chart witch candlestick data type.
When I mouseover the data point, I want to highlight the background of the point.
This is what tooltip -> crosshairs do:
tooltip: {
crosshairs: true
}
But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/.
This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.
When I set 100% width, the crosshair would fill entire chart area:
tooltip: {
crosshairs: {
width: '100%'
}
}
Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?
Meanwhile, I produced a dirty workaround, so improvements are welcomed:
xAxis: {
events: {
afterSetExtremes: function() {
this.chart.tooltip.crosshairs = [];
this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
}
}
}
http://jsfiddle.net/QbdEu/1/
Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.
Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".
I made a small code for panning in yAxis, but its a little slow. it becomes faster if I increase the value of tickInterval. But the downside is that with increased tickInterval, the code starts working oddly when I drag the mouse for less than the tickInterval size (try changing tickInterval to 500 in my fiddle and then drag mouse for a minute increment.
My link to jsfiddle.
Pertinent Code:
var mouseY;
$(chart.container)
.mousedown(function(event) {
mouseY=event.offsetY;
yData=chart.yAxis[0].getExtremes();
yDataRange=yData.max-yData.min;
isDragging=true;
})
.mousemove(function(e) {
var wasDragging = isDragging;
if (wasDragging) {
yVar=mouseY-e.pageY;
if(yVar!=0) {
yVarDelta=yVar/500*yDataRange;
chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
}
}
})
.mouseup(function (e) {
isDragging = false;
});
Will also appreciate if someone can provide an alternate route to converting pixels (e.pageY) to y co-ordinate. As you can see in code, currently I am doing a workaround.
EDIT
I included translate function in this jsfiddle and have put logic such that the panning happens only at mouseup and not at mousemove. The issue I am currently facing is that if the drag is less than tick interval, not only does the code pan, but it also zooms. I presume its happening because the change in yAxis min and max occurs at a floor for min and ceiling for max.
There are a few problems here. Firstly, when you call setExtremes, your range gets bigger ( causing the zoom effect). This is because you are not moving by an exact tick interval. You can cure this by setting set/end on tick on the y axis to false:
yAxis: {
min: -50,
tickInterval: 500,
startOnTick:false,
endOnTick:false
},
The way to convert pixels to coordinates is to use 'translate'. I changed your first jsfiddle as follows:
http://jsfiddle.net/uLHCx/
if(yVar<-50 || yVar > 50) {
mouseY = e.pageY;
yVarDelta=yVar/100*yDataRange;
yVarDelta = chart.yAxis[0].translate(e.pageY) - chart.yAxis[0].translate(e.pageY - yVarDelta);
chart.yAxis[0].setExtremes((yData.min-yVarDelta),(yData.max-yVarDelta));
}
You can change the scroll amount by changing the calculation of yVarDelta.
Note, I put a range check on the yVar so that we don't redisplay unless the mouse has moved a given amount, and reset the valu of mouseY.
This may not do exactly what you want, but it should be enough for you to modify it as required.
How to set scrollbar position to Left in highcharts/highstock ?
As shown in image when the chart loads,
The scrollbar is automatically aligned to right.
Is there a way to position it to Left ?
We can do this thing using setting min to 0
xAxis: {
min: 0, //setting min to 0
max: 5
},
here is Jsfiddle link .
You can use setExtremes http://api.highcharts.com/highstock#Axis.setExtremes() and define range for scrollbar.