0

In the Documents symbol can pass url() for displaying custom image symbol, but if my image is square and I need it to display as rounded shape, is HighCharts supporting this or I need custom css to do that?

Travis Su
  • 670
  • 2
  • 7
  • 17

1 Answers1

2

Highcharts only gives the possibility to set custom marker symbol using url(), but under the hood that symbol occurs as an SVGImageElement, so basically it is not able to apply the for example border-radius parameter on it. The simplest way to achieve the effect you need is by editing the image. Also you can dynamically add the <rect> element for every symbol and set it as a clipRect of a specific image.

Best regards!

daniel_s
  • 3,635
  • 1
  • 8
  • 24
  • can you provide a working sample for using ``? much appreciated. – Travis Su Jul 02 '18 at 13:20
  • hi @TravisSu, sorry for late. Here is the topic, which should be helpful for you: https://stackoverflow.com/questions/7430580/setting-rounded-corners-for-svgimage . There you can find the example and description how to implement it. – daniel_s Jul 06 '18 at 08:40
  • I copy pasted the answer code and plug-in with my own image url but it doesn't show up anything.... – Travis Su Jul 06 '18 at 18:36
  • This example shows how to use `clipPath` parameter combined with SVG image, so It's not general solution for all issues. You need to refactor the code and adjust it to your expectations. – daniel_s Jul 06 '18 at 21:41