Highcharts

[awb99]

yAxis: [{
height: '50%',
resize: {
enabled: true
}
}, {
height: '50%',
top: '50%'
}]

[awb99]

To use the axis resizer it is required to include the module modules/drag-panes.js, or js/modules/drag-panes.js if you are using styled mode.

[awb99]

(async () => {

const data = await fetch(
    'https://demo-live-data.highcharts.com/aapl-ohlcv.json'
).then(response => response.json());

// split the data set into ohlc and volume
const 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]
    ]];

for (let i = 0; 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
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 4
    },

    title: {
        text: 'AAPL Historical'
    },

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

    tooltip: {
        split: true
    },

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

})();

[awb99]

Remove :box from ui-highcharts. Instead add class and style property. to options. This is to better control styling.

[awb99]

Chart-spec will generate the following sizes:

Only main chart: 100%
One extra chart: 80% 20%
2 extra charts: 80% 20% 20% => second bottom.chart needs scrolling!

[awb99]

chart.zoomType decides the dimensions by which the user can zoom by dragging the mouse. The possible values for this are x, y or xy.

var chart = {
zoomType: 'x'
};

chart.xAxis[0].setExtremes(1327449600000,1422144000000, false)
chart.yAxis[0].setExtremes(10, 20)

Highcharts.setOptions({
global: {
useUTC: false
}

time: {
timezone: 'America/New_York'
},

[awb99]

Timezone UTC
Pointplot with filter.
Csv loader. Goldly.

[awb99]

Line-plot:
Animation: false
step: "left", "center", "right”
Dashstyle
Solid
Dot
ShortDot
Dash
ShortDash
LongDash

DashDot
ShortDashDot
LongDashDot

LongDashDotDot
ShortDashDotDot

:lineWidth: number
Pixel width of the graph line.
Defaults to 2.
:marker