Add custom svg icons to chart

[elektropepi]

Hello!

I want to add svg icons onto the bars of a bar chart like this: http://jsfiddle.net/kqaudyoc/

But instead of a circle, it should be a svg element I want to supply. I know the renderer.image() functionality where I can pass an URL to display an image on the graph and it works fine (https://api.highcharts.com/class-refere ... erer#image).

But I am including material UI icons in my project (https://material-ui.com/components/icons/) and these react components only yield the SVG elements and I don't want to set a URL, rather supply a SVG element.

Can you help me?

Thanks in advance.

BR
Paul

[dominik.c]

Hello elektropepi!

We appreciate you reaching out to us!

In the demo you've provided we don't pass URL and we render the SVG element by ourselves. As far as I understand you'd like to do the same, right (to render or pass the SVG element to the chart)? You only need to pass the proper code into this points.forEach loop.

If it does not help please describe your problem more precisely, tell me how does your SVG code look like, and if it's possible to reproduce a demo of your issue, so I could test it

Best regards!

[elektropepi]

Thanks for your answer.

I'll try to be more clear: I want to pass a raw SVG string that will be then rendered onto the chart without needing to use Highcharts renderer API functions like circle(), path() etc.

Here a JS fiddle, in the load callback I've commented what I want to achieve: http://jsfiddle.net/elektropepi/y2t3kgL6/2/

Code: Select all

const svgIcon = `<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="black"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.88-11.71L10 14.17l-1.88-1.88a.9959.9959 0 00-1.41 0c-.39.39-.39 1.02 0 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7c.39-.39.39-1.02 0-1.41-.39-.39-1.03-.39-1.42 0z"></path></svg>`;

    // instead of this:
    chart.renderer.circle(x, y + toCenter, 10).attr({
      fill: '#BADA55',
      stroke: 'black',
      'stroke-width': 1,
      zIndex: 10
    }).add(series.group);
    
    // I want to do something like
    // chart.renderer.svg(x, y + toCenter, svgIcon).add(series.group);
    

BR
Paul

[dominik.c]

Hi again!

Thanks for the explanation!

We can use path for that: https://jsfiddle.net/BlackLabel/te5gwa24/

Simply pass the path from your SVG element to the renderer, you can also set all attributes there too.

API references:
https://api.highcharts.com/class-refere ... 02156#path
https://api.highcharts.com/class-refere ... 02156#path

Best regards!

[elektropepi]

Hi!

Thanks for your answer, yes I know of path(), but we want to use our <svg> files directly. The solution I've come up for now is encoding the svg element as a Base64 string:

Code: Select all

const svgString = '<svg>(...)</svg>'
const imageUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
chart.renderer
        .image(imageUrl, x, y, width, height);

This works for me for now, but it's not perfect (esp. since btoa() can't handle UTF-8 characters).

BR
Paul

[dominik.c]

Hi again!

We can do it as you did in the code above. And another very similar solution would be also to paste the URL to an SVG element in renderer.image method.

API references: https://api.highcharts.com/class-refere ... erer#image

Demo: http://jsfiddle.net/BlackLabel/sz7h0682/

We do not have a renderer.svg method that would work as you described. If none of the solutions that we've worked out here doesn't meet your expectations you can create a feature request on our GitHub. Here is the link: https://github.com/highcharts/highchart ... new/choose

Best regards!