Label text overlapping data bars and legend icons when exporting bar chart to PDF

[Raja]

Product: UI for ASP.NET MVC 2016.2.714 Commercial
Title: Label text overlapping data bars and legend icons when exporting bar chart to PDF
Description: I am experiencing an issue where a chart looks great within the browser window, but once exported to PDF, some of the text overlaps the series bars and legend icons.  Please refer to attached screenshots showing the in-browser vs. exported-to-PDF renderings.  The category axis labels on the left are overlapping the series bars, and furthermore are not all right-aligned with each other.  The legend labels are also overlapping their icons.  The Razor markup is shown below:
 
@(Html.Kendo().Chart<ReportControlSummaryViewModel>()
                        .Name("controlsChart")
                        .HtmlAttributes(new { style = "height: 619px;" })
                        .Title("Control Summary")
                        .Legend(legend => legend
                            .Position(ChartLegendPosition.Bottom)
                        )
                        .ChartArea(chartArea => chartArea.Background("transparent"))
                        .SeriesDefaults(seriesDefaults => seriesDefaults.Bar().Stack(true))
                        .Series(series =>
                        {
                            series.Bar(model => model.Implemented).Name("Implemented").Color("#00ff00");
                            series.Bar(model => model.Unimplemented).Name("Unimplemented").Color("#ff0000");
                        })
                        .CategoryAxis(axis => axis
                            .Categories(model => model.Name)
                            .MajorGridLines(lines => lines.Visible(false))
                        )
                        .ValueAxis(axis => axis
                            .Numeric()
                            .Line(line => line.Visible(false))
                        )
                        .Tooltip(tooltip => tooltip.Visible(true))
                        .Pdf(pdf => pdf
                            .FileName("Control Categories Control Summary Report.pdf")
                            .ProxyURL(Url.Action("Save", "Export"))                            
                        )
                        .DataSource(dataSource => dataSource.Read(read => read.Action("ControlCategoryControlSummary", "Report").Data("app.getFilters")))                        
                    )

[Bozhidar]

Hi,

As I was not able to run your code, I have tried to use a similar code that runs inside dojo:

http://dojo.telerik.com/@ruzhenov/uZOFU and this is the same code in the browser also: http://runner.telerik.io/fullscreen/@ruzhenov/uZOFU - if you try to print preview it, you will find that everything look fine - a screenshot is provided: http://screencast.com/t/nPbZPr8U1oLE.

Can you send me a runnable project of your code or if you can modify the dojo sample based on your chart with the print issue reproducible?

Regards,
Bozhidar
Telerik by Progress

[Cristina]

Was there ever a resolution to this? I am having the same problem. In the provided solution, you are talking about print previewing, but that is not the issue, as the browser works fine.  It's when exporting to PDF using kendo.drawing.  Below is the code for one of my charts and my jquery code that does the exporting, and I am having the same issue as the original poster.

@(Html.Kendo().Chart(block.Items)
              .Name("chartBlock_" + block.BlockHeading.Replace(" ", string.Empty))
              .Title(block.BlockHeading)
              .Series(series =>
              {
                  series.Bar(model => model.Score, model => model.Color);
              })
              .CategoryAxis(axis =>
              {
                  axis.Categories(model => model.ItemDescription);
              })
              .ValueAxis(axis => axis.Numeric().MajorUnit(1).Max(4))
              .Legend(false)
              .Transitions(false))


function() {
            kendo.drawing.drawDOM($(".content-wrapper"),{forcePageBreak: ".page-break"})
                .then(function(group) {
                    return kendo.drawing.exportPDF(group, {
                        paperSize: "auto",
                        margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                    });
                })
                .done(function(data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "Charts.pdf",
                        proxyURL: "@Url.Action("Pdf_Export_Save")"
                    });
                    //$('#chartForm').submit();
                });

[Bozhidar]

Hello,

You can use the following workaround in order the long labels not to overlap the chart: http://docs.telerik.com/kendo-ui/controls/charts/how-to/fit-exported-chart-in-pdf#fit-pdf-exported-chart-to-page

Here is also the dojo example demonstrating how it works with a longer label: http://dojo.telerik.com/@ruzhenov/AyIjo

Regards,
Bozhidar
Telerik by Progress