Raw Chart
raw-chartuiEscape-hatch wrapper that takes a full ECharts option object. Lets you build any ECharts type (sankey, sunburst, candlestick, graph, boxplot, parallel, themeRiver, custom) with full customization. Theme-aware exports available via useChartTheme.
Installation
$pnpm dlx uipkge-ng@latest add raw-chart$npx uipkge-ng@latest add raw-chart$yarn dlx uipkge-ng@latest add raw-chart$bunx uipkge-ng@latest add raw-chartManifest:
https://uipkge.dev/r/angular/raw-chart.jsonInstalls to:src/app/components/ui/charts/raw-chart/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
rawOptionFull ECharts option passed straight through. | Record<string, unknown> | {} | optional |
height | number | string | 300 | optional |
option | Record<string, unknown> | — | optional |
ariaLabelAccessible name announced for the chart image. Defaults to "Chart". | string | — | optional |
class | string | — | optional |
npm dependencies
Used by
Files installed (3)
src/app/components/ui/charts/raw-chart/raw-chart.component.ts3.6 kB
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges, ViewChild, ChangeDetectionStrategy, } from '@angular/core' import type * as echarts from 'echarts/core' import { cn } from '@/lib/utils' import { getChartColors } from '../use-chart-theme' /** * Angular port of the UIPKGE RawChart — escape hatch passing a full ECharts option straight through. Standalone. Same inputs as the Vue `RawChart` (`option`, `height`). */ @Component({ changeDetection: ChangeDetectionStrategy.Eager, selector: 'ui-raw-chart, [ui-raw-chart]', standalone: true, host: { '[attr.data-slot]': '"raw-chart"', '[attr.data-uipkge]': '""', '[class]': 'hostClass', '[attr.role]': '"img"', '[attr.aria-label]': 'ariaLabel || "Chart"', '[attr.tabindex]': '0', '[style.height]': 'heightStyle', }, template: `<div #chartEl class="size-full"></div>`, }) export class UiRawChartComponent implements AfterViewInit, OnChanges, OnDestroy { /** Full ECharts option passed straight through. */ @Input() rawOption: Record<string, unknown> = {} @Input() height: number | string = 300 @Input() option?: Record<string, unknown> /** Accessible name announced for the chart image. Defaults to "Chart". */ @Input() ariaLabel?: string @Input('class') className?: string @ViewChild('chartEl', { static: false }) chartEl?: ElementRef<HTMLDivElement> private chart: echarts.ECharts | null = null private unsubscribeTheme: (() => void) | null = null get hostClass(): string { return cn('block focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', this.className) } get heightStyle(): string { return /^\d+$/.test(String(this.height)) ? `${this.height}px` : String(this.height) } /** Build the merged ECharts option (pure — no DOM needed, unit-testable). */ getOption(): Record<string, unknown> { const userOption: Record<string, any> = this.option ?? {} return { color: getChartColors(), ...this.rawOption, ...userOption, } } async ngAfterViewInit(): Promise<void> { if (typeof window === 'undefined' || !this.chartEl?.nativeElement) return const [ { use }, { CanvasRenderer }, { BarChart: EChartsBarChart, LineChart: EChartsLineChart, PieChart: EChartsPieChart, ScatterChart: EChartsScatterChart, }, comps, ] = await Promise.all([ import('echarts/core'), import('echarts/renderers'), import('echarts/charts'), import('echarts/components'), ]) use([ CanvasRenderer, EChartsBarChart, EChartsLineChart, EChartsPieChart, EChartsScatterChart, comps.GridComponent, comps.TooltipComponent, comps.LegendComponent, ]) const { init } = await import('echarts/core') this.chart = init(this.chartEl.nativeElement) this.chart.setOption(this.getOption()) const { onChartThemeChange } = await import('../use-chart-theme') this.unsubscribeTheme = onChartThemeChange(() => this.chart?.setOption(this.getOption())) if (typeof ResizeObserver !== 'undefined') { new ResizeObserver(() => this.chart?.resize()).observe(this.chartEl.nativeElement) } } ngOnChanges(changes: SimpleChanges): void { if (this.chart && (changes['option'] || changes['rawOption'])) { this.chart.setOption(this.getOption()) } } ngOnDestroy(): void { this.unsubscribeTheme?.() this.unsubscribeTheme = null try { this.chart?.dispose() } catch { /* already disposed */ } this.chart = null } }src/app/components/ui/charts/raw-chart/index.ts0.1 kB
export { UiRawChartComponent } from './raw-chart.component'src/app/components/ui/charts/use-chart-theme.ts7.4 kB
// Angular port of `useChartTheme.ts` (Vue) — framework-free helpers + plain // functions instead of Vue `computed` refs. The palette is driven by Tailwind // v4 CSS variables (`--chart-1`..`--chart-5`, `--muted-foreground`, `--border`, // `--popover`, …) so dark/light flips happen automatically when the consumer // toggles their theme class. Values resolve at runtime via `getComputedStyle`, // so they pick up whatever the consumer set in their own `tailwind.css`. // // In a non-DOM environment (SSR / unit tests) every accessor returns the // fallback palette, which roughly matches the shadcn Neutral defaults so the // first paint doesn't flicker. export const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308'] // ECharts' canvas renderer does not accept OKLCH in every browser. Assigning // one of our Tailwind tokens to `fillStyle` can silently leave the sentinel // colour in place, turning a whole chart black. Convert OKLCH ourselves and // let the canvas normalize older CSS colour formats. let _hexCanvas: CanvasRenderingContext2D | null = null export function toCanvasColor(cssColor: string): string { const value = cssColor.trim() const match = value.match( /^oklch\(\s*([+-]?(?:\d+\.?\d*|\.\d+))(%?)\s+([+-]?(?:\d+\.?\d*|\.\d+))\s+([+-]?(?:\d+\.?\d*|\.\d+))(?:deg)?(?:\s*\/\s*([+-]?(?:\d+\.?\d*|\.\d+))(%?))?\s*\)$/i, ) if (match) { const lightness = Number(match[1]) / (match[2] === '%' ? 100 : 1) const chroma = Number(match[3]) const hue = (Number(match[4]) * Math.PI) / 180 const alpha = match[5] == null ? 1 : Number(match[5]) / (match[6] === '%' ? 100 : 1) const a = chroma * Math.cos(hue) const b = chroma * Math.sin(hue) const l = Math.pow(lightness + 0.3963377774 * a + 0.2158037573 * b, 3) const m = Math.pow(lightness - 0.1055613458 * a - 0.0638541728 * b, 3) const s = Math.pow(lightness - 0.0894841775 * a - 1.291485548 * b, 3) const linear = [ 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s, ] const rgb = linear.map((channel) => { const encoded = channel <= 0.0031308 ? 12.92 * channel : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055 return Math.round(Math.min(1, Math.max(0, encoded)) * 255) }) return alpha < 1 ? `rgba(${rgb.join(', ')}, ${alpha})` : `rgb(${rgb.join(', ')})` } if (typeof document === 'undefined') return cssColor if (!_hexCanvas) { _hexCanvas = document.createElement('canvas').getContext('2d') } if (!_hexCanvas) return cssColor _hexCanvas.fillStyle = '#010203' _hexCanvas.fillStyle = value const normalized = _hexCanvas.fillStyle as string return normalized === '#010203' && value.toLowerCase() !== '#010203' ? value : normalized } // Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a // canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha) // only works when `colorString` is `#rrggbb`; once tokens resolve to // oklch() post-hydration the gradient stops break and the canvas paint // throws every frame. Stay defensive and always return rgba. export function toRgba(cssColor: string, alpha: number): string { const normalized = toCanvasColor(cssColor) if (normalized.startsWith('#') && normalized.length === 7) { const r = parseInt(normalized.slice(1, 3), 16) const g = parseInt(normalized.slice(3, 5), 16) const b = parseInt(normalized.slice(5, 7), 16) return `rgba(${r},${g},${b},${alpha})` } if (normalized.startsWith('rgba(')) { return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`) } if (normalized.startsWith('rgb(')) { return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`) } // Canvas refused to parse this color -- ship the original string and // let ECharts complain (better than crashing the paint loop). return cssColor } export function resolveCssVar(name: string, fallback: string): string { if (typeof window === 'undefined') return fallback const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim() if (!v) return fallback return toCanvasColor(v) } export function getChartColors(): string[] { return Array.from({ length: 5 }, (_, i) => resolveCssVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)) } export function getChartTextColor(): string { return resolveCssVar('--muted-foreground', '#888888') } export function getChartAxisColor(): string { return resolveCssVar('--border', '#e5e5e5') } export function getChartSplitLineColor(): string { return resolveCssVar('--border', '#f0f0f0') } export function getChartTooltipBg(): string { return resolveCssVar('--popover', 'rgba(255,255,255,0.96)') } export function getChartTooltipBorder(): string { return resolveCssVar('--border', '#e5e5e5') } export function getChartTooltipText(): string { return resolveCssVar('--popover-foreground', '#333333') } export function getChartBgColor(): string { return resolveCssVar('--card', resolveCssVar('--background', '#ffffff')) } // The app's accent, for the one highlighted element on a chart or map — a // selected route, a focused bar. Category series keep using getChartColors(). export function getChartAccentColor(): string { return resolveCssVar('--primary', '#38bdf8') } // Out-of-bounds / failure colour for charts that encode good vs bad rather // than a category — control limits, error series. export function getChartDangerColor(): string { return resolveCssVar('--destructive', '#dc2626') } // Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid, // tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge // shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.) // merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }` // doesn't blow away the wrapper's `color` + base font defaults on the same // axisLabel block. Arrays + primitives replace outright. export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T { if (!user) return base const out: any = { ...base } for (const k of Object.keys(user)) { const bv = (base as any)[k] const uv = (user as any)[k] if ( bv != null && uv != null && typeof bv === 'object' && typeof uv === 'object' && !Array.isArray(bv) && !Array.isArray(uv) ) { out[k] = { ...bv, ...uv } } else { out[k] = uv } } return out } // Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger). // Static because gauges have semantic meaning (green safe / red danger) that // we deliberately don't theme-flip. export const gaugeThresholds: [number, string][] = [ [0.6, '#14b8a6'], [0.85, '#f59e0b'], [1, '#dc2626'], ] /** * Re-render callback subscription for theme flips: bumps every listener * whenever `<html>` class/style changes (the typical shadcn dark-mode pivot) * so chart components can rebuild their options and re-paint. Returns an * unsubscribe function. No-op (never fires) outside the DOM. */ export function onChartThemeChange(cb: () => void): () => void { if (typeof window === 'undefined' || typeof MutationObserver === 'undefined') return () => {} const observer = new MutationObserver(() => cb()) observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] }) return () => observer.disconnect() }
Raw manifest:https://uipkge.dev/r/angular/raw-chart.json