Отображение минималистской биржевой диаграммы Highcharts

Question

У меня есть биржевая диаграмма, которая обновляется, но я пытаюсь отобразить ее во всей области. Я не могу отключить полосу прокрутки, потому что она останавливает движение линейного графика, она замаскирована. Рабочий код в этом jsfiddle, есть идеи, как сделать так, чтобы линия полностью соответствовала области? В идеале я бы отображал график на 50px.

https://jsfiddle.net/garynobles/5Lsxtqu4/5/

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

<div id="time_test" style="height: 150px; min-width: 310px; border-style:solid;"></div>

<script>
// Create the chart
Highcharts.stockChart('time_test', {
  chart: {
    backgroundColor: '#343a40',
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },

    events: {
      load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.round(Math.random() * 100);
          series.addPoint([x, y], true, true);
        }, 1000);
      }
    }
  },

  time: {
    useUTC: false
  },

  //     rangeSelector: {
  //   enabled: false
  // },
  rangeSelector: {
    buttons: [{
      count: 30,
      type: 'minute',
      text: ''

    }],
    inputEnabled: false,
    selected: 0
  },

  title: {
    text: 'Live random data'
  },

  exporting: {
    enabled: false
  },

  series: [{
    name: 'Random data',
    data: (function() {
      // generate an array of random data
      var data = [],
        time = (new Date()).getTime(),
        i;

      for (i = -999; i <= 0; i += 1) {
        data.push([
          time + i * 1000,
          Math.round(Math.random() * 100)
        ]);
      }
      return data;
    }())
  }],

  credits: {
    enabled: false
  },

  scrollbar: {
    barBackgroundColor: '#343a40',
    barBorderRadius: 7,
    barBorderWidth: 0,
    buttonBackgroundColor: '#343a40',
    buttonBorderWidth: 0,
    buttonBorderRadius: 7,
    trackBackgroundColor: 'none',
    trackBorderWidth: 1,
    trackBorderRadius: 8,
    trackBorderColor: '#343a40'
  },

  xAxis: {

    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    title: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0,
    minPadding: 0,
    maxPadding: 0
  },

  yAxis: {
    lineWidth: 0,
    minorGridLineWidth: 0,

    lineColor: 'transparent',
    gridLineColor: 'transparent',
    labels: {
      enabled: false
    },
    title: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0,
    minPadding: 0,
    maxPadding: 0
  },

  navigator: {
    enabled: false
  },

});

</script

Answer 1

"любые идеи, как сделать так, чтобы линия полностью соответствовала площади"

Да, удалите все ненужные опции, такие как:

rangeSelector: {
  enabled: false,
},
scrollbar: {
  enabled: false,
},

Тогда действительно используйте все оставшееся пространство с этими параметрами:

chart: {
  spacingBottom:0,
  spacingTop:0,
  spacingLeft:0,
  spacingRight:0
},

Fiddle