Значения оси Y, соединяясь со свечами в высоких диаграммах

Question

Привет всем Я стараюсь сделать разделитель между осью Y и свечами, но не смог его достичь. Я выделил область, которую я хочу исправить желтым цветом. Я не уверен, что это возможно. Любая помощь будет оценена.

Вот JsFiddle Ссылка: Demo

Вот сценарий

$(function() { 
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) { 

     // split the data set into ohlc and volume 
     var ohlc = [], 
      volume = [], 
      dataLength = data.length, 
      // set the allowed units for data grouping 
      groupingUnits = [[ 
       'week',       // unit name 
       [1]        // allowed multiples 
      ], [ 
       'month', 
       [1, 2, 3, 4, 6] 
      ]], 

      i = 0; 

     for (i; i < dataLength; i += 1) { 
      ohlc.push([ 
       data[i][0], // the date 
       data[i][1], // open 
       data[i][2], // high 
       data[i][3], // low 
       data[i][4] // close 
      ]); 

      volume.push([ 
       data[i][0], // the date 
       data[i][5] // the volume 
      ]); 
     } 


     // create the chart 
     $('#container').highcharts('StockChart', { 

      rangeSelector: { 
       selected: 1 
      }, 

      title: { 
       text: 'AAPL Historical' 
      }, 

      yAxis: [{ 
       labels: { 
        align: 'right', 
        x: -3 
       }, 
       title: { 
        text: 'OHLC' 
       }, 
       height: '60%', 
       lineWidth: 2 
      }, { 
       labels: { 
        align: 'right', 
        x: -3 
       }, 
       title: { 
        text: 'Volume' 
       }, 
       top: '65%', 
       height: '35%', 
       offset: 0, 
       lineWidth: 2 
      }], 

      series: [{ 
       type: 'candlestick', 
       name: 'AAPL', 
       data: ohlc, 
       dataGrouping: { 
        units: groupingUnits 
       } 
      }, { 
       type: 'column', 
       name: 'Volume', 
       data: volume, 
       yAxis: 1, 
       dataGrouping: { 
        units: groupingUnits 
       } 
      }] 
     }); 
    }); 
}); 

Answer 1

Вы можете сделать это с yAxis.offset. С помощью этого параметра вы можете сдвинуть ось дальше/ближе к области графика. Например:

yAxis: [{ 
    labels: { 
     align: 'right', 
     x: -3 
    }, 
    title: { 
     text: 'OHLC' 
    }, 
    height: '60%', 
    lineWidth: 2, 
    offset: 20 //new value 
    }, { 
    labels: { 
     align: 'right', 
     x: -3 
    }, 
    title: { 
     text: 'Volume' 
    }, 
    top: '65%', 
    height: '35%', 
    offset: 0, 
    lineWidth: 2 
    }], 

Вы также можете играть с yAxis.labels размещения и yAxis.title размещения.

Вам нужно будет поиграть с ним, чтобы найти свою идеальную форму, но это должно заставить вас начать.

Answer 2

вы установили этикетки в точке х: -3 поэтому те сливаются в графике. Вместо этого разместите их как

labels: { 
       align: 'right', 
       x: 20 
      } 

См Updated fiddle here