Highcharts Demo

author(s): Torstein Hønsi

by halloleo

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>


<div id="container" style="width: 600px"></div>
<div id="container2" style="width: 600px"></div>

JavaScript

Highcharts.chart('container', {
        title: {
            text: 'labels with boxesToAvoid'
        },
        series: [{
                data: [4, 3, 5, 6, 2, 3],
            },
            {
                data: [1, 2, 3, 8, 5, 9],
                label: {
                    boxesToAvoid: [{
                        left: 0,
                        top: 0,
                        right: 400,
                        bottom: 400,

                    }],
                    style: {
                        "color": "red",
                        "font-size": 16
                    }
                }
            },
            {
                data: [9, 7, 11, 10, 8.5, 12],
            }
        ]
    }, function(chart) {
        //bonduary of the box
        chart.renderer.path(['M', 0, 0, 'L', 400, 0, 'L', 400, 400, 'L', 0, 400, 'Z']).attr({
            'stroke-width': 1,
            stroke: 'red'
        }).add()
    }

);

Highcharts.chart('container2', {
    title: {
        text: 'labels without boxesToAvoid'
    },
    series: [{
            data: [4, 3, 5, 6, 2, 3],
        },
        {
            data: [1, 2, 3, 8, 5, 9],
            label: {
                style: {
                    "color": "red",
                    "font-size": 16
                }
            }
        },
        {
            data: [9, 7, 11, 10, 8.5, 12],
        }
    ]
});