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

4 posts, 0 answers
  1. Raja
    Raja avatar
    1 posts
    Member since:
    Jul 2014

    Posted 05 Aug Link to this post


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

  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 09 Aug Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Cristina
    Cristina avatar
    6 posts
    Member since:
    Apr 2016

    Posted 23 Sep in reply to Bozhidar Link to this post

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

  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 27 Sep Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready