Configure Highcharts labels and plot lines

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 800px"></div>

JavaScript

Highcharts.chart('container', {
    xAxis: {
        categories: [
            'This is a very long label to test ellipsis functionality in Highcharts',
            'Another extremely long label to see how it behaves with ellipsis',
            'Short label',
            'Yet another long label to test the limits of the chart rendering',
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'A label that is long enough to potentially cause issues',
            'Short',
            'Medium length label',
            'A final long label to wrap up the test'
        ],
        labels: {
            //useHTML: true,
        }
    },

    yAxis: {
        plotLines: [{
            color: 'red',
            width: 2,
            value: 100,
            label: {
                //useHTML: true,
                text: 'This is a very long label for the plot line to test how it behaves when it overflows the container. It should either wrap or truncate depending on the configuration.',
                align: 'left',
                style: {
                    border: '1px solid black',
                }
            }
        }]
    },

    series: [{
        data: [29, 71, 106, 129, 144, 176, 135, 148, 216]
    }]
});