How to align fonts Amazing characters on Highcharts scatterplots?

Using the Highcharts example posted here , how can you make sure that the Awesome font icons will be located exactly in the middle of the data point, for example, native characters / markers? It is called the so-called in the data series and uses the "plugin", which is located in the same Fiddle:

marker: {
    symbol: 'text:\uf183' // fa-male
}

Using this example, if you turn the series on / off several times or zoom in / out, the icons are no longer visually accurate, often displayed above the actual coordinate. In the image below, you assume that the data point was> 50 based on the icon.

Icons outside the center

Their SVGRenderer example here does not seem to be executed.

+4
2

- . :

        var text = symbol.split(':')[1],
            svgElem = this.text(text, x, y)
            .attr({
                translateY: h, // translate marker
                translateX: -1
            })
            .css({
                fontFamily: 'FontAwesome',
                fontSize: h * 2
            });

. : http://jsfiddle.net/2A7Zf/29/

+3

XL- (.. ) (, / x , , , /% s), :

          translateX:  -w/2 + options.radius/4 - 3
0

Source: https://habr.com/ru/post/1605825/


All Articles