Preserve Colors Export to PDF

[Lee]

I am trying to export my chart to PDF however the colors are all changed to black. I also have an issue exporting a map where the css filter applied to the map tiles is missing and the map markers are all black instead of orange. I am using css properties to set the colors of the markers and bar chart on the screen. I suspect that they might not be compatible with the method Kendo UI is using to convert html to kendo.drawing.drawDOM. I tried overriding this using:
.k-pdf-export {
    #impactChart g g g path {
        fill: green !important;
    }
}

however this did not work. The chart still rendered as black. 

How do I fix this?

Is there a way to debug without exporting to PDF every time so I can take advantage of Chrome's developer tools?

Is there a list of incompatible CSS properties and workarounds?

[Alex Hajigeorgieva]

Hi, Lee,

When the coloring is done via the widget's API, the PDF export will reflect that. 

If you look through the chart API you will find nearly 150 properties that are used to change different colors, is there are reason why the chart API cannot be used?

When using the chart series the color is green both in the page and in the exported file in this test:

https://dojo.telerik.com/@bubblemaster/EDoZEbaP

In case you have further questions or concerns, can you please specify what is the desired behaviour and some sample code that we can take a look at and run locally in a simple example.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Lee]

Thank you for your response. I used the chart API which works fine for the screen but not when I use a CSS property (var(--primary-color, #cfcfcf); for example) the conversion to pdf causes the colors to all render as black. I am using CSS variables so that the user can set their own color scheme on the site. I have an idea for a work around for the css variables using JavaScript and off screen color swatches but I haven't had a chance to try it yet. 

It looks like CSS variables, along with other css properties such as filter and box-shadow, are not supported. I'm wondering if there is a list of supported vs not supported properties. 

[Tsvetomir]

Hi Lee,

My name is Tsvetomir and I am temporarily stepping in for my colleague Alex.

In general, the direct export of an SVG element to PDF is not supported. The Kendo UI library has implemented its internal logic to export such elements. 

The colors used in the exported file are the ones that come from the options of the Kendo UI Chart. Even if the appearance is alternated with CSS and visually the elements' fills are changed, the exported element would pick up the colors from the options of the chart. In case there is a theme applied to the page and the options are not set, the default colors from the theme would be utilized.

What I can recommend is that you make use of the exposed API of the Kendo UI Chart and set up the coloring there. Also, you could apply those styles programmatically and dynamically with the help of the setOptions() method. More information could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/setoptions

I hope you find those clarifications helpful. 

 

Best regards,
Tsvetomir
Progress Telerik