Highcharts Renderer Fiddle

Renderer.label gives you word wrap simply by adding a CSS width property in HighCharts via StackOverflow question.

by J. Albert Bowden

HTML

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

<div id="container" style="height: 300px; width: 500px; border: 1px solid silver"></div>

<p><cite><a href="https://stackoverflow.com/questions/29071649/facing-word-wrap-issues-with-highcharts-chart-renderer-text?rq=1">Renderer.label gives you word wrap simply by adding a CSS width property:</a></cite></p>

JavaScript

var ren = new Highcharts.Renderer(
    document.getElementById('container'),
    500,
    300
);
    
ren.label('The quick brown fox jumps over the lazy dog', 100, 100)
    .attr({
        'stroke-width': 1,
        stroke: 'blue',
        fill: '#EFEFEF'
    })
.css({
    width: '100px'
})
    .add();