<!--
  templateType: section
  label: Charts
  isAvailableForNewContent: true
  description: "Interactive data visualizations with Chart.js - stacked chart modules for performance metrics and revenue trends."
-->
{% dnd_section padding={"top": 80, "bottom": 80, "left": 20, "right": 20}, max_width=1400 %}
  {% dnd_row padding={"bottom": 48} %}
    {% dnd_column width=12 %}
      {% dnd_module "charts_heading"
        path="@hubspot/rich_text",
        label="Charts Heading",
        html='<div style="text-align: center;"><h2>Data Visualization</h2><p style="font-size: 1.125rem; color: var(--color-text-secondary); max-width: 600px; margin: 0 auto;">Interactive charts powered by Chart.js with real-time data capabilities</p></div>'
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
  {% dnd_row padding={"bottom": 40} %}
    {% dnd_column width=12 %}
      {% dnd_module "performance_label"
        path="@hubspot/rich_text",
        label="Performance Label",
        html='<h3 style="font-size: 1.5rem; margin-bottom: 0.5rem;">Performance Metrics Overview</h3><p style="font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 1.5rem;">Comparing Q1 2023 vs Q4 2024 across 24 business metrics</p>'
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
  {% dnd_row padding={"bottom": 60} %}
    {% dnd_column width=12 %}
      {% dnd_module "performance_chart"
        path="../modules/chart.module",
        label="Performance Chart"
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
  {% dnd_row padding={"bottom": 40} %}
    {% dnd_column width=12 %}
      {% dnd_module "revenue_label"
        path="@hubspot/rich_text",
        label="Revenue Label",
        html='<h3 style="font-size: 1.5rem; margin-bottom: 0.5rem;">Revenue Growth Trends</h3><p style="font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 1.5rem;">24 months of revenue data across three product lines</p>'
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
  {% dnd_row %}
    {% dnd_column width=12 %}
      {% dnd_module "revenue_chart"
        path="../modules/chart.module",
        label="Revenue Chart",
        content={
          "chart_type": "line",
          "sample_dataset": "revenue-growth"
        }
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
{% end_dnd_section %}
