Chart Legend Overlapping

[Angelo]

I combined a grid and a chart on an html page and tried to export to PDF.  When I try to export, the legend overlaps. Here's the plunker: https://plnkr.co/edit/Dpg3ZbTBPMuiKi0BFPBP?p=preview

 

 

[Dimiter Topalov]

Hi Angelo,

Thank you for the runnable example. The font, used for the exported PDF document is "DejaVu Sans" while the font, used in the web page is different. The font sizes thus differ and the label texts in the export are not sized as expected.

You can modify and finetune the appearance of the Chart labels via the labels configuration option:

https://www.telerik.com/kendo-angular-ui/components/charts/api/LegendLabels/

Providing the expected DejaVu Sans font to the Labels configuration yields the expected behavior of exporting the Chart labels the same way they are observed on the screen:

https://plnkr.co/edit/ohGDsbnKUkHDCOfVgEZo?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Xavier]

I resolved setting Spacing value, like this:.Legend(
        legend => legend
            .Orientation(ChartLegendOrientation.Horizontal)
            .Position(ChartLegendPosition.Top)
            .Labels(x=>x.Font("20px"))
            .Spacing(70)
            )