---
schema_version: "1"
id: 50edcc95187e35504082309d4fa8327321303fde71ea6961e5bd31fbc657d7f0
title: How Visualforce Charting Works
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/charting/pages-charting-overview.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 2636f1913733535b42ff0c017d50d9630cc48f8136105da0e4ad029368817625
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# How Visualforce Charting Works

A Visualforce chart is defined using a series of charting components, which are then linked to a data source to be graphed on the chart.

Create a chart with Visualforce by doing the following:

1.  Write an Apex method that queries for, calculates, and wraps your chart data to send to the browser.
2.  Define your chart using the Visualforce charting components.

When the page containing the chart loads, the chart data is bound to a chart component, and the JavaScript that draws the chart is generated. When the JavaScript executes, the chart is drawn in the browser.