Chart

Configuring the Chart Component

Choosing a Chart Type

The Avonni Chart component supports various chart types to accommodate data visualization needs. Use this guide to understand the available options and select the most suitable chart type for your data:

Bar

Column

Line

Combo

Metrics Radar

Pyramid

Bar

Description

It uses bars of varying lengths to compare different categories

When to Use

It compares discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions.

Stacked Bars

Description

It uses bars of varying lengths to compare different categories

When to Use

It compares discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions.

Column

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions

Stacked Columns

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions.

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions

Pyramid

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions

Stacked Pyramid

Description

It uses bars of varying lengths to compare different categories

When to Use

Ideal for comparing discrete categories, such as sales by region, product popularity, or survey responses.

Example

Comparing sales performance across different regions

Connecting your Data

Avonni Chart offers flexible options for connecting to your data:

1. Data Collections

You can directly connect your chart to a Data Collection within your Flow or Experience Cloud site. Data Collections are a great way to store and manage structured data, making it easy to use within your Avonni components.

2. Querying Salesforce Data for Your Chart (v6.1 and later)

For more advanced scenarios or when working with external data, Avonni Charts now supports Query Data Source. This powerful option allows you to use SOQL queries to fetch data directly from Salesforce objects, giving you fine-grained control over the data displayed in your chart. The Query Data Source allows you to dynamically filter, sort, and aggregate data.

Data Mappings

Now, you need to map the fields from your data source to the visual elements of the chart. Think of this as assigning roles to your data: which fields determine the categories on the chart, and which fields determine the measured values?

Here's how it works for a bar chart:

• Bars: Each bar in the chart represents a category from your data. You'll map a field from your data source to the "Bars" property to define these categories. For example, if you want to create a bar chart showing sales by region, you would map your "Region" field to "Bars."

• Bar Length: The length of each bar represents a value associated with that category. Map the field containing these values to the "Bar Length" property. In our sales by region example, you would map the "Sales Amount" field to "Bar Length."

Example: Sales by Region

Imagine your data source has the following fields:

• Region (e.g., "North", "South", "East", "West")

• Sales Amount (e.g., $10,000, $15,000, $12,000, $8,000)

To create a bar chart:

1. Data Source: Select the flow variable containing this data.

2. Data Mappings:

   • Bars: Map to the Region field.

   • Bar Length: Map to the Sales Amount field.

This will create a bar chart where each region is represented by a bar, and the length of each bar corresponds to the sales amount for that region.

Configuring Chart Elements

This section explains how to configure the various elements of your Avonni Chart, such as the title, axes, legend, and tooltip, to enhance its clarity and visual appeal.

Title and Subtitle

A clear and concise title is crucial for providing context and helping users quickly grasp the chart's purpose. Use the Title attribute to add a main title to your chart. To give more context or details, use the Subtitle attribute. This allows you to add information like the chart's time, data source, or specific focus.

Example:

• Title: "Quarterly Sales Performance"

• Subtitle: "2023 Q4 - North America"

X and Y Titles

Axis titles clearly label each axis's representation, making the chart easier to interpret. The X axis represents categories or periods, while the Y axis shows values or measurements. Use the X Title attribute to label the horizontal (X) axis and the Y Title attribute to label the vertical (Y) axis.

Example:

• X Title: "Month"

• Y Title: "Revenue (in USD)"

Palette

The Palette attribute lets you control the colors used in your chart. Choose from predefined color palettes (e.g., Aurora, Nightfall, Ocean) to give your chart a consistent and visually appealing look. Each palette offers a different set of colors designed to work well together.

Chart Settings

This section contains attributes that affect the overall appearance and behavior of the chart:

Show Values

Enable this option to display the actual data values on the chart (e.g., on top of bars or next to data points).

Normalize Values

This option transforms your data to fit within a specific scale (e.g., 0-100%). This is useful for comparing data with different units or magnitudes.

Axis Mode

This setting determines how the axes are arranged in your chart:

• Single Axis: This is the most common type. All your data is plotted against a single vertical axis (Y-axis).

• Dual Axis: This option uses two vertical axes (Y-axes) with different scales. It's useful when you want to compare two sets of data with different units of measurement. For example, you could plot sales revenue (in dollars) on one axis and customer satisfaction scores (on a scale of 1-10) on the other.

• Small Multiples: This creates a series of smaller charts, each showing a different subset of your data. All the small charts use the same scale and axes, making comparing patterns and trends across different categories easy.

• Auto Fit: Turn this on to let the chart automatically adjust its elements to fit the space available. This helps ensure your chart looks good on different screen sizes or within different layouts.

Legend

The legend helps users interpret the chart when it includes multiple data series (e.g., different product categories or regions). Here are the legend-related attributes:

• Show Legend: Enable or disable the legend.

• Show Legend Header: Add a title to the legend box.

• Show Legend Inside Chart Area: Place the legend within the chart area instead of beside it.

• Legend Reverse Ordering: Change the order of items in the legend.

Tooltip

The tooltip provides detailed information about a data point when the user hovers over it. You can configure what information is displayed in the tooltip:

• Tooltip Show Dimensions: Show the dimension value (e.g., the category or period).

• Tooltip Show Measures: Show the measured value (e.g., the sales amount).

• Tooltip Show Percentage: Show the percentage value of the data point relative to the total.

This revised section provides a more understandable and detailed explanation by:

• Improved title: "Configuring Chart Elements" is more specific and informative.

• Clearer headings: Separate headings for each element improve readability.

• Detailed explanations: Each attribute is explained with more context and examples.

• Organized structure: Grouping related attributes (like those for the legend and tooltip) improves organization.

• Concise language: The explanations are clear and easy to understand

Styling

Avonni Charts provides a straightforward way to style your data visualizations, primarily focusing on color palettes. This allows you to easily choose colors that represent your data effectively and maintain a consistent look and feel.

Available Color Palettes

Avonni provides a variety of pre-defined color palettes to choose from:

• Aurora: A vibrant palette with various colors inspired by the aurora borealis.

• Nightfall: A darker palette with deep blues and purples, suitable for low-light environments.

• Wildflowers: A bright and cheerful palette with a variety of floral-inspired colors.

• Sunrise: A warm palette with shades of orange, yellow, and red.

• Bluegrass: A cool and calming palette with shades of green and blue.

• Ocean: A palette inspired by the colors of the ocean, with blues and greens.

• Heat: A warm palette with reds, oranges, and yellows, ideal for representing intensity.

• Dusk: A subdued palette with muted purples and blues, evoking the twilight hours.

• Pond: A tranquil palette with greens and blues, reminiscent of a peaceful pond.

• Watermelon: A refreshing palette with pinks, greens, and reds.

• Fire: A fiery palette with reds, oranges, and yellows.

• Water: A cool palette with blues and greens, representing water.

• Lake: A serene palette with blues and greens, inspired by lake colors.

• Mineral: An earthy palette with browns, grays, and blues.

Troubleshooting

"d3 is not defined" error

This error indicates that the D3.js library, essential for rendering the charts, is not loaded correctly. Here's how to resolve it:

• Verify Avonni Components package version

  • Go to Setup > Installed Packages.

  • Locate the "Avonni Components" package.

  • Ensure that you have the latest version installed. If not, update the package.

• Lightning Web Security

  • Navigate to Setup > Session Settings.

  • Check if "Enable Lightning Web Security for all orgs" is enabled. If not, enable it.

Contact Avonni Support: If you suspect a bug or require further assistance, contact Avonni support for dedicated help.