Reporting Services chart text is blurry when rendered in ReportViewer control on web page

Question

Issue

We are rendering a bar chart on a web page using a Reporting Services report and the ReportViewer control. Sometimes the text on the chart is sharp:

But most of the time, the text on the chart is blurry:

What is going on?

Steps Taken to Resolve and Other Information

• Extensive search of web and SO
• Tried different browsers, users and machines; couldn't determine rhyme or reason to blurriness
• Tried several settings of SSRS report properties DynamicHeight and DynamicWidth
• In Firefox, when right-clicking on the chart image and choosing View image, the displayed image is always sharp
• The issue seems more prominent on charts with a border; removed border on chart, but issue remains

Affects Browsers

• Firefox 15.0
• Chrome 23.0.1271.97 m
• IE 9 but only while in Browser Mode=IE9, Document Mode=IE9 Standards

Environment

• Visual Studio 2010 Pro
• .NET 4.0
• IIS 7.0
• Reporting Services 2008
• ReportViewer control version 10

Answer 1

Cause

The ReportViewer control renders charts as a PNG image. The ReportViewer adds width, height, and min-width properties to the CSS for the image. These CSS properties cause the image to undergo scaling to a slightly smaller size in the browser. The image scaling causes the observed blurriness.

Resolution

The issue is resolved in our environment by using additional CSS to override several CSS properties rendered by the ReportViewer. The Reporting Services chart is given a special tag in BIDS so a CSS selector can find the affected image.

Step 1. Give the chart a unique value for its ToolTip property:

(The unique value in this example is MyOfficeChart.)

When the chart is rendered as an <img>, the <img> tag's alt and title attributes are set to this value.

Step 2. Create CSS to select the <img> by the unique value of the title attribute, and override the issue-causing CSS:

img[title$='MyOfficeChart']
{
    height:auto !important;
    width:auto !important;
    min-width:0 !important;
}

These steps resolve the issue for all browsers and users, and whether the chart has a border or not.