Exporting a styled chart is behaving unexpectedly

[Kodeblox]

Hi

I have been using Highcharts for a while now and till a couple of days ago was themeing them using JS. Recently I moved from Angular to VueJs and decided to use CSS to style my charts so that I can better UX while changing themes. Everything works great on my website but on trying to export or print, I get a black output.

Now, I have seen lots of questions about this in the forums and I have tried a few of them but none of them solves my problem. Some either solve it partially and some are so hacky that I am worried they might break anytime. First let me tell you about my setup.

I am using Vuetify as my base framework over Vue to style my website. In order to have smooth transition if themes in Highcharts, I have added extra classes `theme--light` and `theme--dark` over the classes used by highcharts. I have noticed that if I remove these classes, Highcharts is able to export nicely.

I have also tried to add `this.container.classList.add('theme--dark')` in the `exporting.chartOptions.chart.events.load` method and while this somewhat works for exporting images (it doesn't take the font I specified), it still causes a black printout. I have tried using offline exporter but it didn't have any noticeable effect.

I really want this to be solved and as such I am fully replicated by frontend setup in https://codesandbox.io/s/elitebgs-chart-export-pbnnc. Its an open source project license under Apache2 so I able to share the source code.

A few things about the project:
Please run: `npm run lint:fix` if you run into any linting issues
Run `npm run startdev` to run and watch for changes
Please go to https://pbnnc-3012.sse.codesandbox.io/s ... 5be0b97df1 to see the graphs and use the file at https://codesandbox.io/s/elitebgs-chart ... eChart.vue to find the source of the above link.

Let me know if anything else will be needed.

[sebastian.h]

Hi Kodeblox,
Thanks for contacting us with your question.

Your example is too complicate for tests, could you prepare a simplied version of your case?

Here are templates from our official Vue wrapper:
https://github.com/highcharts/highchart ... line-demos

I'm waiting for news from you.
Best regards.

[Kodeblox]

Hi,
Thanks for responding. Sorry for not responding earlier. I have created a sandbox with the minimal requirements which reproduces this issue. https://codesandbox.io/s/vuetify-theme- ... s/Home.vue . Please note that you can change the theme of the sandbox which changes the theme of the chart too. This is essentially possible due to Line 47 in https://codesandbox.io/s/vuetify-theme- ... rc/App.vue. Please see my OP to get a detailed understanding of what the various CSS classes does.

[sebastian.h]

Hi,
Thanks for the examples and clarification.

Let's summarize how I understand your problem, you use the Vuetify library to set the theme of the application and it overwrites your styles in Highcharts and when you export you get a black printout, yes?

Do you want to give your charts some theme or other styles? If so, you can do it in accordance with this documentation:
https://www.highcharts.com/docs/chart-d ... yle/themes
https://www.highcharts.com/docs/chart-d ... yle-by-css

Best regards.

[Kodeblox]

Hi
I am able to style my charts exactly how I want. My problem is that while exporting, the output results as black. Try and export the chart in the codesandbox I provided and you will see what I mean.

Regards

[sebastian.h]

Hi Kodeblox,
Okay, I can reproduce this problem.

I think it's due more to the styling library than to the highcharts setup itself.
I don't know how much I could solve your problem, maybe you can try to look for more help on a more general forum like Stackoverflow where there are more specialists from the Vue framework.

If you have any questions you can reach me any time.
Best regards.

[Kodeblox]

Hi Sebastian

I don't think its the problem of the styling library, rather its a problem when the highcharts' theme class is prepended with another class. I have made a change wherein I am not adding the underlying style library's class, but my own class and you can see that the problem persists https://codesandbox.io/s/vuetify-theme- ... rc/App.vue

Regards

[sebastian.h]

Hi,

I tried to simplify your example even more and it looks like you didn't load the export module.
Take a look below, I think it's okay now.

Live demo:
https://codesandbox.io/s/vuetify-theme- ... /Chart.vue

API References:
https://github.com/highcharts/highchart ... ts-modules

Let me know if this is works.
Best regards.

[Kodeblox]

I am getting weird outcomes. The link that you shared right now worked and I couldn't figure out why making the exact same change in my sandbox was not working. Then your link started returning a black box and my sandbox started working.

What is even weird is that the import shouldn't be needed in the component as I am already importing them at https://codesandbox.io/s/vuetify-theme- ... rc/main.js

[Kodeblox]

Just to consolidate the links:
1. My initial link where the theme changer is working and the export is black https://codesandbox.io/s/vuetify-theme- ... /Chart.vue
2. My second sandbox where I have using a non themeing class to show that the UI framework didnt matter, which was not working earlier but now suddenly working https://codesandbox.io/s/vuetify-theme- ... /Chart.vue
3. Your last link which worked for me initially but then stopped working for no reason https://codesandbox.io/s/vuetify-theme- ... /Chart.vue

[sebastian.h]

Hi,
My yesterday's demo stopped working for me too, I'm confused.

I guess the best way would be to build application again by starting with this simple demo and see when it stops working and if an error occurs.
More detailed debugging is beyond the scope of support this forum.

Simple demo:
https://codesandbox.io/s/highcharts-vue-demo-fv7m6

Good luck and if there are any bugs you can report them on GitHub.
Best regards.

[sebastian.h]

Hi again,

After testing the example in codesandbox, we noticed that the style source leads to a file that has style as default Highcharts but everything is wrapped in a custom class, if you fix it, it should work.

A simplified example showing how it works, there is no red background in the exported image because the graph is not made in the same place and the parent class does not match.
https://jsfiddle.net/BlackLabel/p7sc6jm3/

Here is an example where class is set as usual.
https://jsfiddle.net/BlackLabel/p7sc6jm3/1/

Hope this helps solve your case
Best regards.

[Kodeblox]

but everything is wrapped in a custom class,

When you say "custom class", do you mean the theme--light and theme--dark classes?

[sebastian.h]

Hi,

I mean class="some-class" you will find it on your demo.

Regards.

[Kodeblox]

Hi

So, yesterday after experimenting a bit more I found that I can add a class in the chartOptions itself. And adding that class doesn't create a black box on export anymore. This is the sandbox which has the change https://codesandbox.io/s/vuetify-theme- ... /Chart.vue and you can see that the export now works (except 1 problem below).

This also works with my theme changer except 1 thing. The fonts are wrong in the export. I use ""Roboto", "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;" as my font family in the browser and it works there but the exported font seems to be using DejaVuSerif as the font. Do you have any ideas why is this happening and how I can set my font.

Thanks a lot for sticking through my queries till now.