X-Axis pivot marks overlap the graph itself

Question

I am struggling with rotated x axis characters. If they are longer than 5-6 characters, they overlap the graph, as you can see here: http://jsfiddle.net/kmfT9/215/ If this is not displayed, you can reproduce the error inserted below the code in the jsfiddle window.

var chart = new Highcharts.Chart({ chart: { renderTo: 'container', marginLeft: 120 }, xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45 } }, yAxis: { lineWidth: 1, offset: 0, labels : { x: -20 }, title: { text: 'Primary Axis' }, tickWidth: 1 }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); 

Even when setting the y value in the labels property, this is only true for smaller labels.

Does anyone know a solution or what am I doing wrong?

Answer 1

You can try adding align: "right" to the x-axis label object.

eg.

 xAxis: {categories: ['Jan', '02 / 03/2011 ',' Mar ',' Apr ',' May ',' Jun ',' Jul ',' Aug ',' Sep ',' Oct ', 'Nov', 'Dec'], labels: {y: 20, rotation: -45, align: 'right'}},

Answer 2

Sometimes you have to do this, and customers know that this is not the best way, but maybe it will help someone). Since I know, HighCharts uses two ways to visualize charts. These are SVG (for example, supported browsers Chrome, IE> 8) and VML (supported by IE <= 8). Thus, each path contains points where this problem can be solved, what you need with a mild violation.

To solve this problem in SVG, you should find the buildText function and change at this point:

 // check width and apply soft breaks if (width) { ... } 

for example, to add a new single character:

 ... var words = span.replace(/\\/g, '\\ ').replace(/-/g, '- ').split(' '), ... tspan.appendChild(doc.createTextNode(words.join(' ').replace(/\\ /g, '\\').replace(/- /g, '-'))); ... 

If you want to make it work in VML. You can write your own function that does the same thing as the code in the buildText function:

 function softBreaks() { //if ie and vml hasSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect; if(!hasSVG) { //for each $.each($('.highcharts-axis > span > div'), function(index, value) { var width = value.parentNode.style.posWidth; var div = value; if (width) { var words = value.innerText.replace(/\//g, '/ ').replace(/\\/g, '\\ ').replace(/\./g, '. ').replace(/-/g, '- ').split(' '), tooLong, actualWidth, rest = []; while (words.length || rest.length) { //actualWidth = value.parentNode.offsetWidth; actualWidth = value.parentNode.scrollWidth; tooLong = actualWidth > width; if (!tooLong || words.length === 1) { // new line needed words = rest; rest = []; if (words.length) { div = document.createElement("div"); value.parentNode.appendChild(div); if (actualWidth > width) { // a single word is pressing it out width = actualWidth; } } } else { div.removeChild(div.firstChild); rest.unshift(words.pop()); } if (words.length) { div.appendChild(document.createTextNode(words.join(' ').replace(/\/ /g, '/').replace(/\\ /g, '\\').replace(/\. /g, '.').replace(/- /g, '-'))); } } } }); } } 

And after that you should call this function when loading the chart www.highcharts.com/ref/#chart-events--load (sorry, new user). If you have several diagrams on the page, you can pass the identifier of the parameter diagram to the softBreaks () function.