Skip to main content
OptiTech

Blocks · OT_ChartBlock

ChartBlock

CMS-driven data visualization block. Five chart types: line, area, bar, bar stacked, and radial gauge. Four color variants, five series color palettes, fully responsive via Recharts.

Line — Trend over time · canvas · brand palette

Multi-series. Monotone curves, no dots at rest, activeDot on hover. Source: Freddie Mac 2024.

chartType: line · color: canvas · seriesColors: brand · showLegend: true · height: md · valueSuffix: %

Mortgage Rate Trends

Source: Freddie Mac, 2024

CMS JSON Data
{
  "series": [
    {
      "name": "30-Year Fixed",
      "data": [
        6.62,
        6.71,
        6.94,
        6.99,
        7.09,
        6.86,
        6.73,
        6.65,
        6.2,
        6.08,
        6.78,
        6.85
      ]
    },
    {
      "name": "15-Year Fixed",
      "data": [
        5.89,
        5.96,
        6.17,
        6.29,
        6.38,
        6.16,
        5.99,
        5.9,
        5.48,
        5.41,
        5.99,
        6
      ]
    }
  ],
  "labels": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ]
}

Area — Volume or growth · surface · cool palette

Single series with gradient fill. Fills from 30% → 0% opacity for depth without noise.

chartType: area · color: surface · seriesColors: cool · showLegend: false · height: md · valueSuffix: M

API Request Volume

Trailing 12 months — all environments

CMS JSON Data
{
  "series": [
    {
      "name": "Requests (M)",
      "data": [
        18.2,
        21.4,
        19.8,
        24.1,
        27.6,
        31.2,
        29.8,
        33.4,
        38.1,
        42.7,
        39.9,
        47.3
      ]
    }
  ],
  "labels": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ]
}

Bar — Comparison · canvas · warm palette · multi-color cells

Single-series bars get per-category Cell coloring. Warm palette uses OKLCH amber-gold tones, harmonious with the brand but offering hue contrast.

chartType: bar · color: canvas · seriesColors: warm · height: md · valueSuffix: /100

Patient Satisfaction by Department

Q4 2024 — Press Ganey scores

CMS JSON Data
{
  "series": [
    {
      "name": "Satisfaction Score",
      "data": [
        87,
        92,
        78,
        95,
        83,
        89
      ]
    }
  ],
  "labels": [
    "Emergency",
    "Cardiology",
    "Oncology",
    "Maternity",
    "Orthopedics",
    "Neurology"
  ]
}

Bar Stacked — Composition · surface · diverging palette

Rounded top corners on the topmost series only. Each series gets its own palette color.

chartType: barStacked · color: surface · seriesColors: diverging · showLegend: true · height: lg · valueSuffix: %

Loan Portfolio Mix

By product type — quarterly 2024

CMS JSON Data
{
  "series": [
    {
      "name": "Mortgage",
      "data": [
        42,
        44,
        41,
        45
      ]
    },
    {
      "name": "Auto",
      "data": [
        28,
        26,
        29,
        27
      ]
    },
    {
      "name": "Personal",
      "data": [
        30,
        30,
        30,
        28
      ]
    }
  ],
  "labels": [
    "Q1 2024",
    "Q2 2024",
    "Q3 2024",
    "Q4 2024"
  ]
}

Radial — Single score or KPI · brand · mono palette (showcase hero)

White gauge arc on brand background. 280° arc. Count-up animation on mount (expo-out, 800ms). Skipped under prefers-reduced-motion.

chartType: radial · color: brand · seriesColors: mono · height: md

Patient Satisfaction Index

System-wide composite — FY2024

0/100Satisfaction Index
CMS JSON Data
{
  "series": [
    {
      "name": "Satisfaction Index",
      "data": [
        84
      ]
    }
  ],
  "labels": [
    "Score"
  ],
  "max": 100
}

Empty state — invalid or missing JSON

Renders when parseChartData returns null. Sized to match configured height. Never collapses the layout.

chartData: null · color: canvas · height: md

Chart data unavailable

Chart data unavailable

Check that the JSON in the CMS matches the required format for this chart type.