CODEWITHSUNDEEP
javascriptsvghighchartsreact-highcharts
Bernardo Marques
Bernardo Marques

Reputation: 1055

SVGRenderer function

I have no experience using SVG. I'm trying to add an icon via the SVGRenderer function but I'm not able to change some properties of the icon. I was able to recreate the icon via the path but I can't change height or width of the icon, I want to make it smaller.

I'm using react-highcharts wrapper. This is the function call:

Highcharts.SVGRenderer.prototype.symbols.stockTools = function() {
      var path = [
        "M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
      ];
      return path;
    };

Here is documentation for that function and here a live demo.

Upvotes: 0

Views: 939

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I am afraid that it is impossible to achieve it in this way.

Highcharts.SVGRenderer.prototype.symbols this function returns a path. Each of these values in the array means the next position where the line should be drawn - in really basic words.

Check this example to see what I am talking about: https://jsfiddle.net/BlackLabel/c38ofw5h/

for ['M', 0, 0 ] it's like {x: 0, y: 0} , so starts points, next ['L', 100, 100] it's like the drawn line to {x: 100, y: 100}. You pasted a complicated array of coordinates to drawn it, with 'fixed height'.

It is also very good explained here: Extend highcharts renderer symbols to have plus sign

Of course, the SVG element could be customized. But as an HTML element. It is very good explained here: https://css-tricks.com/scale-svg/

So, with the above information, I think that a better approach is to create a custom label as an HTML element.

Demo: https://codesandbox.io/s/costume-icon-mfg7z

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

API: https://api.highcharts.com/highstock/chart.events.render

Upvotes: 1

Related Questions