CODEWITHSUNDEEP
highcharts
TDo
TDo

Reputation: 744

Highcharts - Markers in line charts move up when leaving hovering

I am trying to use Font Awesome icons as markers in HighCharts line chart. With help from fellow developers on Stack Overflow, I have managed to do that. One problem left is that now, whenever I hover over the markers and then leave hovering, they just move up a bit from the line and stay there forever. I really have no idea why.

This is the fiddle: https://jsfiddle.net/vf0g4u5k/12/. Appreciate any help.

The plug-in to use Font Awesome with HighCharts

(function (H) {
    function symbolWrap(proceed, symbol, x, y, w, h, options) {
        if (symbol.indexOf('text:') === 0) {
            var text = symbol.split(':')[1],
                svgElem = this.text(text, x, y + h)
                .css({
                    fontFamily: '"Font Awesome 5 Free"',
                    fontSize: (h * 2 ) + "px"
                });
            
            if (svgElem.renderer.isVML) {
                svgElem.fillSetter = function (value, key, element) {
                    element.style.color = H.Color(value).get('rgb');
                };
            }
            return svgElem;
        }
        if (symbol.indexOf('textn:') === 0) {
            var text = symbol.split(':')[1],
                svgElem = this.text(text, x, y + h)
                .css({
                    fontFamily: '"Font Awesome 5 Free"',
                    fontSize: (h * 2 ) + "px",
                    fontWeight: 900
                });
            
            if (svgElem.renderer.isVML) {
                svgElem.fillSetter = function (value, key, element) {
                    element.style.color = H.Color(value).get('rgb');
                };
            }
            return svgElem;
        }
        
        
        return proceed.apply(this, [].slice.call(arguments, 1));
    }
    H.wrap(H.SVGRenderer.prototype, 'symbol', symbolWrap);
    if (H.VMLRenderer) {
        H.wrap(H.VMLRenderer.prototype, 'symbol', symbolWrap);
    }
    
    // Load the font for SVG files also
    H.wrap(H.Chart.prototype, 'getSVG', function (proceed) {
        var svg = proceed.call(this);
        svg = '<?xml-stylesheet type="text/css" ' +
            'href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" ?>' + 
            svg;
        return svg;
    });
}(Highcharts));

Upvotes: 0

Views: 231

Answers (2)

zypherscript
zypherscript

Reputation: 246

You can adjust your custom marker settings by setting translateX and translateY like this

            var text = symbol.split(':')[1],
                svgElem = this.text(text, x, y)
                .attr({
                  translateY: h,
                  translateX: -1
                })
                .css({
                    fontFamily: '"Font Awesome 5 Free"',
                    fontSize: (h * 2 ) + "px"
                });

Upvotes: 0

TDo
TDo

Reputation: 744

I ended up doing like this. Posting in case it may help someone else.

point: {
                        events: {
                            mouseOut: function() {
                                var index = this.index
                                for( var series of this.series.chart.series){
                                    for(var j=0;j<series.points.length;j++){
                                        if(j === index && series.points[j].graphic){series.points[j].graphic.attr({'translateY': 8})}
                                    }
                                };
                            }
                        }
                    }

Upvotes: 1

Related Questions