How i can only show grid lines only on the middle of the chart, please see the attached image
You can loop over all ticks and remove gridLines which are not at first / last and zero point.
$.each(chart.yAxis[0].ticks,function(i,line){
if(!line.isFirst && !line.isLast && line.pos!=0) {
line.gridLine.destroy();
}
});
Example: http://jsfiddle.net/hjpchasj/2/
Related
Im trying to sync Highcharts horizontally, stacked with multiple charts vertically- with the goal that the x axis align - some charts have hourly data for a specific range, some have daily data, some have 5-minute data. One grid might have 2 y-axis, zero, or even 3. How to I Align them horizontally?
Image showing unaligned stacked highcharts
You can find a chart with the biggest plotLeft property and apply the same to the others by marginLeft property:
charts.forEach(function(ch) {
if (ch.plotLeft > maxPlotLeft) {
maxPlotLeft = ch.plotLeft;
}
});
charts.forEach(function(ch) {
ch.update({
chart: {
marginLeft: maxPlotLeft
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5012/
API Reference:
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/class-reference/Highcharts.Chart#update
I want to plot x axis next to 0th y axis tick label in case of negative data. Refer Image: To plot Xaxis next to 0th tick label
Is there any way to achieve this in Highcharts?
Refer to this live working demo: http://jsfiddle.net/kkulig/gxxtfn67/
I slightly modified the code of xAxis zero crossing plugin (https://github.com/ppoliani/xAxis-zero-crossing). I enabled rendering of the y axis and removed the line responsible for positioning x axis labels. The final code looks like this:
(function (H) {
H.wrap(H.Axis.prototype, 'render', function (proceed) {
var chart = this.chart,
xAxis, yAxis, extremes, crossing;
if (typeof this.options.zeroCrossing === 'boolean') {
xAxis = chart['xAxis'][0];
yAxis = chart['yAxis'][0];
extremes = yAxis.getExtremes();
crossing = Math.abs(extremes.min) + Math.abs(extremes.max);
this.offset = yAxis.toPixels(crossing, true);
chart.axisOffset[this.side] = 10;
}
proceed.call(this);
});
}(Highcharts));
UPDATE
Live working demo for bar series (inverted chart): http://jsfiddle.net/kkulig/gyp8n9ou/
I have a problem with Highcharts, when trying to position the x-Axis tick marks according to the column data shown. I want to align the x-axis ticks on the right, but all the time they are displayed on the center. X-axis must be numbers, so I don't have categories.
Fiddle here
Experiment with the pointPlacement option.
For instance:
plotOptions: {
column: {
pointPlacement: -0.5
}
}
Produces (fiddle here):
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.
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