Range Column and Range Bar Charts

Instructions

Before You Start

1. Create a SharePoint list named: Salary Ranges
2. Add Columns:
   • Position (Single line of text)
   • Min Salary (Currency)
   • Max Salary (Currency)
3. Sample Data:

Step 1: Create a Range Column Chart Profile

1. Open the Salary Ranges list
2. Click Design
3. Open Charts
4. Click Add new profile

Step 2: Configure General settings

1. Title: Salary Range Column Chart
2. Category: Position
3. Add two Series:
• Series 1:
• Column: Min Salary
• Aggregation: Sum
• Label: Min
• Series 2:
• Column: Max Salary
• Aggregation: Sum
• Label: Max

Range charts use two numeric columns to display value intervals.

Step 3: Configure Display settings

Open the Display tab:

• Chart type: Range Column
• Enable 3D: Optional (can be enabled for a more visual effect)
• Show legend: Enabled
• Legend position: Top
• Show values: Optional
• Width: 1000
• Height: 400

Step 4: Configure Title settings

• Include title: Enabled
• Front size: 16px
• Bold: Enabled

Step 5: Save the chart profile

• Click Save

The Range Column chart profile is now available for use.

Step 6: Add the chart to a SharePoint page

After saving the chart profile, you need to add it to a SharePoint page using a web part:

1. Create a new SharePoint page.
2. Click the + button and add the Ultimate Forms.
3. Once added, click the Edit Properties.
4. In the web part properties:
   • Set Type to Charts
   • Select the profile: Salary Range Column Chart
5. Publish the page

Step 7: Create a Range Bar Chart

Create another chart profile using the same data.

1. Title: Salary Range Bar Chart
2. Category: Position
3. Add two Series:
• Series 1: Min Salary
• Series 2: Max Salary
4. Chart type: Range Bar
5. Enable 3D: Optional (can be enabled for a more visual effect)
6. Show legend: Enabled
7. Legend position: Top
8. Show values: Optional
9. Width: 1000
10. Height: 400

Step 8: Save the chart profile

• Click Save

The Range Bar chart profile is now available for use.

Step 9: Add the Range Bar Chart to the Page

1. Add another Charts web part to the page
2. Select: Salary Range Bar Chart

Comparing Range Column and Range Bar Charts

Range Column

Displays ranges vertically and works well for compact category comparisons.

Range Bar

Displays ranges horizontally and is useful when category names are longer or easier to compare vertically.

Result

You now have two different visualizations displaying salary ranges using the same SharePoint data.

Both charts help visualize minimum and maximum values in a clear and easy-to-compare format.