This is a migrated thread and some comments may be shown as answers.

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

3 Answers 123 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Raja
Top achievements
Rank 1
Raja asked on 05 Aug 2016, 10:09 PM

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")))                        
                    )

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 09 Aug 2016, 02:08 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Cristina
Top achievements
Rank 1
answered on 23 Sep 2016, 03:43 PM

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();
                });

0
Bozhidar
Telerik team
answered on 27 Sep 2016, 08:23 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Raja
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Cristina
Top achievements
Rank 1
Share this question
or