Published on 2026-02-22

Chart.js Data Visualizations in Markdown

How to embed bar charts, line graphs, and pie charts dynamically using Chart.js JSON configurations.

While tools like Mermaid and PlantUML are great for structural diagrams (flowcharts, architecture), they are not designed for plotting numerical data.

For data visualization, MarkdownToPrettyPDF integrates Chart.js, a powerful library that renders beautiful, animated, responsive charts on the web.

You can generate Chart.js visualizations directly in your Markdown by wrapping a valid JSON configuration block inside a chart code block.

How It Works

A Chart.js code block requires you to provide the configuration object (in JSON format) that represents the type, data, and options of the chart.

syntax

{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [{
      "label": "Monthly Revenue",
      "data": [12000, 19000, 3000, 5000, 20000, 30000],
      "backgroundColor": "rgba(191, 6, 3, 0.5)",
      "borderColor": "#BF0603",
      "borderWidth": 1
    }]
  }
}

Chart

Supported Chart Types

Chart.js supports numerous chart types natively. By simply altering the "type" property, you fundamentally change the visualization.

Pie Charts & Doughnut Charts

Excellent for showing proportional data.

syntax

{
  "type": "doughnut",
  "data": {
    "labels": ["Desktop", "Mobile", "Tablet"],
    "datasets": [{
      "data": [65, 30, 5],
      "backgroundColor": [
        "#ff6384",
        "#36a2eb",
        "#cc65fe"
      ]
    }]
  }
}

Chart

Line Charts

Perfect for tracking trends over time.

syntax

{
  "type": "line",
  "data": {
    "labels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "datasets": [{
      "label": "Active Users",
      "data": [150, 230, 224, 280, 400],
      "borderColor": "#36a2eb",
      "tension": 0.4,
      "fill": true,
      "backgroundColor": "rgba(54, 162, 235, 0.2)"
    }]
  }
}

Chart

Radar Charts

Useful for comparing multiple variables side-by-side.

syntax

{
  "type": "radar",
  "data": {
    "labels": ["Speed", "Reliability", "Cost", "Security", "Usability"],
    "datasets": [{
      "label": "Vendor A",
      "data": [80, 90, 70, 85, 95],
      "borderColor": "#ff6384"
    }, {
      "label": "Vendor B",
      "data": [95, 75, 50, 90, 80],
      "borderColor": "#36a2eb"
    }]
  }
}

Chart

Adding Customization (Options)

You can deeply customize the charts using the "options" key. You can toggle legends, add titles, and configure axes.

syntax

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{"label": "Value", "data": [10, 20, 30]}]
  },
  "options": {
    "plugins": {
      "title": {
        "display": true,
        "text": "Custom Title Example"
      },
      "legend": {
        "display": false
      }
    }
  }
}

Chart

By mixing textual explanations with literal data representations, Chart.js allows you to turn static Markdown reports into highly persuasive analytical documents.