score:4

Accepted answer

Solution for Highcharts v7.2+

Force some options to prevent chart from reserving space for axes, then use plugin:

(function(H) {
  H.addEvent(
    H.Axis,
    'init',
    function(e) {
      if (H.defined(e.userOptions.matchAxis)) {
        H.merge(
          true,
          e.userOptions, {
            labels: {
              reserveSpace: false
            },
            title: {
              reserveSpace: false
            },
            offset: -1,
            opposite: this.isXAxis ? true : false
          }
        );
      }
    }
  );

  H.addEvent(
    H.Chart,
    'render',
    function() {
      let chart = this;

      chart.axes.forEach(function(axis) {

        let newOffset,
          matchAxis = axis.options.matchAxis,
          translate = axis.horiz ? 'translateY' : 'translateX',
          newTranslation = {},
          offset = axis.options.offset || 0,
          crisp = axis.options.lineWidth % 2,
          otherAxes = axis.isXAxis ? chart.yAxis : chart.xAxis;

        if (H.defined(matchAxis)) {
          newOffset = otherAxes[matchAxis.index || 0].toPixels(matchAxis.value || 0, true);

          newTranslation[translate] = newOffset + offset + crisp;

          if (axis.axisGroup) {
            axis.axisGroup.animate(newTranslation);
          }
          if (axis.labelGroup) {
            axis.labelGroup.animate(newTranslation);
          }
        }
      });
    }
  );
})(Highcharts);

Demo: https://jsfiddle.net/BlackLabel/2k0bw6q3/

Plugin's API:

  • x/yAxis.matchAxis.value - set value that should be picked from the opposite axis. Defaults to 0.
  • x/yAxis.matchAxis.index - when using multiple axes, set index which opposite axis should be used for calculations. Defaults to 0.

Setting e.g. yAxis.matchAxis = {} is completely fine: https://jsfiddle.net/BlackLabel/qwyczoxb/ (because of defaults)

List of options that are forced (in plugin):

  • x/yAxis.labels.reserveSpace to false
  • x/yAxis.title.reserveSpace to false
  • x/yAxis.offset to a negative value (e.g. -50)
  • xAxis.opposite is set to true
  • yAxis.opposite is set to false

Note: Tested only with v7.2.0

Old solution (v3+)

Right now the only solution is to use offset parameter. However since Highcharts 3.0 you can control freely that property and update axis:

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

Where options is an object with options for yAxis, including offset. To get pixel position, you can use inner function chart.xAxis[index].translate(value) (little hacky, but works). So when both are combined, see example: http://jsfiddle.net/UGpPV/6/


Related Query

More Query from same tag