truncate labels highcharts

http://stackoverflow.com/questions/19225552/highcharts-long-labels

by Sree K

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 200px; margin: 0 auto"></div>

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Bla bla bla label, bla bla Bla bla bla label, bla bla Bla bla bla label Bla bla bla label, bla ', 'Bla bla bla label, bla bla', 'Bla bla bla label, bla bla', 'Bla bla bla label Bla bla bla label, bla bla Bla bla bla label, bla bla, bla bla', 'Bla bla bla label, bla bla', 'Bla bla bla label, bla bla'],
                labels:{
                    formatter: function(){
                        if (this.value.length > 10){
                            return this.value.substr(0,10) + "...";
                        }else{
                             return this.value;   
                        }                        
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Temperature'
                },
                labels: {
                    formatter: function() {
                        return this.value +'°'
                    }
                }
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: 'Tokyo',
                marker: {
                    symbol: 'square'
                },
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
    
            }, {
                name: 'London',
                marker: {
                    symbol: 'diamond'
                },
        ...