jromero
Posts: 17
Joined: Wed Jan 19, 2022 1:54 pm
Contact: Website Twitter

Image not being exported.

Hi all!

I'm trying to add a logo to a chart the following way. I can see the logo in the chart the problem is when I'm exporting it as png, jpeg, pdf, instead of showing the logo just show an question symbol. I recreate the problem in a JS fiddle https://jsfiddle.net/jodarove/8w1jtoux/6/ because we are actually using vue highcharts. Any idea why this is happening? I would appreciate any leads. thank you.

Code: Select all

    "highcharts": "^9.1.2",
    "highcharts-vue": "^1.4.0",
here is a portion of the code

Code: Select all

            chart: {
              height: null,
              spacing: [10, 10, 15, 10],
              events: {
                load: function() {
                  this.container.classList.add('highchart-export')
                },
                render: function() {
                  this.renderer
                    .image(
                      'https://satellitedashboard.org/satellite-dashboard-logo-black.svg',
                      400,
                      0,
                      200,
                      19
                    )
                    .add()
                }
              }
            },
            rangeSelector: {
              enabled: false
            },
            navigator: {
              enabled: false
            }
          }
here is the link to the full code: https://github.com/CSIS-iLab/satellite- ... cChart.vue link because i get blocked if I pasted in here.

live chart
Screen Shot 2022-01-19 at 3.30.41 PM.png
Screen Shot 2022-01-19 at 3.30.41 PM.png (41.54 KiB) Viewed 1161 times
exported chart
chart(4).jpeg
chart(4).jpeg (39.86 KiB) Viewed 1161 times
José Romero
Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Image not being exported.

Hi jromero,

Thanks for contacting us with your issue.

Most likely there is a problem with an image format. I have converted it to base64 and it seems to be working fine.
Demo: https://jsfiddle.net/BlackLabel/6qcjfzk5/

I'm going to consult it with our export server expert and will get back to you with an answer asap.

Regards!
Mateusz Bernacik
Highcharts Developer
jromero
Posts: 17
Joined: Wed Jan 19, 2022 1:54 pm
Contact: Website Twitter

Re: Image not being exported.

Hi mateusz.b,

Thank you for this workaround! This is really helpful! I will keep an eye on what the export server experts says.

Best,
José
José Romero
Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Image not being exported.

Hi jromero,

I have run some tests and it seems like the problem is on our side. Most likely headless export server doesn't wait for the image to fully load and exports it like that. I don't know if that is a big deal for you, but I would recommend using base64 for some time. We are going to release new export server version soon and the problem should be gone on its own.

Regards!
Mateusz Bernacik
Highcharts Developer
jromero
Posts: 17
Joined: Wed Jan 19, 2022 1:54 pm
Contact: Website Twitter

Re: Image not being exported.

Hola mateusz.b,

Thank you for the update! I really appreciate it! I'm going to stick with the base64 till the new export server is release.
Thanks again!

Best,
José Romero
Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Image not being exported.

jromero,

You're welcome. In case you were curious if new export server already came out you can expect to find information about it here: https://www.highcharts.com/blog/posts/news/

In case of any further questions, feel free to contact us again.
Regards!
Mateusz Bernacik
Highcharts Developer
Shahrul
Posts: 7
Joined: Tue Feb 22, 2022 3:14 am

Re: Image not being exported.

Please let us know when new server has been updated
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Image not being exported.

Hi Shahrul,

Of course, I will post here all updates on export server topic.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”