Search code examples
highchartsfreemarkerword-wrapyaxis

highcharts y-axis title wrap

I have a chart with varying heights based on a parameter, due to which the y-axis title gets cut off at the top when height becomes less than the title length.

The highchart api at http://api.highcharts.com/highcharts/yAxis.title specifies a style property where CSS styles for the title can be given, but the javascript wordWrap:'break-word' isn't working here.

My question is - Is there any property that can wrap the title of the the y-axis in such a case ?

Note: I searched SO and found a question - Highcharts Y-axis title text length is more than chart's height, but this doesn't answer my case as I don't have a static title and cannot have a
tag to force the line break.

Solution

  • Just add fixed width and step in the style:

        title: {
                enabled: true,
                text: 'very long title text here that will get cut off at the top when height becomes less than the length of the title',
                style: { 
                    font: 'bold 10pt "Arial Narrow"',                       
                    color: 'rgb(0,0,0)',
                    wordWrap:'break-word',
      // Add these        
                    width : "200px"
                }
            }

    your Fiddle updated here