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