@chartml/chart-metric

Metric card chart renderer plugin for ChartML - displays KPI metrics with comparison indicators and trend colors.

Installation

npm install @chartml/chart-metric

Usage

import { ChartML } from '@chartml/core';
import { createMetricRenderer } from '@chartml/chart-metric';

const chartml = new ChartML();
chartml.registerChartRenderer('metric', createMetricRenderer());

const spec = `
data:
  - current: 52000
    previous: 45000

visualize:
  type: metric
  value: current
  format: $,.0f
  compareWith: previous
  style:
    title: "Monthly Revenue"
`;

await chartml.render(spec, container);

Features

• 📊 Large value display - Prominent metric value with responsive font sizing
• 📈 Comparison indicators - Up/down arrows with percentage change
• 🎨 Trend coloring - Green for positive, red for negative, gray for neutral
• 🔢 D3 formatting - Support for all D3 format specs (currency, percent, SI-prefix, etc.)
• 📱 Responsive - Adapts font size based on container width

Format Specs

Supports all D3 format specifications:

• .1% - Percent with 1 decimal (e.g., "4.2%")
• $,.2f - Currency with thousands separator (e.g., "$52,000.00")
• .3s - SI-prefix notation (e.g., "52.0k", "1.2M")
• d - Integer (e.g., "52000")

See D3 Format Documentation for more options.

ChartML Spec

data:
  - current: 0.042
    previous: 0.038

visualize:
  type: metric
  value: current          # Field to display
  format: .1%             # D3 format spec
  compareWith: previous   # Optional comparison field
  align: center           # left | center | right
  showLabel: true         # Show title
  style:
    title: "Conversion Rate"

License

MIT © Jason Adams