BuySell Form

// After loading Highcharts and the plugin
Highcharts.stockChart('chart', {
    chart: {
        zooming: {
            type: 'x'
        }
    },
    buySell: {
        enabled: true,
        title: 'Trading Form',
        height: 400,
        width: 400,
        button: {
            text: 'Buy | Sell',
            align: 'left',
            verticalAlign: 'top',
            x: 20,
            y: 8,
            theme: {
                fill: '#ffffff',
                stroke: '#0056b3',
                'stroke-width': 1,
                padding: 8,
                r: 4,
                style: {
                    color: '#000000',
                    cursor: 'pointer',
                    fontSize: 14,
                    fontWeight: '600'
                },
                states: {
                    disabled: {
                        style: {
                            color: '#cccccc'
                        }
                    },
                    hover: {
                        fill: '#e6e6e6'
                    },
                    select: {
                        fill: '#e6e9ff',
                        style: {
                            color: '#000000',
                            fontWeight: 'bold'
                        }
                    }
                }
            }
        },
        persistence: {
            enabled: true,
            key: 'buysell-form-data'
        }
        events: {
            onAfterInit: function (buySell) {
                console.log('BuySell initialised', buySell);
            },
            onBeforeSubmit: function (data, buySell) {
                console.log('BuySell before form submit', data, buySell);
            },
            onAfterSubmit: function (data, buySell) {
                console.log('BuySell after form submit', data, buySell);
            },
            onOpen: function (buySell) {
                console.log('BuySell form opened', buySell);
            },
            onClose: function (buySell) {
                console.log('BuySell form closed', buySell);
            },
            onFieldChange: function (field, value, buySell) {
                console.log('BuySell form's field changed', field, value, buySell);
            },
            onTabChange: function (value, buySell) {
                console.log('BuySell tab's field changed', value, buySell);
            }
        }
    },
    yAxis: [{
        height: '70%'
    }, {
        top: '75%',
        height: '25%'
    }],
    series: [{
        name: 'Symbol Data',
        type: 'candlestick',
        yAxis: 0,
        data: []
    }, {
        name: 'Volume',
        type: 'column',
        yAxis: 1,
        data: []
    }]
});