032 / GOOGLE CHARTS / BAR & COLUMN

Google Column Bar Chart

Google ColumnChart with clean vertical bars, transparent background, and dark theme grid lines.

SPEC: #032
ENGINE: Google Charts
FAMILY: Bar & Column
RENDERER: google-runtime
STATUS: stable

Source GitHub

PLOTCN/REGISTRY/GOOGLE-BAR/SOURCE

pnpm dlx shadcn@latest add @plotcn/google-bar

Checking public registry…

View local registry JSON

REGISTRY direct URL·ENGINE Google Charts·FILES 1·DEPENDENCIES 2

Copied as source. No Plotcn runtime required.

… × 340Container width

Measuring preview...

GOOGLE · GOOGLE-RUNTIME · 0 × 340pxMotion enabled · ResizeObserver

Component Specifications

BEST FOR: Google Column Bar Chart visual analytics and bar category telemetry.
DATA MODEL: Normalized bar records matching canonical dataShape.
INTERACTION: Pointer hover and focus crosshairs
RESPONSIVE: Container-aware ResizeObserver
ANIMATION: Static immediate draw
RUNTIME: Google Charts google-runtime

01 / Component Usage

Basic & Interactive Integration

Import GoogleBar directly into your React client component. Provide an array of observations conforming to the data shape.

page.tsx

import { GoogleBar } from "@/components/charts/google/google-bar"

const data = [
  {
    "label": "Jan",
    "value": 186
  },
  {
    "label": "Feb",
    "value": 305
  },
  {
    "label": "Mar",
    "value": 237
  }
]

export default function ChartDemo() {
  return (
    <div className="w-full max-w-xl h-80">
      <GoogleBar data={data} color="#10b981" />
    </div>
  )
}

Requires a client context ('use client') for DOM lifecycle and container measurement.

Expected ResultLive 220px

Container-aware width · 200px height

02 / Data Contract

Input Schema & Coordinates

Input data format for Google Column Bar Chart. Records should provide required coordinates and metrics.

Chart data contract
Field	Type	Required	Meaning
`label`	`string`	Yes	Category label or horizontal axis timestamp
`value`	`number`	Yes	Metric numerical magnitude

Null / Missing Value Policy:

Missing values are gracefully handled or skipped depending on interpolation rules.

Coordinate Ordering Policy:

Records should follow monotonic sorting for sequential coordinate plots.

Example Observation Payload:

[
  {
    "label": "Jan",
    "value": 186
  },
  {
    "label": "Feb",
    "value": 305
  },
  {
    "label": "Mar",
    "value": 237
  }
]

03 / Component API & Styling

Props Reference & Interactive Prop Explorer

Inspect every component property, customize semantic color roles live with instant visual feedback, and copy production-ready code with active prop configurations.

Colors & Appearance Configuration

Customize primary, reference, or annotation series colors. Defaults derive from Plotcn theme tokens.

Generated Usage Code (Live Props):

<GoogleBar
  data={data}
  xKey="date"
  seriesKey="value"
/>

Interactive Prop Preview Lab

colorstring

Primary theme stroke or fill color. Accepts CSS variables or color values.

Select value to preview live:#10b981

Active: color="#10b981"Default: "var(--chart-1, #10b981)"

All Properties (4)

Component properties
Property	Type	Default	Required	Description
dataReq	`Record<string, any>[]`	`—`	Yes	Array of structured observations or datum objects to visualize. Best for: Primary dataset
colorOpt	`string`	`"var(--chart-1, #10b981)"`	No	Primary theme stroke or fill color. Accepts CSS variables or color values. Best for: Theming and visual branding
heightOpt	`number \| string`	`320`	No	Container height in pixels or standard CSS dimension strings.
classNameOpt	`string`	`undefined`	No	Tailwind CSS classes or custom stylesheet class applied to container wrapper.

04 / Cookbook & States

Component Variants & Edge States

Production cookbooks showcasing configuration variants alongside verified handling of loading, empty data, and network error states.

Google Column Bar Chart (Default)

Standard presentation with Plotcn dark theme tokens.

<GoogleBar data={data} color="#10b981" />

Lifecycle & Exception States

01. Loading State

Skeletons indicate runtime fetch or pending data queries.

02. Empty Data State

Handles empty collections ([]) gracefully without crashing.

03. Error State

Graceful failure banner when data source or script fails.

05 / Responsive Lab

Container-Driven Breakpoints

Scales gracefully according to container width, recalculating layout bounds.

Desktop

1100px+

Full horizontal scale and complete axis tick labeling.

Tablet

768px

Tighter margins with optimized coordinate grid spacing.

Mobile

390px

Compact labels and touch-friendly interaction.

Tablet Preview (768px Container Constraint)Auto-measuring

Mobile Preview (390px Container Constraint)Compact tap region

06 / Assistive Technology

Accessibility & Navigation Standards

Accessible visualization presenting Google Column Bar Chart data with semantic contrast.

Semantic Role & Landmark

Container mounts as figure[role="region"] with explicit assistive label.

Color-Independent Legibility

Coordinate baselines and labels preserve data legibility regardless of color perception.

Screen Reader Summary

Embeds visually hidden summary (.sr-only) declaring: “Google Column Bar Chart data visualization”

Reduced Motion Support

Suppresses transitions when user prefers reduced motion.

Keyboard Interaction Model

Keyboard interaction model
Key	Action
`Tab`	Focus chart container and navigate through interactive regions.

07 / Source Anatomy

Internal Architecture & File Dependencies

Source-first ownership model. Inspect the exact component call tree, dependencies, and full implementation below.

Component Architecture Call Tree

●GoogleBar(Component Entry)

└──Google Charts Engine Layer[google-runtime]

Visualization calculations and rendering via Google Charts.

Involved Source Files & Registry Assets

registry/google/google-bar.tsx

Primary component source implementation.