High-Chart Multi-Panes и Полоса прокрутки

Question

Как добавить свиток с несколькими панелями?

Пожалуйста, посмотрите на скрипку, 3-я панель перекрывается

yAxis: [{
    title: { text: 'Coffee Cups'},
    height: '60%',
    offset: 0,
    lineWidth: 2
  }, {
    title: { text: 'Hazelnut Cups' },
    top: '65%',
    height: '60%',
    offset: 0,
    lineWidth: 2
  }, {
    title: { text: 'Choco Cups' },
    top: '130%',
    height: '60%',
    offset: 0,
    lineWidth: 2
  }]

Примечание: в моем сценарии это может быть 100 мультипанелей.

Answer 1

Сумма высот ваших осей Y больше чем 100%, что вызывает наложение.Вы не должны превышать 100%:

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Coffee Cups'
            },
            height: '33.33%',
            offset: 0,
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Hazelnut Cups'
            },
            top: '33.33%',
            height: '33.33%',
            offset: 0,
            lineWidth: 2
        }, {
            title: {
                text: 'Hazelnut Cups'
            },
            top: '66.66%',
            height: '33.33%',
            offset: 0,
            lineWidth: 2
        }]

Демонстрационная версия: http://jsfiddle.net/BlackLabel/g7uto6xc/

API Reference: https://api.highcharts.com/highstock/yAxis.height

РЕДАКТИРОВАТЬ:

После множества настроек был достигнут желаемый результат:

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/u293pvnj/