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:

Chart image rendered in Salesforce via Apex component

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


Ian Webster

About the author

Ian Webster is a software engineer and former Googler based in San Mateo, California. He has helped Google, NASA, and governments around the world improve their data pipelines and visualizations. In 2018, Ian created QuickChart, a collection of open-source APIs that support data visualization efforts.

Email · LinkedIn · Twitter