Geek asks and answers

Highcharts: X and Y intersect along the axis at zero in the scatter chart

In tall charts, I want to build a scatter / bubble chart where x values ​​range from -50 to +50 and y values ​​range from -100 to +100. Is there a way for the x and y axes to be constructed so that they intersect at zero in the center of the chart?

I tried using the 'offset' parameter in the axis, which moves the axis, for example. http://bit.ly/Xd9Z51 , but this approach has the following problems:

  • You cannot set the offset parameter dynamically, so if the series updates and changes the min / max x / y values, the axis no longer crosses zero.
  • If you zoom in, the axis no longer intersects with zero.
  • It’s difficult to calculate pixel offsets based on the size of divs, margins, headers, etc.
  • Changing the size of the containing div leads to a change in the required position of the offset axes.
+5
source share
1 answer

Currently, the only solution is to use the offset parameter. However, since Highcharts 3.0 you are free to manage this property and the update axis:

chart.yAxis[index].update( options );

Where parameters is an object with parameters for yAxis, including the offset. To get the position of the pixel, you can use the internal function chart.xAxis[index].translate(value)(a bit of a hack, but it works). Therefore, when they are combined, see Example: http://jsfiddle.net/UGpPV/6/

+2
source

More articles:


All Articles