1. Introduction (Overview)

Multi Chart Pro is a flexible HubSpot module designed to help you display data using multiple chart styles. Choose from Area, Bar, Line, Pie, Donut, Horizontal Bar, and Radar Charts to present your information clearly. You can also add multiple chart data sets and customize each chart to match your website’s content and design. 

2. Key Features

• 7 Chart Styles: Choose from 7 different chart styles to present your data clearly.
• Multiple Chart Data: Add multiple sets of data and display them in one module.
• Easy to Customize: Update chart content, chart settings, and style options to match your needs. 
• Clean & Responsive: Display your charts smoothly across desktop, tablet, and mobile.

3. Installation – Downloading the Module from HubSpot Marketplace

• Log in to your HubSpot account.
• Go to the Marketplace from the main navigation menu.
• Search for your module by name.
• Find the module in the results and click Install.
• If it’s a paid module, you can also click Buy Now to purchase and install directly.

4. How to Use – Adding the Module to Your Page

• Open your HubSpot account and go to the page where you want to add the module.
• Click Edit page to open the HubSpot page editor.
• Click Add in the left sidebar to open the module panel.
• Search for Multi Chart Pro.
• Drag and drop the Multi Chart Pro module onto your page.
• Select the chart style and add your chart data from the module settings.
• Use the Style settings to customize the chart appearance according to your website.
• Click Save or Publish to apply the changes.

5. Module Settings Guide

Content Tab: 

Main Content

• Heading: Add a custom heading.
• Description: Add a short description.

Chart Style

Choose from Area, Bar, Line, Pie, Donut, Horizontal Bar, or Radar Chart.

Chart Data

Add color, current value, previous value, and label for each data set.

Chart Data & Content

Customize legend position, legend type, legend text color, grid lines, and grid line color.

Chart Card Header

Add a title, chart badge, and description.

Chart Settings

• Current Period: Add the current period for your chart data.
  
  

 

2. Style Tab

Module Settings

Customize the module with a full-width layout or set a custom width.

Card

Set the background color, border radius, border color, and hover border-top color.

Chart Badge

Customize the badge font, size, text color, border radius, text transform, and background color.

Title

Adjust the title font, color, and size.

Description

Customize the description font, color, and size.

Heading

Set the heading font, color, size, and mobile font size.

Description

Adjust the description font, color, size, and line height.

Alignment

Set the heading and description alignment to match your design.

6. Examples / Demo Preview

View the module in action: https://www.modfrybus.shop/multi-chart-pro

7. Support & Contact

For questions or support, contact us at productqueriemodfrybus@outlook.com We’re happy to help!