highcharts how to set y-axis index for series data(categories),not series(legend)

Question

how to set y-axis index for series data(categories),not series(legend) http://jsfiddle.net/n7zxvc4q/

Highcharts.chart('container', {
    chart: {
        marginRight: 80
    },
    xAxis: {
        categories: ['time', 'bytes']
    },
    yAxis: [{
        title: {
            text: 'seconds'
        }
    }, {
        title: {
            text: 'Mb'
        },
        opposite: true
    }],

    series: [{
        type: 'column',
        data: [29.9, 71.5],
        name: '192.168.0.1'
    }, {
        type: 'column',
        data: [14.1, 95.6],
        name: '192.168.0.2'
    }, {
        type: 'column',
        data: [34.1, 75.6],
        name: '192.168.0.3'
    }]
});

I hope "time" use the left y-axis:seconds(yAxis:0) and "bytes" use the right y-axis:Mb(yAxis:1)

I found other one is not the way I want it,like this
http://jsfiddle.net/141nw7vw/

Highcharts.chart('container', {
    chart: {
        marginRight: 80
    },
    xAxis: {
        categories: ['192.168.0.1', '192.168.0.2','192.168.0.3']
    },
    yAxis: [{
        title: {
            text: 'seconds'
        }
    }, {
        title: {
            text: 'Mb'
        },
        opposite: true
    }],

    series: [{
        type: 'column',
        data: [29.9, 71.5],
        name: 'time',
        yAxis:0
    }, {
        type: 'column',
        data: [14.1, 95.6],
        name: 'seconds',
        yAxis:1
    }]
});

Answer 1

In Highcharts x/y/zAxis properties can be assigned only to a series. Categories are only the information how to format axis' labels (their "real" values are their indexes from categories array). One series should contain only one type of the data (time or bytes). You should rearrange your data like this (notice that all points have x coordinate defined):

  series: [
    // time
    {
      data: [
        [0, 29.9]
      ],
      name: '192.168.0.1',
      pointPlacement: -0.3,
      color: 'orange'
    }, {
      data: [
        [0, 14.1]
      ],
      name: '192.168.0.2',
      color: 'pink'
    }, {
      data: [
        [0, 34.1]
      ],
      name: '192.168.0.3',
      pointPlacement: 0.3,
      color: 'blue'

    },
    // bytes
    {
      data: [
        [1, 71.5]
      ],
      name: '192.168.0.1',
      yAxis: 1,
      pointPlacement: -0.3,
      color: 'orange',
      showInLegend: false
    }, {
      data: [
        [1, 95.6]
      ],
      name: '192.168.0.2',
      yAxis: 1,
      color: 'pink',
      showInLegend: false
    }, {
      data: [
        [1, 75.6]
      ],
      name: '192.168.0.3',
      yAxis: 1,
      pointPlacement: 0.3,
      color: 'blue',
      showInLegend: false
    }
  ]

Live working example: http://jsfiddle.net/kkulig/rxrys3nx/

I disabled grouping to position columns using pointPlacement and pointPadding properties.

I assigned the same color to the mutually corresponding series and used showInLegend = false to prevent duplicates in legend.

Then I programmed a legend so that it performs the same action (show/hide) for all series with the common name:

    legendItemClick: function(event) {
      var series = this,
        chart = this.chart;

      var isVisible = series.visible;
      chart.series.forEach(function(s) {
        if (s.name === series.name) {
          if (isVisible) {
            s.hide();
          } else {
            s.show();
          }
        }
      });
      event.preventDefault();
    }

API references:

• http://api.highcharts.com/highcharts/plotOptions.column.pointPadding
• http://api.highcharts.com/highcharts/plotOptions.column.pointPlacement
• http://api.highcharts.com/highcharts/plotOptions.column.showInLegend
• http://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick