Search code examples
amchartsamcharts4bullet

AMCharts bullets converted to gibberish on small charts


I've searched through the entire AMCharts 4 bullet documentation as well as numerous Google pages, but I am yet to find the answer. When chart is squeezed to a mobile screen, bullet labels above bars get updated to some complete gibberish (as in the example below left). Those are suppose to be various numeric values (example on the right), including some with a decimal point. No percentage or other symbols.

AMCHarts bullet turned random text enter image description here

The text actually gets swapped from normal numbers to the 'processed food' as the screen is being resized. Logic dictates that I must be missing some setting that prevents this sort of undesirable behaviour.

Any help is highly appreciated!


Solution

  • The "gibberish" is supposed to be an ellipsis. It's likely that your page isn't encoded to UTF-8 or the font you're using does not have the Unicode character for an ellipsis.

    You can either double-check your encoding, or, if you don't want the ellipsis as at all, disable truncate on your labels. Assuming you're using a LabelBullet for your column labels:

    var valueLabel = series.bullets.push(new am4charts.LabelBullet());
    // ...
    valueLabel.label.truncate = false;