SVGRenderer function

Question

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.

score 1 · Accepted Answer · answered Apr 21 '20 at 09:14

1

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

answered Apr 21 '20 at 09:14

Sebastian Wędzel

11,417
1
6
16

Is it possible to make icon position fixed relative to right side instead of left side? When you click the tool button the menu expansion forces the buton to overlap other menu itens. – Bernardo Marques Apr 22 '20 at 17:42
@BernardoMarques You can attach the symbol to some other elements, like here: https://codesandbox.io/s/costume-icon-h9iqi – Sebastian Wędzel Apr 23 '20 at 09:51
Thanks, that worked as expected. The only thing I can't get to work is the color, the .css() call doesn't affect icon color, I have also tried incolor call on svg element but it also didn't work. – Bernardo Marques Apr 23 '20 at 13:32
1

@BernardoMarques you can set the fill attribute in the HTML inline styling. Demo: https://codesandbox.io/s/costume-icon-nqjx0 – Sebastian Wędzel Apr 23 '20 at 13:39

SVGRenderer function

1 Answers1