Raw Chart

Vue chart

Escape-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 shadcn-vue@latest add https://uipkge.dev/r/vue/raw-chart.json

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/raw-chart.json

$ yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/raw-chart.json

$ bunx shadcn-vue@latest add https://uipkge.dev/r/vue/raw-chart.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/raw-chart

Examples

Props

Name	Type / Values	Default	Required
`option`	`any`	—	required
`height`	`number \| string`	`300`	optional
`autoresize` Auto-resize on container width change. Default true.	`boolean`	`true`	optional
`class`	`string`	—	optional

Dependencies

echarts vue-echarts

Used by

analytics-overview charts

Files (3)

app/components/ui/charts/raw-chart/RawChart.vue 2 kB

<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'

// Raw escape hatch. The opinionated wrappers (AreaChart, BarChart,
// FunnelChart, ...) cover the common cases with sensible defaults +
// a `data` prop. When you need a chart type they don't wrap
// (Sankey, Sunburst, Graph, Candlestick, ThemeRiver, Tree, Parallel,
// Custom) -- or when you need a level of customisation the wrappers
// can't expose without leaking ECharts internals -- reach for this
// component and pass a complete ECharts option object.
//
// You're responsible for `use()`-registering the chart types and
// components you need before this component renders. The canvas
// renderer is registered here so you don't have to:
//
//   import { use } from 'echarts/core'
//   import { SankeyChart } from 'echarts/charts'
//   import { TooltipComponent, LegendComponent } from 'echarts/components'
//   import { RawChart } from '@/components/ui/charts'
//
//   use([SankeyChart, TooltipComponent, LegendComponent])
//
//   const option = { /* full ECharts option for sankey */ }
//
//   <RawChart :option="option" :height="400" />
//
// Theme tokens (chartColors, chartTextColor, chartTooltipBg, etc.)
// are exported from `useChartTheme.ts` -- import and weave them into
// your option for visual consistency with the rest of the registry's
// charts.

use([CanvasRenderer])

withDefaults(
  defineProps<{
    option: any
    height?: number | string
    /** Auto-resize on container width change. Default true. */
    autoresize?: boolean
    class?: string
  }>(),
  { height: 300, autoresize: true },
)
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', $props.class)"
  >
    <VChart :option="option" :autoresize="autoresize" class="size-full" />
  </div>
</template>

app/components/ui/charts/raw-chart/index.ts 0.1 kB

export { default as RawChart } from './RawChart.vue'

app/components/ui/charts/useChartTheme.ts 6.4 kB

import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// 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 {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  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
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// 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.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
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).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. 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'],
]

Raw manifest: https://uipkge.dev/r/vue/raw-chart.json