Kendo UI chart series lables rendered incorrectly in PDF generation

[Ole Anders]

I'm using the Kendo UI dataviz ASP.NET MVC framework for rendering charts, like the example given here (using the ASP.NET MVC version).The graphs and the series lables renders fine in the browser:

Browser snapshot

For generating the PDF, I use the Rotativa framework - using the wkhtmltopdf tool to convert html content to PDF.The graph renders perfectly in the PDF, however the series lables on the top is rendered incorrectly:

PDF Snapshot

As you can see, there is plenty of room for the labels to span out - but they are being rendered "randomly" on top of each other.

I have multiple graphs in the same exported PDF, and the all the labels for all the charts are incorrectly placed.Here is my rotativa action result settings:

return new ViewAsPdf("Reports/_ReportBaseIndex", FilterData)
 {
    PageOrientation = ExportOrientation,
    CustomSwitches = "--disable-smart-shrinking --print-media-type --zoom 0.75 --javascript-delay 1000"
};

Is there any way to fix the lables? Is it possible to statically place the labels, or do I have to recalculate the label positions? If so, how do I do that?

Where can I find the code that positions the series lables ?

We are running kendo UI version 2013.2.918.

[Iliana Dyankova]

Hi Ole,

This question is not directly related to functionality or features that Kendo UI offers and is out of scope of our support services.

On a side note, we have a code library which demonstrates a different approach for exporting Kendo UI Chart to PDF using Inkscape. 

Regards,
Iliana Nikolova
Telerik

[Ole Anders]

Hi Iliana,

We can't use inkscape because we need to render additional html based of a given URL. This is why we use Rotativa.

I'm aware that you do not support Rotativa, but could you at least point me in the direction to the code of where the series lables are rendered so we might try to fix it ourselves?

Where can I find the developer versions (non minified scripts) of the javascript files for kendo UI dataviz? When I installed the kendo UI package to the ASP.NET MVC project, only the minified versions of the javascript files were included.

In the worst case if we can't fix this problem, is it possible to disable the legend with the series labels?

[Iliana Dyankova]

Hi again Ole,

The non-minified scripts can be found in the following location from the distribution package:
\\....\src\js

In order to hide the legend you should set legend.visible option to false:

@(Html.Kendo().Chart()
  //....
  .Legend(legend => legend
     .Visible(false)
  )
)

Regards,
Iliana Nikolova
Telerik

[Vik]

Ole,

How did you get your graph to work with Rotativa? I am trying to do the same thing, as I have a kendo graph and just a normal table on my view.  But when I pass that to Rotativa to convert to PDF, it pdfs half the graph and it looks shrunk (see attached image)

Could you share your code on how you managed to get it to work?

Thanks

[Vik]

In relation to the above post.  I found the solution.

Add the following
 .Transitions(false)
 .HtmlAttributes(new { style = "height: 400px;width: 1000px" })


Unfortunately I haven't worked out how to fix the legend issue.  But now the graph is drawn all the way and to a decent width.

[surbhi]

Could you share your code on how you managed to get it to work?

[Anton Mironov]

Hi Surbhi,

In order to implement the PDF export functionality for the Kendo UI Chart, I would recommend trying the approach from the following demo:

• https://demos.telerik.com/aspnet-mvc/chart-api/pdf-export

If another product is used(not Kendo-related), please use the support forum of the product owner.

Kind Regards,
Anton Mironov