How to shrink space between numbers on y-axis in HighCharts

Question

I have a high chart that has two sets of data. The numbers on the y-axis for the data are to far apart from each other. I saw a solution for this a while back while looking for something else and can not find it for the life of me. So at the risk of repeating a question, How do I make the 160 in the red close together like in the yellow circle.

If I were to spell it out it looks like this 1 6 0 and I need to to look like this 160. Does anyone know what value controls that?

As requested, here is my code:

$(function() {

  $('container').highcharts({    
    chart: {
      zoomType: 'xy',
      width: 640
    },
    xAxis: [{
      categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
      crosshair: true,
      gridLineWidth: 1,
      labels: {
        style: {
          fontSize: '15px'
        }
      }
    }],
    yAxis: [{ // Primary yAxis
      gridLineWidth: 2,
      tickInterval: 20,
      fontWidth: 100,
      title: {
        text: '',
      }
    }, { // Secondary yAxis
      tickInterval: 20,
      title: {
        text: 'Total Retrun %',
        style: {
          color: "#000000",
          fontSize: '20px'
        }
      },
      labels: {
        format: '{value}',
        style: {
          color: "#000000",
          fontSize: '20px'
        }
      }
    }, ],
    legend: {
      layout: 'horizontal',
      align: 'center',
      x: 0,
      verticalAlign: 'top',
      y: 0,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
  itemStyle: {
        font: '15pt Helvetica',
      },
    },
    series: [{
      name: 'AirTransport',
      type: 'column',
      yAxis: 1,
      data: [22.5, -1.9, -32.6, 22.3, 33.4, -6.1, 19.2, 50.7, 28.1, -8.6],
      tooltip: {
        valueSuffix: ''
      },
      pointWidth: 35,
      color: "#b3b3b3"
    }, {
      marker: {
        fillColor: '#FFFFFF',
        lineWidth: 1,
        lineColor: null
      },
      name: 'S&P 500',
      type: 'line',
      yAxis: 1,
      data: [15.8, 5.5, -37.0, 26.5, 25.0, 2.1, 16.0, 32.4, 23.7],
      color: "#000000"
    }]
      });
});

Answer 1

As both wergeld and Halvor Strand pointed out, you need to more clearly define the font attributes for your labels.

Here's a revised set of values for your y-axes:

yAxis: [{ // Primary yAxis
  gridLineWidth: 2,
  tickInterval: 20,
  fontWidth: 100,
  title: {
    text: 'S&P value',
    style: {
      color: "#000000",
      font: '20px Arial, sans-serif'
    }
  }, 
  opposite: true,
  labels: {
    format: '{value}',
    style: {
      color: "#000000",
      font: '20px Arial, sans-serif'
    }
  }
}, { // Secondary yAxis
  tickInterval: 20,
  title: {
    text: 'Total Return %',
    style: {
      color: "#000000",
      font: '20px Arial, sans-serif'
    }
  },
  labels: {
    format: '{value}',
    style: {
      color: "#000000",
      font: '20px Arial, sans-serif'
    }
  }
}, ],

Note how I removed the fontSize attribute in favor of the font attribute. In my experiences, this is far more useful and versatile.

Here's the result from my changes:

I noticed and corrected a few other items in your code:

• You had both of your series set to display on the same yAxis value. I made them distinct.
• I added the attribute opposite: true to one of your y-axes so it would appear on the right (see the demo at http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/).
• Your declaration $('#container').highcharts({ was missing the # sign. This would prevent your chart from appearing in the <div> element with that ID.

Here's the revised fiddle: http://jsfiddle.net/brightmatrix/pLort0mj/

I hope this solves your problem and has been helpful for you!