Chart Colors on PDF Export

[Rob]

My website has a dark theme so the chart has a black background with white text, but when it's exported to PDF the background color should be white and the text color should be black.  How do you set the colors of the chart to be different for when it's being exported to PDF?  

 

Thanks,
Rob

[Rob]

I figured out how to do it.  You have to set the color on things like the legend to "currentColor" which tells it to use the color that's defined on the parent html element.  You can then set the text color to black in css for the .k-pdf-export class which is applied when it's exported.

Chart:

<kendo-chart [legend]="{labels: {color: 'currentColor'}}">
    <kendo-chart-area background="transparent"></kendo-chart-area>
</kendo-chart>

 

css:

.k-pdf-export .k-wdiget {
    color: #000;
}

[Dimiter Topalov]

Hello Rob,

You can customize the styling of the exported content via modifying the exportVisual options in accordance with your preference:

https://www.telerik.com/kendo-angular-ui/components/charts/chart/export-options/#toc-saving-charts-in-pdf

public exportChart(): void {
    const visual = this.chart.exportVisual({
        options: {
          chartArea: {
            background: '#fff'
          },
          legend: {
            labels: {
              color: '#000'
            }
          }
        }
    });

    exportPDF(visual, {
      paperSize: "A4",
      landscape: true
    }).then((dataURI) => {
      saveAs(dataURI, 'chart.pdf');
    });
  }

The options object follows the same structure as the Chart's root configuration object when configured via an inline options, provided as an object, as opposed to nested components (an more complex example, demonstrating this configuration approach is available in this demo).

Here is a runnable example illustrating the described approach for inverting the Chart colors when exported:

https://stackblitz.com/edit/angular-sqfreu-aqd6h6?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Rob]

Hi Dimiter,

Thank you for your help, that accomplishes what I was looking for.  I had read that help doc on saving charts to pdf but it didn't mention that you could pass all of that in to the exportVisual method.

 

Thanks,
Rob