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