manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Exporting chart to pdf or png shows different color.

Hello,

I am using highcharts version 5.0.14.
I have set the styled mode to true. When i render the chart it correctly takes the color based on the css file.
But when i export the chart to pdf or png it shows a different color. I think it takes default colors.

I have created a demo here . Please try to export to png or pdf and you can see the colors are different than the actual chart.

https://jsfiddle.net/banupriya_d/wk0ryL7h/4/

Please help us resole this.

Thanks!
Regards,
Manigandan
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Exporting chart to pdf or png shows different color.

Hi,

Thanks for contacting us with your question!

As you can read here: http://code.highcharts.com/
VERSION 7 AND ABOVE
As of version 7 styled mode is no longer served as a separate set of files.
It is instead enabled through an option named chart.styledMode.
You can read more about styled mode at Styled mode - styling by CSS.

VERSION 5 AND 6
If you are styling your charts using CSS, load the javascript files from the /js/ directory.
For these files, presentational code is removed, and CSS is required to style the chart.

Live demo:
https://jsfiddle.net/BlackLabel/0w31j9q8/

Kind Regards
manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Re: Exporting chart to pdf or png shows different color.

Thanks for the response. I will try and let you know in case of any queries.
Regards,
Manigandan
manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Re: Exporting chart to pdf or png shows different color.

Hi,

Ours is an angular library and we import highcharts as angular modules.

I additionally added the below to the "scripts" section in angular.json to load the js files you had specified.

"node_modules/highcharts/js/highcharts.js",
"node_modules/highcharts/js/modules/exporting.js",
"node_modules/highcharts/js/modules/export-data.js"

But when i run the application it says a error from highcharts

"Highcharts already defined in the page
This error happens if the Highcharts namespace already exists when loading Highcharts or Highstock.

This is caused by including Highcharts or Highstock more than once.

Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if using the Chart and StockChart constructors in combination,
only the highstock.js file is required."

So looks like the Highcharts is initialized twice. Once from the scripts and one from inside the application.

Can you let me know how i can add those js files in angular application? Is there anything i am missing.

Thanks
Regards,
Manigandan
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Exporting chart to pdf or png shows different color.

Hi,

I recreated this demo in our official angular wrapper,
so you can see how these modules should be loaded correctly here:
https://codesandbox.io/s/angular-fbfqr

Kind Regards
manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Re: Exporting chart to pdf or png shows different color.

Thanks for the angular application.

I have an issue with the chart when i am using it with boost module and the files from js folder

If i take of the boost it works fine. But when i have boost it displays empty chart

I have a reproduced here

https://codesandbox.io/s/angular-l55dx

Is this a bug? or Is there any setting i am missing.

Thanks
Regards,
Manigandan
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Exporting chart to pdf or png shows different color.

Hi,

I saw that you created a new topic related to this boost problem, so let’s continue this topic here:
viewtopic.php?f=9&t=44034

Kind Regards
manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Re: Exporting chart to pdf or png shows different color.

Hi,

Thank you for all your prompt responses.

I want to continue this thread as i have a problem after applying the solution suggested in the thread, which is using the highcharts from js folder for my export to have proper color.

So after started using this export works fine. But i have an additional functionality in my application where i override the colors set by default in css by setting the color attribute in the options.Like this fiddle example: https://jsfiddle.net/banupriya_d/kbn025g9/4/

But when i started using the highcharts from js file the colors are no longer overiden.
Fiddle example: https://jsfiddle.net/banupriya_d/Lh9u5vj0/2/

I understood that the styled mode only supports styles using css and we need to use className property to override the default styles.

But i cannot create predefined classes as the colors are dynamic and each chart can have a different color profile and user can change the colors anytime. So className does not work for me.

Since i am loosing this functionality i would like to switch back to normal mode ( non styled mode), so i will not refer highcharts from js folder. But still i have to use css to have my default styles. This still will be shared across many applications. Also i will be able to override the colors by setting in the options as in my first example. What i would like to know is, is there any possibility for the export to have same colors as displayed with the mentioned set up. I see that in styled mode presentation code is removed. Will i be able to achieve this in normal mode? Or any other alternate for me to get the exported colors right in normal mode.

If there is no solution as of now, can we raise a issue to get this addressed? The issue is in high charts non-styled mode the color that appears in screen does not match with the colors in the exported file when using css for default styling.
Regards,
Manigandan
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Exporting chart to pdf or png shows different color.

Hi,

I would like to ask, to make sure:

1. Then which version of Highcharts will you use in your project?
2. And does this mean that you want to stop using style mode but still want to set compatible styles in the exported file?

Best Regards
manigandan
Posts: 189
Joined: Fri Jan 22, 2016 7:14 am

Re: Exporting chart to pdf or png shows different color.

Hi,

- We will use 6.2.0. We refer the highcharts from standard folder not from js folder.
Like in the example - https://jsfiddle.net/banupriya_d/q7p3gf1u/9/
- In this example you can see the chart is displayed based on the colors from css. But when you export i don't see the same colors.
- To solve my export issue you had suggested to refer the highcharts from js folder. In which case i have other issues because i am no longer able to override series colors using options. See topic viewtopic.php?f=9&t=44072
- Overriding colors is very much needed scenario for us.
- Hence I don't want to use styled mode js files but i still want to use the styles from my css. Which is how i am using it now and highcharts seems to honor the colors from css eventhough i do not refer highcharts from js folder.
In this mode we want the exported chart be of same color as displayed. This we feel is a bug and we would like to get it fixed.
Regards,
Manigandan
piotr.m
Posts: 1433
Joined: Mon Nov 18, 2019 8:15 am

Re: Exporting chart to pdf or png shows different color.

Hi,

So to recap:

If you want to overwrite CSS styles on the chart and want to keep these styles in export,
you must use styled mode, as I presented you in the first example:
https://jsfiddle.net/BlackLabel/s65hkdov/

Or throw inline CSS styling into a specific element, then it will also export that -
except that it should be remembered that this applies to HTML elements,
so it is quite limited (use allowHTML): https://jsfiddle.net/BlackLabel/zejx0og9/

There is currently no other way, if you think this is a bug/need feature -
then please report it on our GitHube: https://github.com/highcharts/highchart ... new/choose

Kind Regards
emmguyot
Posts: 1
Joined: Tue Aug 16, 2022 6:32 pm

Re: Exporting chart to pdf or png shows different color.

Hi,
I have read your Fiddle and modified it a bit : If I set a different className and set the CSS with that name, Axis are ok, but the data bar aren't.
When I check inside the SVG, I see that the classname for the data are still the same :

Code: Select all

<g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-0 highcharts-tracker " transform="translate(70,53) scale(1 1)" clip-path="url(#highcharts-x0py6ia-1)">
Is this a bug ?

My fiddle : https://jsfiddle.net/emmguyot/c96w1gho/

Best regards
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Exporting chart to pdf or png shows different color.

Hello,

Welcome to our forum and thanks for contacting us with your question!

If you want to style charts with CSS, first of all you need to set the chart.styledMode property to true.

For information, I prepared a demo in the latest version of Highcharts

Demo: https://jsfiddle.net/BlackLabel/5u2qjgzw/
API: https://api.highcharts.com/highcharts/chart.styledMode

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
deepakrmohanty
Posts: 3
Joined: Wed Apr 12, 2023 3:56 pm

Re: Exporting chart to pdf or png shows different color.

Hello Team,

I am using highcharts version 10.3.3.
I am working on highcharts xrange . I want to set the custom xrange color. When i render the chart it correctly takes the color based on the css file.
But when i export the chart to pdf or png it shows a different color. I think it takes default colors.

I have created a demo here . Please try to export to png or pdf and you can see the colors are different than the actual chart.

https://jsfiddle.net/deepakrmohanty/yjapxc5L/1/

Please help me to resolve this.

Regards,
Deepak
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Exporting chart to pdf or png shows different color.

Welcome to our forum and thanks for contacting us with your question!

To keep the css styling when exporting the chart, you need to enable the styledMode and import Highcharts css file.
I prepared a demo for you, which shows how it can be done.

Demo: https://jsfiddle.net/BlackLabel/hdmyx2w5/

Feel free to ask any further questions!
Kind regards
Jakub

Return to “Highcharts Usage”