Your HubSpot page needs a chart. Maybe a bar chart showing quarterly revenue growth for an investor update. Maybe a pie chart breaking down your pricing tiers by customer segment. Maybe a line chart tracking user engagement over the past year. HubSpot does not have a native chart module, so your options are limited.
You can embed a Google Sheets chart iframe, which looks like a Google Sheets chart from 2015 and ignores your brand completely. You can pay $30 to $100 a month for a tool like ChartMogul or Datawrapper, which inject their own branding and load slowly because they are iframes from someone else's server. You can hire a developer to integrate Chart.js or D3 into a custom module for $2,000 to $5,000. Or you can export the chart as a PNG from Excel and paste it on the page as an image, which breaks the moment your data changes.
Charts Pro is a HubSpot CMS module that gives you six chart types rendered as pure SVG, configured from the page editor, with nine color palettes and 50+ style controls. No Chart.js. No D3. No external CDN calls. No monthly fees.
Charts Pro includes six distinct chart types, each configured from the same repeater fields but rendered with different visualizations.
Vertical bar charts. The default for comparing discrete values across categories. Monthly revenue, department headcount, survey responses, product sales by region. Bars animate upward from the baseline on scroll with a smooth ease-out curve. Configurable bar width, gap, border radius, and hover highlight color.
Horizontal bar charts. Same data structure as vertical bars but rendered sideways. Better for long category labels that do not fit under a vertical bar. Rankings, comparisons with 8 or more categories, and any dataset where the labels are more important than the baseline.
Line charts. Time series data. Website traffic over months, stock prices, temperature trends, user engagement curves. The lines render with smooth curves (bezier interpolation) or straight segments depending on your preference. Data points display as circles at each position with hover tooltips showing the exact value.
Area charts. Same as line charts but with a gradient fill from the line down to the baseline. Use these when you want to emphasize cumulative values or make the magnitude of a trend more visually prominent. The gradient color derives from your palette choice and fades from opaque at the top to transparent at the bottom.
Pie charts. Proportions of a whole. Market share breakdowns, budget allocations, traffic source splits. The pie animates clockwise from 0 to 360 degrees on scroll with a smooth easing curve. Each slice gets its own color from your selected palette, with hover tooltips showing the percentage and absolute value.
Donut charts. Pie charts with a hole in the middle. Same data, same animation, but with a configurable inner radius that creates space for a center label. Use this space for a total value, a percentage change, or a category name. Donut charts read as more modern than pie charts and handle small slices better because the visual weight is concentrated around the perimeter.
Single-series charts show one dataset per chart. Multi-series mode lets you overlay multiple datasets on the same axes. Enable it from the module settings, then enter comma-separated values for each data point.
A bar chart with three series shows three grouped bars per category. Q1 revenue for Product A, Product B, and Product C side by side, repeated for Q2, Q3, and Q4. A line chart with three series shows three lines on the same grid, each with its own color and tooltips. An area chart with three series stacks the areas so the total at any point is the sum of all three.
Multi-series works with bar, horizontal bar, line, and area charts. Pie and donut charts are single-series by nature because they represent proportions of a whole.
Each series gets its own legend entry with a color swatch and label. The legend renders above, below, or alongside the chart depending on your layout settings. Click a legend item to toggle that series on or off, which is useful for comparing two specific datasets out of a group.
The Style tab includes nine built-in color palettes designed to cover common brand styles.
Default uses a balanced set of blues and grays that work on light backgrounds. Ocean leans toward teal and navy for corporate and financial services sites. Sunset uses warm oranges and reds for lifestyle and creative brands. Forest uses greens for sustainability and environmental companies. Violet uses purples for tech and creative agencies. Monochrome uses grayscale for minimalist designs. Corporate uses muted navy and slate for professional services. Pastel uses soft muted colors for editorial and lifestyle layouts. Bold uses saturated primary colors for high-contrast presentations.
Each palette provides 8 colors that auto-assign to your data points in order. If you have more than 8 data points, the palette cycles. Data point 9 gets the same color as data point 1, data point 10 gets the same as data point 2, and so on.
If none of the built-in palettes match your brand, select Custom. Eight individual color pickers appear, one for each color in your custom palette. Set them to your exact brand colors and the chart uses those values instead. Save the palette as a theme preset if you want to reuse it across multiple chart instances on the same site.
This is the technical part that matters for performance. Most chart tools for HubSpot rely on Chart.js, D3, or Highcharts. Chart.js is a 200KB JavaScript library. D3 is 250KB. Highcharts is 180KB with commercial licensing for business use. Every page that loads a chart from one of these libraries loads the full library, even if you only use one chart type.
Charts Pro renders everything as pure SVG elements using vanilla JavaScript. No Chart.js, no D3, no Highcharts, no external CDN calls. The module code is under 40KB including all six chart types, the animation engine, tooltip handling, and responsive scaling. When a visitor loads a page with a Charts Pro chart, they download 40KB instead of 200KB. The chart renders on page load without waiting for an external library to parse and initialize.
SVG has another advantage. It is fully responsive without any additional code. The chart scales with its container, stays sharp at any zoom level, and works on retina displays without additional image assets. It also exports cleanly to PDF if a visitor prints the page.
Scroll-triggered animations use the IntersectionObserver API to detect when the chart enters the viewport. Bars grow from zero to their full height. Lines draw from left to right. Pie slices rotate clockwise from 0 to their final angle. The animations respect prefers-reduced-motion for accessibility, so visitors with that setting enabled see the final chart state immediately without any animation.
Every chart type includes hover tooltips that display the exact value at the cursor position. Move your mouse over a bar and a tooltip appears above it with the category name and value. Hover over a line chart data point and the tooltip shows the x-axis value and y-axis value. Hover over a pie slice and the tooltip shows the category, absolute value, and percentage of the total.
Tooltip styling is controlled from the Style tab with dedicated fields for background color, text color, border radius, padding, font size, shadow, and arrow indicator color. The tooltip follows the cursor with a subtle delay so it does not feel jittery, and it auto-adjusts position to stay within the viewport on mobile screens.
On touch devices, tap a data point to show the tooltip. Tap outside the chart to dismiss it. This works consistently across iOS Safari, Chrome Android, and Samsung Internet.
Charts are visual. Screen readers cannot interpret a pie chart or describe the trend of a line chart. Accessibility guidelines (WCAG 2.1 AA) require charts to have a text alternative.
Charts Pro automatically generates an accessible HTML data table from your chart data. The table contains the same values with proper th and td elements, aria-label attributes, and semantic markup. You can display the table below the chart as a visible secondary view, hide it visually while keeping it accessible to screen readers, or turn it off completely if you are providing alternative text elsewhere.
The table styling is controlled from the Style tab with fields for background, border, header color, row stripe color, and padding. If you display it visibly, it looks intentional instead of like a debug fallback.
Investor updates and quarterly reports. Bar charts showing revenue growth, line charts tracking customer acquisition, pie charts breaking down revenue by product line. Corporate palette with light backgrounds and subtle grid lines. Data table visible below each chart for accessibility and fact-checking.
Landing pages with stat visualizations. Horizontal bar charts showing before and after metrics for case studies. Donut charts showing customer satisfaction scores. Area charts showing cumulative savings over time. Bold palette with high-contrast colors that match a conversion-focused page design.
Product pricing breakdowns. Pie charts showing customer distribution across pricing tiers. Bar charts comparing feature availability per plan. Line charts showing price scaling with usage. Use alongside Pricing Calculator Pro for a complete pricing page.
Blog post data visualizations. Embed charts directly in blog post content using the rich text module's custom HTML block, or add the Charts Pro module as a separate section in a multi-module blog post template. Great for data-driven content that would otherwise rely on static images.
Analytics dashboards for clients. Agencies building reporting dashboards in HubSpot can use Charts Pro to render monthly traffic, conversion rates, and campaign performance data. Clients see live-looking charts without the agency needing to build a custom dashboard from scratch.
Environmental and sustainability reports. Forest palette with green tones. Bar charts showing emissions reduction, area charts showing energy usage trends, pie charts showing waste diversion. Data table visible below each chart for compliance and transparency reporting.
Every visual property is controlled from the Style tab. Container background and border color, container padding, section title color and size, chart area background, grid line color and thickness, axis label color and font size, legend text color and position, tooltip background and text color, shadow color and blur radius, data table background and borders, responsive breakpoints, font family picker with Google Fonts support, and the 9 color palette options plus custom mode.
Dark mode is a switch. Set the container background to a dark color, adjust the grid lines and axis labels to a lighter shade, and the chart transforms into a dark mode visualization. No separate dark mode setting needed because every color is independently configurable.
Responsive breakpoints control when the chart switches to mobile layouts. On smaller screens, legends collapse below the chart, axis labels shrink, and tooltips reposition to stay within the viewport. You control the exact pixel breakpoints for tablet and mobile.
Charts Pro is available on the HubSpot Marketplace for $9.99. One purchase, no monthly fees, no external dependencies. Works on any HubSpot CMS template including website pages, landing pages, and blog posts.
If your HubSpot site needs charts and you do not want to pay for a SaaS tool, embed a Google Sheet, or hire a developer to integrate Chart.js, this is the module.