How to display the prices and the volumes on a can

2019-08-20 17:19发布

问题:

The example on the demo page shows the prices and the volumes on 2 charts (http://www.highcharts.com/stock/demo/candlestick-and-volume).

Is it possible to render them in one chart only?

Thanks.

Update:

Ok, got it here: http://jsfiddle.net/eAFJ3/3/:

$('#container').highcharts('StockChart', {

        rangeSelector: {
            enabled: false
        },

        scrollbar: {
            enabled: false
        },

        navigator: {
            enabled: false
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            title: {
                text: 'OHLC'
            },
            lineWidth: 2
        },
        {
            title: {
                text: 'Volume',
                style: {
                    color: "#DDD"
                }
            },
            gridLineWidth: 0,
            opposite: true
        }],

        tooltip: {
            shared: true
        },

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

It takes a while to understand how to configure the charts... You have to define two Y axis and put the Volume xAxis as the first one in the series array. Otherwise it renders on top of the candles.