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

stem = "this one is a very long one "

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

Highcharts.chart('container2', {
    title: {
        text: 'labels with boxesToAvoid'
    },
    series: [{
            data: [4, 3, 5, 6, 2, 3],
            name: stem+'1',
            label: {
                boxesToAvoid: [{
                    left: 400,
                    top: 0,
                    right: 600,
                    bottom: 400,

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