6

I'm having a problem with the truncation of the highcharts x-axis labels. In my website when the labels truncate it shows this weird characters in this image

My website

When I use the same exact code in JSFiddle it seems to work ok and instead of the weird characters it displays the ... like it should

JSFiddle

Has anybody had the same problem? I'm using the same imports and the same jQuery version in JSFiddle.

I thought this may be a problem of encoding but I'm using UTF-8 for the encoding as in the JSFiddle.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Here is the JSFiddle link, I hope that somebody can help me.

Thanks in advance!

pedromendessk
  • 3,538
  • 2
  • 24
  • 36
  • Make sure your HTML file is also encoded in UTF-8. And try to use file directly from Highcharts CDN, not local files - maybe when saving file it was converted to CP1250 or something similar. – Paweł Fus Apr 17 '15 at 11:26
  • I have already tried that but the result was the same. I even set the tomcat encoding to UTF-8, but nothing seems to work. – pedromendessk Apr 17 '15 at 11:34
  • I still expect that generated HTML is not UTF-8. Try this: `xAxis: { categories: Highcharts.getOptions().lang.months } ` and let me know if you see the same issue. – Paweł Fus Apr 17 '15 at 11:53
  • Yes it still has the same issue :/ – pedromendessk Apr 17 '15 at 12:39
  • We have this same issue. Also, when we get the rendered page chart to use the ellipses the exported chart (using latest java+phantomJS build) still has the invalid characters. We solved it by modifying the highstock.js code to use '...' (3 periods) instead of the ellipses character. – wergeld Apr 17 '15 at 14:28
  • I have the same issue, but my `highcharts.js` is already in UTF-8. The HTML, however says it is in ascii, but I guess is one of this "ascii is a subset of UTF-8" things, as I converted it to UTF-8 and it is still saying it is ascii. – David Torres Apr 05 '16 at 12:01

2 Answers2

3

Ok, after all Paweł Fus was right on the first comment he made

Make sure your HTML file is also encoded in UTF-8. And try to use file directly from Highcharts CDN, not local files - maybe when saving file it was converted to CP1250 or something similar.


The problem was solved by saving the highcharts libs as UTF-8.

To do that I had to change the encoding of eclipse like it's said here How to change default text file encoding in Eclipse? and then I saved the .js files.

Community
  • 1
  • 1
pedromendessk
  • 3,538
  • 2
  • 24
  • 36
1

try this: overflow:"justify" for labels that are over flowing in your case.

Here is the reference: http://api.highcharts.com/highcharts#xAxis.labels

See jsFiddle

The Guest
  • 698
  • 11
  • 27