Kendo UI chart series lables rendered incorrectly in PDF generation

Question

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:

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:

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?

Answer 1

I'm also having this issue. Looks like it's related to wkhtmltopdf rather than rotativa. Rotativa actually uses this under the hood anyway.

I've tried generating the PDF both with Rotativa and wkhtmltopdf and get the issue using both.

The solution I went for was to generate the legend manually in the view, looping through the different categories and colours like so

        <table class="legend-table">
    @foreach (var category in Model.Data)
    { 
        <tr>
            <td style="background-color: @category.Colour"></td>
            <td>@category.Category</td>
            <td>@category.Value %</td>
        </tr>
    }
</table>

Answer 2

Our solution was to replace the PDF generator to Evo Pdf.

This fixed all of the rendering problems for us.