Pro Components

Base Components

Charts 1

Bullet chart showing actual value against a target with colored performance ranges (poor, satisfactory, good).

Example

Revenue with Target Band
Monthly revenue within acceptable range
Revenue
Target (280)
Range (240-320)

Introduction

Charts 1 is a bullet chart for KPIs:
  • Ranges: Background zones (e.g. poor / satisfactory / good) with distinct colors.
  • Actual: Horizontal bar showing the current value.
  • Target: Marker (e.g. triangle) for the target value.
  • Legend: Actual, target, and range labels.
Compact layout for dashboards where you need actual vs target with qualitative context. You can replace the static values with props and wire to your data.

Usage

import { ChartCard26 } from "@/components/ui/chart-card-26";

<ChartCard26 />

On this page

ExampleIntroductionInstallationUsage