--- title: Charts Pro — Interactive SVG Charts for HubSpot description: Six chart types for HubSpot CMS — bar, horizontal bar, line, area, pie and donut. Pure SVG, scroll animation, hover tooltips, 9 palettes, fully styled from the editor. Zero dependencies, zero code. --- [![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/modules/charts-pro-module-by-studio-nope) HubSpot CMS Module # Charts your editor can actually build. Six chart types — bar, horizontal bar, line, area, pie and donut — rendered as crisp SVG with scroll animation, hover tooltips and gradient fills. Type your data straight into HubSpot, pick a palette, and style every detail from the editor. [Get it on the HubSpot Marketplace](https://ecosystem.hubspot.com/marketplace/modules/charts-pro-module-by-studio-nope) [See it in action](https://www.nopethemes.com/charts-pro-for-hubspot#demo1) **6** chart types **9** palettes **Zero** dependencies **WCAG** accessible No spreadsheets, no embeds, no scripts to paste. **Pure SVG, drawn in the browser, styled in the editor.** Area Chart ## Multi-series area with gradient fill Two datasets as smooth curved areas with gradient fills fading from top to bottom. Default blue palette, Inter, curved cubic-bezier lines. Hover any point for a tooltip. ## Area Chart Total visitors for the last 6 months Bar Chart ## Single series with rounded corners Six bars with an 8px corner radius on the sunset palette, warm cream background and Poppins. Bars grow upward on scroll. ## Bar Chart January to June 2025 Line Chart ## Multi-series on a dark background Two smooth curved lines on a dark card with the forest palette and DM Sans — proof every color, grid and surface is a field. Hover dots appear at the nearest point. ## Line Chart Total visitors for the last 6 months Pie Chart ## Segment distribution with percentages Five segments with percentage tooltips on the violet palette, Georgia serif and a lavender card. Slices sweep in clockwise on scroll. ## Pie Chart Visitors by browser Donut Chart ## Center total with the bold palette Five segments with a 55% center hole showing the total, high-contrast bold palette, Poppins and a warm card. Data labels on each slice. ## Donut Chart Visitors by browser Horizontal Bar Chart ## Rankings with data labels Five items ranked by usage with a value label on each bar, corporate palette on a slate card with Source Sans 3. Bars grow left to right on scroll. ## Horizontal Bar Chart Top browsers by usage ## Overview Charts Pro is an interactive data-visualisation module for HubSpot CMS. It renders six chart types — bar, horizontal bar, line, area, pie and donut — as pure SVG, drawn in the browser with dependency-free vanilla JavaScript. You enter data right in the HubSpot editor through repeater fields; charts animate on scroll, show tooltips on hover, and every visual property is a Style-tab field. No code, no spreadsheets, no external APIs. --- ## Chart types - **Bar** (vertical) — chunky rounded bars with a configurable corner radius; single or multi-series grouped side by side. - **Horizontal bar** — the same, rotated: labels on the Y axis, bars grow left to right. Great for rankings. - **Line** — smooth curved or straight lines with hover dots that appear on interaction; multi-series renders multiple lines. - **Area** — a line chart with gradient fills fading top to bottom; multi-series layers translucent gradients. - **Pie** — classic arc segments that sweep in clockwise on scroll; a single value renders as a full circle. - **Donut** — a pie with a configurable center hole (30–80%) that can display the total value. --- ## Entering data **Simple mode** (single series): a repeater of 1–20 rows, each a label and a value. Default rows ship in, so a chart renders the moment you drop it on the page. **Multi-series mode** (bar, horizontal bar, line, area): a categories repeater for the X-axis labels plus a datasets repeater (1–5 series), each with a name and comma-separated values. Values are trimmed, stripped of non-numerics, and padded or truncated to match the category count. Value formatting adds a prefix (e.g. `$`), a suffix (e.g. `%`), a thousands separator and an optional percentage in tooltips. An accessible data table can be hidden, shown beneath the chart, or rendered screen-reader-only. --- ## Styled entirely from the editor Nothing is hardcoded — 48 Style fields across nine groups: - **Container** — max width, padding, background, border, radius, shadow, chart height. - **Colors** — a palette selector plus heading, subheading and text colors; "Custom" unlocks eight individual color pickers. - **Grid & axes** — grid line color, width, axis line color, label sizes and colors. - **Typography** — a base font picker (inherits your theme) and sizes for heading, subheading, data labels and legend. - **Tooltip** — background, text, radius, font size and shadow. - **Legend** — dot size, gap, color and hover opacity. - **Data table** — header, borders, alternating rows, font size and radius. - **Spacing & responsive** — section padding and a tablet breakpoint. --- ## Color palettes Nine palettes are built in — Default (blue), Ocean, Sunset, Forest, Violet, Monochrome, Corporate, Pastel and Bold. Pick one and colors auto-assign to your data, cycling if you have more than eight items. Choose **Custom** for eight manual color pickers. Every demo above uses a different palette and font from the same module. --- ## Animation - **Bar / horizontal bar** — bars grow from zero to their final size. - **Line / area** — the line draws on with a stroke-dashoffset reveal; area gradients fade in. - **Pie / donut** — slices reveal with a staggered clockwise sweep. - Triggered on scroll via `IntersectionObserver`, and fully disabled when the visitor has `prefers-reduced-motion` set. --- ## Zero dependencies & accessible - **No libraries** — pure vanilla JavaScript, no jQuery, Chart.js or external CDN; every SVG node is created with `createElementNS`. - **Accessible** — ARIA labels on the chart and an optional data-table fallback for screen readers. - **Self-contained** — all classes scoped per instance, so multiple charts on one page run independently on any theme, or none. - **Robust data** — negative values clamp to 0, Y-axis ticks auto-calculate to nice numbers, non-numeric values become 0. [![Studio Nope](https://www.nopethemes.com/hubfs/studio-nope-themes-logo.png)](https://www.nopethemes.com?hsLang=en) Charts Pro · Studio Nope [Get the module](https://ecosystem.hubspot.com/marketplace/modules/charts-pro-module-by-studio-nope)