---
title: Multi Chart Pro Documention
description: Multi Chart Pro Documention
---

[Skip to content](https://www.modfrybus.shop/multi-chart-pro-documention#main-content)

[![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=90&height=52&name=Modfrybus-logo.png)](https://www.modfrybus.shop/?hsLang=en)

- [Home](https://www.modfrybus.shop/)
- [About](https://www.modfrybus.shop/about-us)
- [Services](https://www.modfrybus.shop/services)
- [Pricing](https://www.modfrybus.shop/pricing)
- [Blog](https://www.modfrybus.shop/modfrybus-blog)
- [Contact](https://www.modfrybus.shop/contact-us)

Open main navigation

Close main navigation

- [Home](https://www.modfrybus.shop/)
- [About](https://www.modfrybus.shop/about-us)
- [Services](https://www.modfrybus.shop/services)
- [Pricing](https://www.modfrybus.shop/pricing)
- [Blog](https://www.modfrybus.shop/modfrybus-blog)
- [Contact](https://www.modfrybus.shop/contact-us)
- [Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus)

[Marketplace Assests](https://app.hubspot.com/ecosystem/48318526/marketplace/modules?eco_providers=Modfrybus)

#### Multi Chart Pro Documention

## 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.

![Group 1000002415](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%201000002415.png?width=1000&height=700&name=Group%201000002415.png)

 

**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.

**![Group 469522](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Group%20469522.png?width=1000&height=567&name=Group%20469522.png)**

## 6. Examples / Demo Preview

View the module in action: [https://www.modfrybus.shop/multi-chart-pro](https://www.modfrybus.shop/multi-chart-pro?hsLang=en)

## 7. Support & Contact

For questions or support, contact us at [productqueriemodfrybus@outlook.com](mailto:productqueriemodfrybus@outlook.com) We’re happy to help!

[![Modfrybus-logo](https://www.modfrybus.shop/hs-fs/hubfs/Module-images/Modfrybus-logo.png?width=150&height=87&name=Modfrybus-logo.png "Modfrybus-logo")](https://www.modfrybus.shop/?hsLang=en)

[Privacy Policy](https://www.modfrybus.shop/privacy-policy?hsLang=en)

[Terms and Conditions](https://www.modfrybus.shop/terms-and-conditions?hsLang=en)

[Refund Policy & Support](https://www.modfrybus.shop/modfrybus-refund-policy-support?hsLang=en)

 Copyright © 2025, Modfrybus