Hide Crosshair Overflow

author(s): Rodrigo Radke

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div id="container"></div>

JavaScript

const hideCrosshairOverflow = () => {
	const crosshair = $('#container').find('.highcharts-crosshair');
	let newD = crosshair.attr('d').split(' L');

	newD.pop();

	crosshair.attr('d', newD.join(' L'));
};

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 0,
            beta: 0,
            depth: 10
        }
    },
    xAxis: {
        categories: ['SUPERVISOR', 'SUPERVISOR2'],
        crosshair: true
    },
    series: [{
        name: 'Valor venda',
        data: [7500, 2860]
    }],
    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        setTimeout(hideCrosshairOverflow, 0);
                    }
                }
            }
        }
    },
    credits: {
        enabled: false
    }
});