Download SVG / PNG does not include images / custom annotations

[eyeswideopen]

Description

When downloading a chart with the builtin "Download as SVG / PNG" feature custom images (as seen in the official documentation: https://apexcharts.com/react-chart-demos/line-charts/line-chart-annotations/ ) are not included in the resulting image.

Steps to Reproduce

Try yourself in the official example: https://apexcharts.com/react-chart-demos/line-charts/line-chart-annotations/ download as png instagram icon not included

Expected Behavior

include images

Screenshots

chart:

resulting png:

Reproduction Link

https://apexcharts.com/react-chart-demos/line-charts/line-chart-annotations/

Thanks for the awesome library!!

[Loque18]

I am having the same issue :(

[lunchev]

+1 - same issue

[ChamkhiAnas]

• 2 the same issue

[sajornet]

+1

[abyshake-anand]

Has anyone found a solution to this?

[wojciechk]

+1

[chrisjkellett]

One workaround I have found is using data URIs directly instead of relying on file paths.

Here's an example of how you can do this:

annotations: {
  images: {
    path: 'data:image/svg+xml;base64,<YOUR_SVG_AS_BASE64>'
  }
}

Perhaps this could be solved in the apex library directly by converting these paths before initial rendering of the chart.

[juanxodj]

One workaround I have found is using data URIs directly instead of relying on file paths.

Here's an example of how you can do this:

annotations: {
  images: {
    path: 'data:image/svg+xml;base64,<YOUR_SVG_AS_BASE64>'
  }
}

Perhaps this could be solved in the apex library directly by converting these paths before initial rendering of the chart.

Thank you so much! This worked for me with PNG images!