What It Does
Charts Pro is an interactive data visualization module for HubSpot CMS. It renders six chart types (bar, horizontal bar, line, area, pie, donut) as pure SVG with zero external dependencies. Data is entered directly in the HubSpot editor through repeater fields. Charts animate on scroll, show tooltips on hover, and every visual property is controlled from the Style tab. No code, no spreadsheets, no external APIs.
Chart Types
- Bar Chart (vertical): chunky rounded bars with configurable corner radius, single or multi-series grouped side by side
- Horizontal Bar Chart: same as bar, rotated. Labels on the Y axis, bars grow left to right. Great for rankings and comparisons
- Line Chart: smooth curved or straight lines with hover dots that appear on interaction. Multi-series renders multiple lines in different colors
- Area Chart: like a line chart but with gradient fills fading from top to bottom. Multi-series stacks translucent gradient layers
- Pie Chart: classic pie with arc segments. Slices animate clockwise on scroll. Single data point renders as a full circle
- Donut Chart: pie chart with a configurable center hole (30% to 80%). Center displays the total value when data labels are enabled
Content Tab
Header (3 fields)
Chart heading, subheading, and a toggle to show or hide the header section. All text is configurable.
Chart Configuration (2 fields)
Chart type selector (bar, horizontal bar, line, area, pie, donut) and a multi-series toggle. Multi-series is only available for bar, horizontal bar, line, and area charts.
Data Entry
Simple mode (single series): a repeater with 1 to 20 rows. Each row has a label and a value. Default data includes four quarterly values so the chart renders immediately on first drop.
Multi-series mode: a categories repeater (1 to 20 labels for the X axis) and a datasets repeater (1 to 5 series). Each dataset has a name and comma-separated values matching the category count. Values are parsed with whitespace trimming, non-numeric stripping, and automatic padding or truncation to match the category count.
Value Formatting (4 fields)
Prefix (e.g. "$"), suffix (e.g. "%"), thousands separator toggle, and a toggle to show percentage in tooltips.
Data Table (2 fields)
Accessible data table rendered from the same chart data. Three modes: hidden, visible (shown below the chart), or screen-reader-only (rendered in the DOM but visually hidden for accessibility).
Settings Tab (12 fields)
- Animation: enable/disable, duration in ms (default 800), easing (ease-out, ease-in-out, linear)
- Tooltips: show/hide hover tooltips
- Data Labels: render values directly on the chart (above bars, at data points, inside pie slices, center of donut)
- Legend: show/hide, position top or bottom
- Grid Lines: show/hide. Horizontal only for vertical charts, vertical for horizontal bars. Hidden for pie and donut
- Y-Axis Start at Zero: when disabled, the Y axis starts at the minimum data value. Hidden for pie and donut
- Donut Hole Size: 30% to 80%, default 60%. Only visible when chart type is donut
- Line Curve: straight or curved (smooth cubic bezier). Only visible for line and area charts
- Bar Corner Radius: 0 to 12px, default 8. Only visible for bar and horizontal bar
Style Tab (48 fields across 9 groups)
Container (7 fields)
- Max width, container padding, background color + opacity, border color + opacity, border radius, shadow (none/sm/md/lg), chart height in pixels
Colors (12 fields)
- Color palette selector: Default (shadcn blue), Ocean, Sunset, Forest, Violet, Monochrome, Corporate, Pastel, Bold, Custom
- 8 custom color pickers (only visible when palette is set to Custom)
- Heading color, subheading color, text color (axis labels, legend, data labels)
Grid and Axes (6 fields)
- Grid line color + opacity, grid line width, axis line color, axis label font size, axis label color, value label font size
Typography (5 fields)
- Base font (font picker, inherits from theme), heading size, subheading size, data label size, legend font size
Tooltip (5 fields)
- Tooltip background + opacity, text color + opacity, border radius, font size, shadow (none/sm/md)
Legend (4 fields)
- Dot size, gap between items, text color, hover opacity
Data Table (6 fields)
- Header background, header text color, border color, alternating row background, font size, border radius
Spacing + Responsive (3 fields)
- Padding top/bottom (none/sm/md/lg/xl), tablet breakpoint in pixels
Color Palettes
9 predefined palettes built into the module. Select one from the Style tab and colors auto-assign to data points. Each palette has 8 colors that cycle if you have more than 8 items. Select "Custom" to unlock 8 individual color pickers for full manual control.
Animation
Charts animate on scroll via IntersectionObserver (threshold 0.2). Each chart type has its own animation style:
- Bar / Horizontal Bar: bars grow from zero to final height (or width)
- Line: lines draw left to right using the SVG stroke-dashoffset technique
- Area: same line draw effect with the gradient fill fading in
- Pie / Donut: slices reveal with a staggered clockwise sweep, each slice slightly delayed
Animation respects prefers-reduced-motion. When the user has reduced motion enabled, charts render at their final state instantly with no animation.
Formula Engine and Data Handling
- Negative values are clamped to 0 (not supported in v1)
- Y-axis ticks are auto-calculated using a nice number algorithm (4 to 6 ticks)
- Multi-series dataset values are parsed from comma-separated text with whitespace trimming
- If value count does not match category count, values are padded with zeros or truncated
- Non-parseable values are treated as 0
Technical Details
- Zero dependencies: pure vanilla JavaScript, no jQuery, no Chart.js, no Recharts. All SVG elements created with document.createElementNS
- No innerHTML: all DOM manipulation uses createElement, textContent, and appendChild
- Accessible: ARIA labels on SVG, optional data table fallback for screen readers, keyboard support
- Instance isolation: all CSS scoped via HubL docs. Multiple charts on the same page work independently
- Template agnostic: works on website pages, landing pages, blog posts. No theme dependency
- Cross-browser: SVG viewBox with preserveAspectRatio for responsive scaling on all modern browsers
- Marketplace compliant: all classes prefixed charts-pro__, font fields inherit from theme, no eval, no external CDN