Tutorial · 6 min read

Why Your Charts Don't Work in Your CMS
(And How to Fix It for Good)

You spent time creating the perfect chart, clicked "embed," and pasted the code into your CMS. You hit publish, only to find a blank space, a broken box, or a security warning. This is a common frustration, but the reason is almost always the same.

The root cause: How modern embeds work

Most visualization tools rely on embed codes. These usually come in two flavors:

<iframe src="https://example.makemyhtml.com/embed/abc123" width="100%" height="400"></iframe>

Or, a JavaScript snippet:

<script src="https://charts.makemyhtml.com/embed.js"></script>
<div id="chart-abc123"></div>

These work fine on static websites, but when pasted into a CMS, they trigger security alarms.

Why CMS platforms strip your code

Content Management Systems (CMS) are built to protect your site. They use content sanitizers to automatically scrub your HTML when you save a page. They target the very elements that chart tools rely on:

🚫

<script> tags

JavaScript is the primary vector for XSS attacks. CMS platforms strip these tags by default to keep your site safe.

🚫

<iframe> tags

Iframes load external content, creating privacy and security risks. Many enterprise platforms block them entirely.

🚫

External <link> & <style>

External stylesheets can conflict with your theme's design or introduce vulnerabilities, so they are often ignored.

When you paste an embed, the CMS simply silences the "unsafe" parts, leaving you with nothing.

It's not a bug — it's a feature

This isn't a flaw in your CMS; it’s a security necessity. Allowing arbitrary JavaScript embeds from every editor would be a massive liability.

While workarounds exist—like asking IT to whitelist domains—they are slow and prone to failure. The fundamental issue is that most chart tools are built for developers, not for content editors working inside a restricted CMS environment.

The solution: Self-contained HTML

The only way to ensure your charts display 100% of the time is to use self-contained HTML—no scripts, no iframes, no external dependencies. Just standard <div> tags and inline CSS.

You can do surprisingly much with pure CSS:

Fully styled, accessible data tables.
Horizontal bar charts and progress meters.
Trend indicators and star ratings.

You lose the "hover-to-see-tooltip" interactivity, but you gain bulletproof reliability. In professional publishing, clarity and uptime always beat fancy animations.

A practical example

Here is a simple bar chart in pure HTML that works everywhere:

<div style="font-family: sans-serif; max-width: 500px;">
  <div style="margin-bottom: 12px;">
    <div style="font-size: 13px; font-weight: 600;">Q1 Sales</div>
    <div style="background: #ccd8e2; border-radius: 4px; height: 20px;">
      <div style="width: 72%; height: 100%; background: #3b82f6; border-radius: 4px;"></div>
    </div>
  </div>
</div>

The result:

Q1 Sales

Stop writing HTML by hand

Generating this HTML for every row of data is tedious and prone to errors. That’s exactly why we built MakeMyHTML.

Upload your CSV, configure your style, and copy the clean, self-contained HTML. Paste it into your CMS, and you’re done. No IT tickets, no broken iframes.

Checklist: Before you paste

✓ Does the code contain a <script> tag? It will be stripped.

✓ Does it use an <iframe>? Most CMS platforms block these.

✓ Does it load external CSS? This often causes theme conflicts.

✓ Are you using a rich text editor? Always switch to "HTML Mode" or "Raw HTML" blocks.

Need a chart that just works?

Try MakeMyHTML — free, no account required →