Creating Charts in Visualforce PDFs using Apex
This post describes how to use Apex components to display chart images in SalesForce. These chart images can be embedded in SalesForce or exported to other formats such as PDF.
Visualforce supports some charting, but these charts depend on client-side rendering using Javascript. If you're building PDFs or other reports in Visualforce, you'll have to use a static method for rendering chart images.
This means that you'll have to define the chart and its data in a controller and then render it as an Apex image on a page.
Code example
To get started, we'll define the controller on our Visualforce page:
<apex:page controller="ChartController" renderAs="pdf">
<apex:image url="{!dynamicUrl}"/>
</apex:page>
Then, we'll create a custom controller in Apex:
public class ChartController {
public String dynamicUrl {get;set;}
public ChartController() {
// Insert your chart config here. You can replace the data with dynamic values.
String config = "{"
+ " type: 'bar',"
+ " data: {"
+ " labels: ['Q1', 'Q2', 'Q3', 'Q4'],"
+ " datasets: [{"
+ " label: 'Users',"
+ " data: [50, 60, 70, 180]"
+ " }]"
+ " }"
+ "}";
// Construct the URL
String encodedConfig = EncodingUtil.urlEncode(config);
dynamicUrl = "https://quickchart.io/chart?c=" + encodedConfig;
}
}
The dynamic URL in the example above will display the following chart:
Customization
Note that you can further customize your chart by setting other API parameters.
The chart itself is very customizable - you can render any Chart.js configuration. Have a look at our chart gallery to get ideas, or get started with the developer documentation.
Embedding elsewhere
The QuickChart API returns PNG images by default. The <apex:image> tag will allow you to embed the image in your VisualForce page. You can then render the Visualforce page as a PDF file (see example).
