Chart

The Chart component lets you display data using a variety of chart options, allowing end users to visualize data and see trends. Customize and style the chart’s display using color and layout properties.

Before you chart, think about why to chart.

Using the Chart Component

The Chart component offers numerous visualization types—Line, Area, Column, Bar, Pie, Donut, Funnel, Pyramid, Scatter, and Bubble—letting you select the visualization method that will be most effective for your users.

Note

The content below assumes you have a Skuid page and at least one working model with fields selected.

After you add a Chart component to the canvas, set it up:

  • In the Basic tab, choose the type of chart, and title it.

    • If using a Line or Scatter type chart:
      • Set the chart’s Data (x axis) and Category (y axis) axes in the Axes tab.

    Note

    For Line and Scatter charts, it’s critical to complete the Axis settings before selecting the Series.

  • In the Series tab, select the data that will be displayed on the chart.

Then customize its appearance:

  • Use the Styles tab to adjust the look and feel of the chart.
  • The Display logic tab lets you control when (or if) the chart is displayed.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

Advanced Chart Management

Use Skuid with a Salesforce multicurrency org [[]]

Multinational businesses often need to manage and convert a variety of currency inputs. When building charts using a Salesforce multicurrency org, Skuid admins have the option of setting which currency is used for the chart details.

Note

Both org and user-specific currency options are set and managed within the Salesforce org’s setup. Best practice: Have user-facing Skuid features employ the user’s currency.

  1. Once multicurrency is enabled in Salesforce, click on the chart within the canvas to see its properties.
  2. In the Properties pane, under Use default currency of Org rather than User:
    • Unchecked (the default) means that end users see charts and chart details displayed using the default currency of their User settings.
    • Checked means that end users see charts displayed using the org’s default currency.

Note

This option must be set for each chart on the page.

Working with Highcharts merge variables [[]]

Skuid’s charts use the Highcharts Point object API for merge variables within the {{$Chart.point}} namespace to expose different fields of data associated with a single point in a graph. (At runtime, this is a point on a chart series clicked by the user.) Highcharts merge variables require a chart point (the Point object) for context, and must be used within a drilldown chart or a series on-click action. Because of this, they cannot be used outside of the Chart component.

Warning

This feature uses an external API; Skuid cannot provide support for any fields that might be deprecated in the future. Additionally, point object fields can have different meanings in different types of charts depending upon the chart type’s structure.

When working with Highcharts merge variables, follow the Highcharts documentation.

Warning

Using undocumented fields is not recommended.

$Chart used with Donut charts [[]]

Within a donut-type chart, $Chart includes the following functions.

Note

For donuts charts that use a Split Type, values for these functions depend on which donut section the end user is hovering over.

  • Percentage: A percentage rendered as a decimal.

  • PercentageFormatted: A percentage rounded to the nearest integer and rendered with the % symbol.

  • Number: A count of the records included in the chart or (for split charts) the current slice.

  • NumberFormatted: A count of the records included in the chart or (for split charts) the current slice, rendered to two decimal places.

  • Name:

    • The name of chart’s Series tab > Date field (with the Aggregate function listed in parentheses).
    • For donut charts that use a Series tab > Split Type, the field or template used to split the data.

Troubleshooting

Incorrectly set conditions and properties are common sources of trouble for visualizations.

I don’t seem to be getting the data I expected in my chart. [[]]

Charts are visualizations of the content in your models, so the models are the first place to look when charts don’t behave as expected. Make sure the model is feeding the correct data, and all the data you want, to the chart.

Hint: One way to verify a model’s data is to attach the model to a Table component as well as to a Chart. Use the Table to verify that the model is returning the correct data. Once you’ve done that, delete the table.

My chart shows an unexpectedly low number of records. [[]]

Check the model: is there a value in Max # of records (limit)? Chart data is limited to this number or records. Delete this value so that all records are included in the chart.

I’m using Skuid on Salesforce and getting an error message telling me that my Apex heap size is too large.[[]]

If you are using a very large record set and getting an Apex heap size error, you may need to use an aggregate model instead of a regular model. Aggregate models allow you to more effectively gather and display massive amounts of records. Learn more about using aggregate models.

Warning

If you are using aggregate models and multiple series in a chart, the Alias Name for each aggregation in the aggregate model must be unique. If the Alias Names are not unique, then one of the series in your chart may not render. See Working with aggregations in a chart component in the Aggregate Model topic.