---
schema_version: "1"
id: 1210d89bc37781c2f764e4c23f5f4334ecafbae3451c3ba72e5587f4bcb9641d
title: Dashboard Component Types
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/analytics/264-0-0/dashboards_component_types.md
canonical_url: https://help.salesforce.com/s/articleView?id=analytics.dashboards_component_types.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: bc501ea5cfde3ddf857c582d272e5f08361edbd076d4a49c0376e182a874e8f1
description: Dashboard components can be charts, tables, gauges, metrics, or other components that you can create with VisualForce.
products:
  - Cross Cloud
release: "264"
---
# Dashboard Component Types

Dashboard components can be charts, tables, gauges, metrics, or other components that you can create with VisualForce.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Group</strong> (View Only), <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d62270e77">User Permissions
            Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">To create dashboards:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">Run Reports AND Create and Customize Dashboards</td>

        </tr>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">To edit and delete dashboards that you created:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">Run Reports AND Create and Customize Dashboards</td>

        </tr>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">To edit and delete dashboards that you created in public folders:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">Edit My Dashboards</td>

        </tr>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">To edit and delete dashboards that you didn’t create in public folders:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">Manage Dashboards in Public Folders</td>

        </tr>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">To create, edit, and delete dynamic dashboards:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e77 ">Manage Dynamic Dashboards</td>

        </tr>
      </tbody>
    </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col style="width:18.181818181818183%">
        <col style="width:9.090909090909092%">
        <col style="width:72.72727272727273%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d62270e146">Component Type</th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d62270e149">Image</th>
          <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d62270e152">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e146 ">Chart</td>

          <td data-label="Image" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e149 ">
            <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-analytics-264-0-0-production-enus/295fead5-b71d-4e1c-9886-4af4d53400b6/analytics/images/chart_pie_sml.png" alt="Pie chart component"></span>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e152 ">
            <span id="dashboards_component_types__UseChart"><a name="dashboards_component_types__UseChart"><!-- --></a>Use a chart when you want to show data graphically. You can choose
              from a variety of chart types.</span>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e146 ">Gauge</td>

          <td data-label="Image" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e149 ">
            <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-analytics-264-0-0-production-enus/295fead5-b71d-4e1c-9886-4af4d53400b6/analytics/images/gauge_sml.gif" alt="Gauge component"></span>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e152 ">
            <p><span id="dashboards_component_types__UseGauge"><a name="dashboards_component_types__UseGauge"><!-- --></a>Use a gauge when you have a single value that you want to show within
                a range of custom values</span>. For example, to create a dashboard that measures where your
              current closed opportunity amounts fall within a range of values, set the <samp class="parmname">Minimum
                Value</samp>, <samp class="parmname">Breakpoint #1 Value</samp>, <samp class="parmname">Breakpoint #2
                Value</samp>, and <samp class="parmname">Maximum Value</samp> for the gauge. The ranges that you
              set can indicate poor, acceptable, and good performance. Set appropriate colors for each of
              these ranges to visually indicate progress. To create a gauge with only two ranges, leave
              <samp class="parmname">Breakpoint #2 Value</samp> blank.
            </p>
            <p style="margin-bottom:0;">Select <samp class="parmname">Show
                Percentage</samp> or <samp class="parmname">Show Total</samp> to display those values on the
              gauge. Values exceeding the maximum are shown as greater than 100%. </p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e146 ">Metric</td>

          <td data-label="Image" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e149 ">
            <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-analytics-264-0-0-production-enus/295fead5-b71d-4e1c-9886-4af4d53400b6/analytics/images/metric.gif" alt="Metric component"></span>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e152 "><span id="dashboards_component_types__UseMetric"><a name="dashboards_component_types__UseMetric"><!-- --></a>Use a metric when you have one key value to display.</span> For
            example, if you have a report showing the total amount for all opportunities in the
            <samp class="parmname">Closed</samp>, <samp class="parmname">Commit</samp>, and <samp class="parmname">Base Case</samp>
            stages in the current month, you can name that value and use it as a revenue target for the
            month displayed on the dashboard.
          </td>

        </tr>
        <tr class="">
          <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e146 ">Table</td>

          <td data-label="Image" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e149 ">
            <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-analytics-264-0-0-production-enus/295fead5-b71d-4e1c-9886-4af4d53400b6/analytics/images/table.gif" alt="Table component"></span>
          </td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e152 "><span id="dashboards_component_types__UseTable"><a name="dashboards_component_types__UseTable"><!-- --></a>Use a table to show a set of report data in column form.</span> For
            example, to see the top 20 opportunities by amount, set <samp class="parmname">Maximum Values
              Displayed</samp> to <kbd>20</kbd>. Then click <strong class="uicontrol">Customize
              Table</strong> and select opportunity name, amount, and other columns to display, choose
            the sort order, and set conditional highlighting. Available columns include all chart
            groupings and report summary fields, as well as the second-level grouping defined in the
            report.</td>

        </tr>
        <tr class="">
          <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e146 ">Visualforce Page</td>

          <td data-label="Image" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e149 ">N/A</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e152 ">
            <p><span id="dashboards_component_types__UseVisualForcePage"><a name="dashboards_component_types__UseVisualForcePage"><!-- --></a>Use a Visualforce page when you want to create a custom
                component or show information not available in another component type.</span> For example, a
              Visualforce page can display data from an external system or show Salesforce data in a custom
              way. <span id="dashboards_component_types__DashboardComponentVisualforceDescription"><a name="dashboards_component_types__DashboardComponentVisualforceDescription"><!-- --></a>Visualforce pages must meet certain
                requirements to be displayed in dashboards; otherwise, they don't appear in the
                <samp class="parmname">Visualforce Page</samp> dropdown list.</span> See <a href="https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_quick_start_basic_dashboard_components.htm" target="_blank">Create Visualforce Dashboard Components</a> in
              the <cite>Visualforce Developer Guide</cite>.</p>
            <p style="margin-bottom:0;">Visualforce pages are available only in
              Salesforce Classic and aren’t available when third-party cookies are disabled. See <a href="https://help.salesforce.com/s/articleView?id=003786014&amp;type=1&amp;language=en_US" target="_blank">Visualforce Limitations in Salesforce Classic When
                Third-Party Cookies are Blocked</a>.</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Component Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e146 ">Custom S-Control</td>

          <td data-label="Image" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e149 ">N/A</td>

          <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d62270e152 ">
            <p>Custom s-controls can contain any type of content that you can display in a browser.
              Examples include a Java applet, an Active-X control, an Excel file, or a custom HTML Web
              form.</p>
            <div class="slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium">
              <div class="slds-media slds-media_responsive">
                <div class="slds-media__figure"><span class="slds-icon_container slds-icon_container_circle slds-icon-note-warning"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-analytics-analytics-264-0-0-production-enus/295fead5-b71d-4e1c-9886-4af4d53400b6/images/icon_important.png" alt="Important"></span></div>
                <div class="slds-media__body" style="padding-top:.5rem;padding-bottom:.5rem;"><span class="slds-text-title_caps">Important</span> <span id="dashboards_component_types__SControlSupersedeTextOnly"><a name="dashboards_component_types__SControlSupersedeTextOnly"><!-- --></a>Visualforce pages supersede
                    s-controls. Organizations that haven’t previously used s-controls can’t
                    create them. Existing s-controls are unaffected, and can still be
                    edited.</span></div>
              </div>
            </div>
          </td>

        </tr>
      </tbody>
    </table>

#### See Also

- [Modify a Dashboard Component in Salesforce Classic](https://help.salesforce.com/s/articleView?id=analytics.dashboard_builder_component_editor.htm&release=264.0.0&type=5 "A dashboard component is a visual representation of the data in a report. You can change where the component’s data comes from, what the data looks like in the component, and what kind of component it is.")