CODEWITHSUNDEEP
highcharts
Andy Hansen
Andy Hansen

Reputation: 313

Prevent label text wrapping in Highcharts styled mode

How do I prevent labels from wrapping in Highcharts styled mode? A partial solution that I found is to use the useHTML flag and set white-space: nowrap; with css, but then the labels are rendered on top of the tooltip. If I set useHTML to false, then highcharts automatically adds line breaks. I've included a code snippet to illustrate the problem. Just run the snippet and hover your mouse over the bottom bar.

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        borderWidth: 1
    },

    title: {
        text: 'No space reserved for X axis labels'
    },

    credits: {
        enabled: false
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['Product 1', 'Product 2', 'Yet another product with a long label'],
        labels: {
            rotation: 0,
            align: 'left',
            reserveSpace: false,
            x: 2,
            y: -5,
            useHTML: true
        },
        tickWidth: 0
    },

    series: [{
        data: [39.9, 71.5, 50.4],
        dataLabels: {
            enabled: true
        }
    }]
});
@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-axis-labels span {
  white-space: nowrap!important;
}
<script src="https://code.highcharts.com/js/highcharts.js"></script>

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

Upvotes: 1

Views: 1891

Answers (1)

pawel_d
pawel_d

Reputation: 3070

To make it work with styled version of Highcharts, you can wrap addLabel function of Tick prototype. Take a look at the example below.

Example:
http://jsfiddle.net/vsy8abLb/

Upvotes: 2

Related Questions