cordova-plugin-ra-chart 1.0.0

package/www/ra-chart.js

@@ -0,0 +1,2838 @@
+/*!
+ * raChart Cordova v1.0.0 — mobile SVG chart engine
+ * RemoteApps UI Components
+ *
+ * Zero dependencies. No jQuery, no chart library, no build step.
+ * Works in Cordova, Ionic (Angular/React/Vue), or any browser.
+ *
+ *   var chart = new RaChart(el, { type: 'column', ... });
+ *
+ * Mobile features: tap/drag inspect, pinch-to-zoom, drag-to-pan,
+ * haptic feedback, bottom-sheet tooltips, coarse-pointer hit targets,
+ * orientation-aware resize, Ionic dark-mode theming, reduced-motion.
+ */
+(function (root, factory) {
+  "use strict";
+  if (typeof module === "object" && module.exports) module.exports = factory();
+  else if (typeof define === "function" && define.amd) define([], factory);
+  else root.RaChart = factory();
+}(typeof self !== "undefined" ? self : this, function () {
+  "use strict";
+
+  var NS = "http://www.w3.org/2000/svg";
+  var VERSION = "1.0.0";
+
+  /* ============================================================
+     Palettes — CVD-validated order, do not shuffle
+     ============================================================ */
+
+  var PALETTE_LIGHT = ["#2a78d6", "#008300", "#e87ba4", "#eda100", "#1baf7a", "#eb6834", "#4a3aa7", "#e34948"];
+  var PALETTE_DARK = ["#3987e5", "#008300", "#d55181", "#c98500", "#199e70", "#d95926", "#9085e9", "#e66767"];
+  var SEQ_LIGHT = ["#cde2fb", "#9ec5f4", "#6da7ec", "#3987e5", "#256abf", "#184f95", "#0d366b"];
+  var SEQ_DARK = ["#0d366b", "#184f95", "#256abf", "#3987e5", "#6da7ec", "#9ec5f4", "#cde2fb"];
+
+  var DEFAULTS = {
+    type: "column",
+    data: [],
+    category: "category",
+    series: [],
+    colors: null,          // null = auto (theme-aware palette)
+    stacked: false,
+    fullStacked: false,
+    smooth: false,
+    stepped: false,
+    semi: false,
+    depth: 0,
+    fields: null,
+    xField: "x",
+    sizeField: "size",
+    min: 0,
+    max: null,
+    bands: null,
+    upColor: "#0ca30c",
+    downColor: "#d03b3b",
+    zoom: false,           // range-slider zoom (XY + candlestick)
+    pinchZoom: true,       // two-finger pinch + drag pan when zoom is on
+    legend: true,
+    height: 260,
+    haptics: true,         // vibrate on touch-select (Capacitor Haptics or navigator.vibrate)
+    sheetTooltip: "auto",  // true | false | "auto" (auto = dock to bottom under 480px)
+    tooltipHold: 2600,     // ms a touch tooltip stays after finger lift (0 = until next tap)
+    animation: { duration: 800, delay: 70 }
+  };
+
+  var MORPH_MS = 550;
+  var PIE_TILT = 0.55;
+
+  /* ============================================================
+     Environment
+     ============================================================ */
+
+  var COARSE = typeof window !== "undefined" && window.matchMedia
+    ? window.matchMedia("(pointer: coarse)").matches : false;
+
+  function reducedMotion() {
+    return typeof window !== "undefined" && window.matchMedia
+      ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+  }
+
+  function haptic() {
+    try {
+      var cap = window.Capacitor;
+      if (cap && cap.Plugins && cap.Plugins.Haptics && cap.Plugins.Haptics.impact) {
+        cap.Plugins.Haptics.impact({ style: "LIGHT" });
+        return;
+      }
+      if (window.navigator && navigator.vibrate) navigator.vibrate(8);
+    } catch (e) { /* haptics are best-effort */ }
+  }
+
+  /* ============================================================
+     Small utils
+     ============================================================ */
+
+  function isObj(v) { return v && typeof v === "object" && !Array.isArray(v); }
+
+  function merge(target, src) {
+    for (var k in src) {
+      if (!Object.prototype.hasOwnProperty.call(src, k)) continue;
+      var v = src[k];
+      if (isObj(v) && isObj(target[k])) merge(target[k], v);
+      else target[k] = v;
+    }
+    return target;
+  }
+
+  var measureCtx = null;
+  function textW(s, font) {
+    if (!measureCtx) measureCtx = document.createElement("canvas").getContext("2d");
+    measureCtx.font = font || "500 11.5px system-ui, -apple-system, 'Segoe UI', sans-serif";
+    return measureCtx.measureText(String(s)).width;
+  }
+
+  function fmt(n) {
+    if (n == null || isNaN(n)) return "";
+    var r = Math.abs(n) >= 100 ? Math.round(n) : Math.round(n * 10) / 10;
+    return r.toLocaleString("en-US");
+  }
+
+  function parseVal(v) {
+    if (typeof v === "number") return { n: v, isDate: false };
+    if (v instanceof Date) return { n: v.getTime(), isDate: true };
+    var num = parseFloat(v);
+    if (!isNaN(num) && String(num).length === String(v).trim().length) return { n: num, isDate: false };
+    var d = Date.parse(v);
+    if (!isNaN(d)) return { n: d, isDate: true };
+    return { n: 0, isDate: false };
+  }
+
+  function fmtDateShort(n) {
+    return new Date(n).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  }
+
+  var EASE = {
+    outCubic: function (t) { return 1 - Math.pow(1 - t, 3); },
+    inOutCubic: function (t) { return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; },
+    linear: function (t) { return t; }
+  };
+
+  function lerp(a, b, t) { return a + (b - a) * t; }
+  function clamp01(t) { return t < 0 ? 0 : t > 1 ? 1 : t; }
+  function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }
+
+  function shade(hex, pct) {
+    if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return hex;
+    var n = parseInt(hex.slice(1), 16);
+    var r = n >> 16, g = (n >> 8) & 255, b = n & 255;
+    var t = pct < 0 ? 0 : 255, p = Math.abs(pct);
+    r = Math.round(lerp(r, t, p));
+    g = Math.round(lerp(g, t, p));
+    b = Math.round(lerp(b, t, p));
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  }
+
+  function rampColor(ramp, t) {
+    t = clamp01(t);
+    var pos = t * (ramp.length - 1);
+    var i = Math.min(ramp.length - 2, Math.floor(pos));
+    var f = pos - i;
+    var a = parseInt(ramp[i].slice(1), 16), b = parseInt(ramp[i + 1].slice(1), 16);
+    var r = Math.round(lerp(a >> 16, b >> 16, f));
+    var g = Math.round(lerp((a >> 8) & 255, (b >> 8) & 255, f));
+    var bl = Math.round(lerp(a & 255, b & 255, f));
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + bl).toString(16).slice(1);
+  }
+
+  function niceScale(maxVal, min) {
+    var span = maxVal - min;
+    if (span <= 0) span = 1;
+    var raw = span / 5;
+    var mag = Math.pow(10, Math.floor(Math.log(raw) / Math.LN10));
+    var norm = raw / mag;
+    var step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * mag;
+    return { max: min + Math.ceil(span / step) * step, step: step };
+  }
+
+  /* ============================================================
+     DOM / SVG helpers
+     ============================================================ */
+
+  function el(tag, cls, parent) {
+    var n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (parent) parent.appendChild(n);
+    return n;
+  }
+
+  function empty(node) {
+    while (node && node.firstChild) node.removeChild(node.firstChild);
+  }
+
+  function svgEl(tag, attrs, parent) {
+    var n = document.createElementNS(NS, tag);
+    if (attrs) for (var k in attrs) n.setAttribute(k, attrs[k]);
+    if (parent) parent.appendChild(n);
+    return n;
+  }
+
+  function svgText(parent, x, y, text, anchor, size, color, weight) {
+    var n = svgEl("text", {
+      x: x, y: y, "text-anchor": anchor || "middle",
+      "font-size": size || 11.5, fill: color || "#898781",
+      "font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif",
+      "font-weight": weight || 500
+    }, parent);
+    n.appendChild(document.createTextNode(text));
+    return n;
+  }
+
+  function setText(node, s) {
+    if (node && node.firstChild) node.firstChild.nodeValue = s;
+  }
+
+  /* ============================================================
+     Path builders (pure geometry — shared with the desktop engine)
+     ============================================================ */
+
+  function colPath(x, y, w, h, r, horizontal) {
+    if (w <= 0 || h <= 0) return "M0 0";
+    if (horizontal) {
+      r = Math.min(r, h / 2, w);
+      return "M" + x + " " + y +
+        " L" + (x + w - r) + " " + y +
+        " Q" + (x + w) + " " + y + " " + (x + w) + " " + (y + r) +
+        " L" + (x + w) + " " + (y + h - r) +
+        " Q" + (x + w) + " " + (y + h) + " " + (x + w - r) + " " + (y + h) +
+        " L" + x + " " + (y + h) + " Z";
+    }
+    r = Math.min(r, w / 2, h);
+    return "M" + x + " " + (y + h) +
+      " L" + x + " " + (y + r) +
+      " Q" + x + " " + y + " " + (x + r) + " " + y +
+      " L" + (x + w - r) + " " + y +
+      " Q" + (x + w) + " " + y + " " + (x + w) + " " + (y + r) +
+      " L" + (x + w) + " " + (y + h) + " Z";
+  }
+
+  function extrude(x, y, w, h, d) {
+    if (w <= 0 || h <= 0) return { front: "M0 0", top: "M0 0", side: "M0 0" };
+    var d2 = d * 0.5;
+    return {
+      front: "M" + x + " " + y + " L" + (x + w) + " " + y + " L" + (x + w) + " " + (y + h) + " L" + x + " " + (y + h) + " Z",
+      top: "M" + x + " " + y + " L" + (x + d) + " " + (y - d2) + " L" + (x + w + d) + " " + (y - d2) + " L" + (x + w) + " " + y + " Z",
+      side: "M" + (x + w) + " " + y + " L" + (x + w + d) + " " + (y - d2) + " L" + (x + w + d) + " " + (y + h - d2) + " L" + (x + w) + " " + (y + h) + " Z"
+    };
+  }
+
+  function arcPath(cx, cy, r0, r1, a0, a1, tilt) {
+    tilt = tilt || 1;
+    var sweep = a1 - a0;
+    if (sweep <= 0.0004) return "M0 0";
+    if (sweep >= Math.PI * 2) { a1 = a0 + Math.PI * 2 - 0.0006; sweep = a1 - a0; }
+    var large = sweep > Math.PI ? 1 : 0;
+    function pt(r, a) { return (cx + r * Math.cos(a)).toFixed(2) + " " + (cy + r * tilt * Math.sin(a)).toFixed(2); }
+    if (r0 < 0.5) {
+      return "M" + cx + " " + cy + " L" + pt(r1, a0) +
+        " A" + r1 + " " + (r1 * tilt) + " 0 " + large + " 1 " + pt(r1, a1) + " Z";
+    }
+    return "M" + pt(r1, a0) +
+      " A" + r1 + " " + (r1 * tilt) + " 0 " + large + " 1 " + pt(r1, a1) +
+      " L" + pt(r0, a1) +
+      " A" + r0 + " " + (r0 * tilt) + " 0 " + large + " 0 " + pt(r0, a0) + " Z";
+  }
+
+  function wallPath(r, b0, b1, g) {
+    if (b1 - b0 <= 0.002) return "";
+    function pt(a, dy) { return (g.cx + r * Math.cos(a)).toFixed(2) + " " + (g.cy + r * g.tilt * Math.sin(a) + dy).toFixed(2); }
+    var large = (b1 - b0) > Math.PI ? 1 : 0;
+    return "M" + pt(b0, 0) +
+      " A" + r + " " + (r * g.tilt) + " 0 " + large + " 1 " + pt(b1, 0) +
+      " L" + pt(b1, g.d) +
+      " A" + r + " " + (r * g.tilt) + " 0 " + large + " 0 " + pt(b0, g.d) + " Z";
+  }
+
+  function linePath(pts, smooth) {
+    if (!pts.length) return "M0 0";
+    var d = "M" + pts[0][0] + " " + pts[0][1];
+    if (!smooth || pts.length < 3) {
+      for (var i = 1; i < pts.length; i++) d += " L" + pts[i][0] + " " + pts[i][1];
+      return d;
+    }
+    for (var j = 1; j < pts.length; j++) {
+      var p0 = pts[j - 2] || pts[j - 1], p1 = pts[j - 1], p2 = pts[j], p3 = pts[j + 1] || p2;
+      var c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
+      var c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
+      d += " C" + c1x.toFixed(2) + " " + c1y.toFixed(2) + " " + c2x.toFixed(2) + " " + c2y.toFixed(2) + " " + p2[0] + " " + p2[1];
+    }
+    return d;
+  }
+
+  function steppedPath(pts) {
+    var d = "M" + pts[0][0] + " " + pts[0][1];
+    for (var i = 1; i < pts.length; i++) {
+      var mx = ((pts[i - 1][0] + pts[i][0]) / 2).toFixed(2);
+      d += " L" + mx + " " + pts[i - 1][1] + " L" + mx + " " + pts[i][1] + " L" + pts[i][0] + " " + pts[i][1];
+    }
+    return d;
+  }
+
+  function treemapLayout(values, x, y, w, h) {
+    var total = 0;
+    values.forEach(function (v) { total += v > 0 ? v : 0; });
+    var rects = [];
+    if (!total || w <= 0 || h <= 0) return rects;
+    var scale = w * h / total;
+    var items = [];
+    values.forEach(function (v, i) { if (v > 0) items.push({ v: v, i: i }); });
+    items.sort(function (a, b) { return b.v - a.v; });
+    var ax = x, ay = y, aw = w, ah = h;
+    var row = [], rowSum = 0;
+
+    function worst(r, s) {
+      var len = Math.min(aw, ah) || 1;
+      var thick = s * scale / len, m = 0;
+      r.forEach(function (it) {
+        var l = it.v * scale / thick;
+        var asp = Math.max(thick / l, l / thick);
+        if (asp > m) m = asp;
+      });
+      return m;
+    }
+    function layoutRow(r, s) {
+      var len = Math.min(aw, ah) || 1;
+      var thick = s * scale / len, off = 0;
+      r.forEach(function (it) {
+        var l = it.v * scale / thick;
+        if (aw < ah) rects[it.i] = { x: ax + off, y: ay, w: l, h: thick };
+        else rects[it.i] = { x: ax, y: ay + off, w: thick, h: l };
+        off += l;
+      });
+      if (aw < ah) { ay += thick; ah -= thick; }
+      else { ax += thick; aw -= thick; }
+    }
+    items.forEach(function (it) {
+      if (row.length && worst(row.concat([it]), rowSum + it.v) > worst(row, rowSum)) {
+        layoutRow(row, rowSum);
+        row = []; rowSum = 0;
+      }
+      row.push(it); rowSum += it.v;
+    });
+    if (row.length) layoutRow(row, rowSum);
+    return rects;
+  }
+
+  var KINDS = {
+    column: "xy", bar: "xy", line: "xy", area: "xy", lollipop: "xy",
+    pie: "pie", donut: "pie", radar: "radar",
+    treemap: "treemap", sankey: "sankey", wordcloud: "cloud", venn: "venn",
+    candlestick: "candle", timeline: "timeline", gantt: "gantt",
+    scatter: "scatter", bubble: "scatter",
+    funnel: "funnel", pyramid: "funnel",
+    gauge: "gauge", heatmap: "heat"
+  };
+
+  var UID = 0;
+
+  /* ============================================================
+     RaChart
+     ============================================================ */
+
+  function RaChart(host, options) {
+    if (!(this instanceof RaChart)) return new RaChart(host, options);
+    if (typeof host === "string") host = document.querySelector(host);
+    if (!host) throw new Error("raChart: host element not found");
+
+    this.el = host;
+    this.uid = ++UID;
+    this.opts = merge(merge({}, DEFAULTS), options || {});
+    this.hidden = {};
+    this.zoomF = [0, 1];
+    this._raf = null;
+    this._destroyed = false;
+
+    if (host.className.indexOf("ra-chart") < 0) {
+      host.className = (host.className ? host.className + " " : "") + "ra-chart";
+    }
+
+    this._observeResize();
+    this._watchVisibility();
+    this.build(true);
+    this._emit("raChartReady", { chart: this });
+  }
+
+  /* ---------- theming ---------- */
+
+  RaChart.prototype._readTheme = function () {
+    var cs = window.getComputedStyle(this.el);
+    function v(name, fb) {
+      var x = cs.getPropertyValue(name);
+      return (x && x.trim()) || fb;
+    }
+    var dark = v("--ra-chart-scheme", "light").indexOf("dark") >= 0;
+    this.dark = dark;
+    this.theme = {
+      dark: dark,
+      surface: v("--ra-chart-surface", dark ? "#1a1a19" : "#ffffff"),
+      text: v("--ra-chart-text", dark ? "#ffffff" : "#1f2937"),
+      label: v("--ra-chart-label", dark ? "#9d9c95" : "#898781"),
+      muted: v("--ra-chart-muted", dark ? "#8a8a84" : "#9ca3af"),
+      grid: v("--ra-chart-grid", dark ? "#2c2c2a" : "#e1e0d9"),
+      baseline: v("--ra-chart-baseline", dark ? "#383835" : "#c3c2b7"),
+      body: v("--ra-chart-body", dark ? "#c3c2b7" : "#4b5563")
+    };
+    this.palette = this.opts.colors || (dark ? PALETTE_DARK : PALETTE_LIGHT);
+    this.seq = dark ? SEQ_DARK : SEQ_LIGHT;
+  };
+
+  RaChart.prototype._color = function (i) {
+    return this.palette[i % this.palette.length];
+  };
+
+  /* ---------- lifecycle ---------- */
+
+  RaChart.prototype._observeResize = function () {
+    var self = this;
+    this._onResize = function () {
+      clearTimeout(self._rt);
+      self._rt = setTimeout(function () {
+        if (!self._destroyed && self.el.clientWidth) self._rebuildBody();
+      }, 160);
+    };
+    if (typeof ResizeObserver !== "undefined") {
+      this._ro = new ResizeObserver(function (entries) {
+        var w = entries[0] && entries[0].contentRect ? Math.round(entries[0].contentRect.width) : 0;
+        if (w && w !== self._lastWidth) { self._lastWidth = w; self._onResize(); }
+      });
+      this._ro.observe(this.el);
+    } else {
+      window.addEventListener("resize", this._onResize);
+      window.addEventListener("orientationchange", this._onResize);
+    }
+  };
+
+  RaChart.prototype.destroy = function () {
+    this._destroyed = true;
+    this._stopTween();
+    this._finishTween = null;
+    clearTimeout(this._rt);
+    clearTimeout(this._tipTimer);
+    if (this._onVisibility) {
+      document.removeEventListener("visibilitychange", this._onVisibility);
+      this._onVisibility = null;
+    }
+    if (this._ro) { this._ro.disconnect(); this._ro = null; }
+    else {
+      window.removeEventListener("resize", this._onResize);
+      window.removeEventListener("orientationchange", this._onResize);
+    }
+    this._unbindDoc();
+    empty(this.el);
+  };
+
+  RaChart.prototype._stopTween = function () {
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
+  };
+
+  /**
+   * Mobile apps get backgrounded mid-animation all the time. rAF stops firing
+   * the moment that happens, so settle any in-flight tween on its last frame
+   * rather than leaving half-grown bars behind when the user comes back.
+   */
+  RaChart.prototype._watchVisibility = function () {
+    var self = this;
+    this._onVisibility = function () {
+      if (document.hidden && self._finishTween) self._finishTween();
+    };
+    document.addEventListener("visibilitychange", this._onVisibility);
+  };
+
+  RaChart.prototype._tween = function (duration, ease, step, done) {
+    var self = this;
+    this._stopTween();
+
+    // Jump to the final frame when animating would be wrong or impossible:
+    //  - the user asked for reduced motion
+    //  - the page is hidden, so requestAnimationFrame is throttled to a halt
+    //    (backgrounded app, inactive tab, off-screen Ionic page). Without this
+    //    the chart would sit at frame zero until something forced a redraw.
+    if (reducedMotion() || document.hidden) {
+      step(1, 1);
+      if (done) done();
+      return;
+    }
+
+    var t0 = null;
+    this._finishTween = function () {          // called if we get hidden mid-flight
+      self._stopTween();
+      step(1, 1);
+      self._finishTween = null;
+      if (done) done();
+    };
+    function frame(ts) {
+      if (self._destroyed) return;
+      if (t0 === null) t0 = ts;
+      var p = clamp01((ts - t0) / duration);
+      step(ease(p), p);
+      if (p < 1) self._raf = requestAnimationFrame(frame);
+      else {
+        self._raf = null;
+        self._finishTween = null;
+        if (done) done();
+      }
+    }
+    this._raf = requestAnimationFrame(frame);
+  };
+
+  RaChart.prototype._emit = function (name, detail) {
+    var ev;
+    try {
+      ev = new CustomEvent(name, { detail: detail, bubbles: true });
+    } catch (e) {                    // old Android WebView
+      ev = document.createEvent("CustomEvent");
+      ev.initCustomEvent(name, true, false, detail);
+    }
+    this.el.dispatchEvent(ev);
+  };
+
+  /* ---------- scaffold ---------- */
+
+  RaChart.prototype.build = function (entrance) {
+    this._stopTween();
+    this._unbindDoc();
+    empty(this.el);
+    this.zoomBar = null;
+    this._readTheme();
+
+    var o = this.opts;
+    this.kind = KINDS[o.type] || "xy";
+    this.zoomable = !!o.zoom && (this.kind === "xy" || this.kind === "candle");
+
+    if (this.zoomable) this._buildZoomBar();
+    this._scaffoldBody();
+    this._dispatchBuild(entrance);
+  };
+
+  RaChart.prototype._scaffoldBody = function () {
+    var o = this.opts;
+    this.stage = el("div", "ra-chart__stage", this.el);
+    this.stage.style.height = o.height + "px";
+    this.w = this.el.clientWidth || this.stage.clientWidth || 320;
+    this.h = o.height;
+    this._lastWidth = this.w;
+
+    this.svg = svgEl("svg", {
+      viewBox: "0 0 " + this.w + " " + this.h,
+      preserveAspectRatio: "none"
+    });
+    this.stage.appendChild(this.svg);
+
+    this.tip = el("div", "ra-chart__tip", this.el);
+    this.legendEl = el("div", "ra-chart__legend", this.el);
+
+    // page scroll must keep working; only lock the axis we actually use
+    this.stage.style.touchAction = (this.zoomable && this.opts.pinchZoom) ? "pan-y pinch-zoom" : "auto";
+
+    this._bindPointer();
+    if (this.zoomable && this.opts.pinchZoom) this._bindPinch();
+  };
+
+  RaChart.prototype._dispatchBuild = function (entrance) {
+    var k = this.kind;
+    if (k === "pie") this._buildPie(entrance);
+    else if (k === "radar") this._buildRadar(entrance);
+    else if (k === "treemap") this._buildTreemap(entrance);
+    else if (k === "sankey") this._buildSankey(entrance);
+    else if (k === "cloud") this._buildCloud(entrance);
+    else if (k === "venn") this._buildVenn(entrance);
+    else if (k === "candle") this._buildCandle(entrance);
+    else if (k === "timeline") this._buildTimeline(entrance);
+    else if (k === "gantt") this._buildGantt(entrance);
+    else if (k === "scatter") this._buildScatter(entrance);
+    else if (k === "funnel") this._buildFunnel(entrance);
+    else if (k === "gauge") this._buildGauge(entrance);
+    else if (k === "heat") this._buildHeat(entrance);
+    else this._buildXY(entrance);
+  };
+
+  RaChart.prototype._rebuildBody = function () {
+    if (this._destroyed) return;
+    this._stopTween();
+    if (!this.stage) { this.build(false); return; }
+    this.stage.parentNode && this.stage.parentNode.removeChild(this.stage);
+    this.tip.parentNode && this.tip.parentNode.removeChild(this.tip);
+    this.legendEl.parentNode && this.legendEl.parentNode.removeChild(this.legendEl);
+    this._scaffoldBody();
+    this._dispatchBuild(false);
+  };
+
+  /* ============================================================
+     Pointer layer — mouse hover AND touch tap/drag
+     ============================================================ */
+
+  RaChart.prototype._hitAt = function (clientX, clientY) {
+    var node = document.elementFromPoint(clientX, clientY);
+    if (!node) return null;
+    if (node.correspondingUseElement) node = node.correspondingUseElement;
+    while (node && node !== this.el) {
+      if (node.classList && node.classList.contains("ra-hit")) return node;
+      node = node.parentNode;
+    }
+    return null;
+  };
+
+  RaChart.prototype._bindPointer = function () {
+    var self = this;
+    var stage = this.stage;
+
+    function local(e) {
+      var r = self.el.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top };
+    }
+
+    // ---- mouse (desktop / hybrid) ----
+    this._onMove = function (e) {
+      if (self._touching) return;
+      var hit = self._hitAt(e.clientX, e.clientY);
+      var p = local(e);
+      if (hit) self._activate(hit, p.x, p.y, false);
+      else self._deactivate();
+    };
+    this._onLeave = function () {
+      if (!self._touching) self._deactivate();
+    };
+    stage.addEventListener("mousemove", this._onMove);
+    stage.addEventListener("mouseleave", this._onLeave);
+
+    // ---- touch: tap to inspect, drag to scrub ----
+    this._onTouchStart = function (e) {
+      if (e.touches.length !== 1) return;
+      self._touching = true;
+      clearTimeout(self._tipTimer);
+      var t = e.touches[0];
+      var hit = self._hitAt(t.clientX, t.clientY);
+      var p = local(t);
+      if (hit) {
+        self._activate(hit, p.x, p.y, true);
+        if (self.opts.haptics) haptic();
+      } else {
+        self._deactivate();
+      }
+    };
+    this._onTouchMove = function (e) {
+      if (!self._touching || e.touches.length !== 1) return;
+      var t = e.touches[0];
+      var hit = self._hitAt(t.clientX, t.clientY);
+      var p = local(t);
+      if (hit) {
+        if (hit !== self._activeNode && self.opts.haptics) haptic();
+        self._activate(hit, p.x, p.y, true);
+        // scrubbing across marks: keep the finger on the chart, not the page
+        if (e.cancelable) e.preventDefault();
+      }
+    };
+    this._onTouchEnd = function () {
+      self._touching = false;
+      var hold = self.opts.tooltipHold;
+      if (hold > 0) {
+        clearTimeout(self._tipTimer);
+        self._tipTimer = setTimeout(function () { self._deactivate(); }, hold);
+      }
+    };
+    stage.addEventListener("touchstart", this._onTouchStart, { passive: true });
+    stage.addEventListener("touchmove", this._onTouchMove, { passive: false });
+    stage.addEventListener("touchend", this._onTouchEnd, { passive: true });
+    stage.addEventListener("touchcancel", this._onTouchEnd, { passive: true });
+  };
+
+  // subclasses of behaviour are registered per chart type
+  RaChart.prototype._activate = function (node, x, y, isTouch) {
+    if (!this._hitHandler) return;
+    this._activeNode = node;
+    this._hitHandler(node, x, y, isTouch);
+  };
+
+  RaChart.prototype._deactivate = function () {
+    if (this._activeNode || this._tipOn) {
+      this._activeNode = null;
+      if (this._leaveHandler) this._leaveHandler();
+      this._tipHide();
+    }
+  };
+
+  /* ---------- tooltip ---------- */
+
+  RaChart.prototype._sheetMode = function () {
+    var s = this.opts.sheetTooltip;
+    if (s === true) return true;
+    if (s === false) return false;
+    return COARSE && this.w < 480;
+  };
+
+  RaChart.prototype._tipShow = function (html, x, y) {
+    this._tipOn = true;
+    this.tip.innerHTML = html;
+    this.tip.classList.add("is-on");
+    if (this._sheetMode()) {
+      this.tip.classList.add("ra-chart__tip--sheet");
+      this.tip.style.left = "";
+      this.tip.style.top = "";
+      return;
+    }
+    this.tip.classList.remove("ra-chart__tip--sheet");
+    var tw = this.tip.offsetWidth;
+    this.tip.style.left = clamp(x, tw / 2 + 4, Math.max(tw / 2 + 4, this.w - tw / 2 - 4)) + "px";
+    this.tip.style.top = Math.max(4, y) + "px";
+  };
+
+  RaChart.prototype._tipHide = function () {
+    this._tipOn = false;
+    this.tip.classList.remove("is-on");
+  };
+
+  RaChart.prototype._dot = function (color) {
+    return '<span class="ra-chart__tip-dot" style="background:' + color + '"></span>';
+  };
+
+  /* ---------- legend ---------- */
+
+  RaChart.prototype._buildLegend = function (items, onToggle, onHover) {
+    var self = this;
+    empty(this.legendEl);
+    if (!items.length) { this.legendEl.style.display = "none"; return; }
+    this.legendEl.style.display = "";
+
+    items.forEach(function (it, i) {
+      var item = el("span", "ra-chart__legend-item", self.legendEl);
+      if (self.hidden[i]) item.classList.add("is-off");
+      var sw = el("span", "ra-chart__legend-swatch", item);
+      sw.style.background = it.color;
+      var lb = el("span", "ra-chart__legend-label", item);
+      lb.textContent = it.name;
+      if (it.value != null) {
+        var vv = el("span", "ra-chart__legend-value", item);
+        vv.textContent = "(" + fmt(it.value) + ")";
+      }
+      item.setAttribute("role", "button");
+      item.setAttribute("tabindex", "0");
+
+      function toggle() {
+        var visible = items.filter(function (_, j) { return !self.hidden[j]; }).length;
+        if (!self.hidden[i] && visible <= 1) return;
+        self.hidden[i] = !self.hidden[i];
+        item.classList.toggle("is-off", !!self.hidden[i]);
+        if (self.opts.haptics) haptic();
+        if (onHover) onHover(-1);
+        onToggle();
+        self._emit("raChartToggle", { index: i, name: it.name, hidden: !!self.hidden[i] });
+      }
+      item.addEventListener("click", toggle);
+      item.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
+      });
+      if (onHover && !COARSE) {
+        item.addEventListener("mouseenter", function () { if (!self.hidden[i]) onHover(i); });
+        item.addEventListener("mouseleave", function () { onHover(-1); });
+      }
+    });
+  };
+
+  RaChart.prototype._dimGroups = function (i) {
+    (this.nodes.groups || []).forEach(function (gr, j) {
+      gr.style.opacity = (i >= 0 && j !== i) ? .35 : "";
+    });
+  };
+
+  RaChart.prototype._dimSlices = function (i) {
+    (this.nodes.slices || []).forEach(function (s, j) {
+      var op = (i >= 0 && j !== i) ? .55 : "";
+      [s.top, s.outer, s.inner].forEach(function (p) { if (p) p.style.opacity = op; });
+    });
+  };
+
+  /* ============================================================
+     Zoom — slider + pinch/pan
+     ============================================================ */
+
+  RaChart.prototype._zoomWindow = function (n) {
+    if (!this.zoomable || n < 1) return [0, Math.max(0, n - 1)];
+    var i0 = Math.min(n - 1, Math.floor(this.zoomF[0] * n));
+    var i1 = Math.max(i0, Math.ceil(this.zoomF[1] * n) - 1);
+    return [i0, i1];
+  };
+
+  RaChart.prototype._zoomApply = function (force) {
+    var n = (this.opts.data || []).length;
+    var w = this._zoomWindow(n);
+    if (!force && this._lastW && this._lastW[0] === w[0] && this._lastW[1] === w[1]) return;
+    this._lastW = w;
+    this._rebuildBody();
+    this._emit("raChartZoom", {
+      from: this.zoomF[0], to: this.zoomF[1],
+      startIndex: w[0], endIndex: w[1]
+    });
+  };
+
+  RaChart.prototype._zoomApplyThrottled = function () {
+    var self = this;
+    if (this._zRaf) return;
+    this._zRaf = requestAnimationFrame(function () {
+      self._zRaf = null;
+      self._zoomApply();
+    });
+  };
+
+  RaChart.prototype._syncZoomBar = function () {
+    if (!this.zoomBar) return;
+    var f = this.zoomF;
+    this.zoomBar.sel.style.left = (f[0] * 100) + "%";
+    this.zoomBar.sel.style.width = ((f[1] - f[0]) * 100) + "%";
+    this.zoomBar.h0.style.left = (f[0] * 100) + "%";
+    this.zoomBar.h1.style.left = (f[1] * 100) + "%";
+  };
+
+  RaChart.prototype._unbindDoc = function () {
+    if (this._docMove) {
+      document.removeEventListener("mousemove", this._docMove);
+      document.removeEventListener("mouseup", this._docUp);
+      document.removeEventListener("touchmove", this._docMove, { passive: false });
+      document.removeEventListener("touchend", this._docUp);
+      this._docMove = this._docUp = null;
+    }
+  };
+
+  RaChart.prototype._buildZoomBar = function () {
+    var self = this;
+    var bar = el("div", "ra-chart__zoom", this.el);
+    var track = el("div", "ra-chart__zoom-track", bar);
+    var sel = el("div", "ra-chart__zoom-sel", track);
+    var h0 = el("div", "ra-chart__zoom-handle", track);
+    var h1 = el("div", "ra-chart__zoom-handle", track);
+    h0.setAttribute("role", "slider");
+    h1.setAttribute("role", "slider");
+    this.zoomBar = { bar: bar, track: track, sel: sel, h0: h0, h1: h1 };
+    this._syncZoomBar();
+
+    var MIN_SPAN = 0.05;
+    function pageX(e) {
+      return e.touches && e.touches.length ? e.touches[0].clientX : e.clientX;
+    }
+    function begin(mode, e) {
+      var r = track.getBoundingClientRect();
+      self._drag = {
+        mode: mode, startX: pageX(e),
+        f0: self.zoomF[0], f1: self.zoomF[1],
+        tx: r.left, tw: r.width || 1
+      };
+      if (e.cancelable) e.preventDefault();
+    }
+
+    [[h0, 0], [h1, 1], [sel, "pan"]].forEach(function (pair) {
+      pair[0].addEventListener("mousedown", function (e) { begin(pair[1], e); });
+      pair[0].addEventListener("touchstart", function (e) { begin(pair[1], e); }, { passive: false });
+    });
+
+    this._docMove = function (e) {
+      var d = self._drag;
+      if (!d) return;
+      var x = pageX(e);
+      if (d.mode === "pan") {
+        var span = d.f1 - d.f0;
+        var f0 = clamp(d.f0 + (x - d.startX) / d.tw, 0, 1 - span);
+        self.zoomF = [f0, f0 + span];
+      } else {
+        var f = clamp01((x - d.tx) / d.tw);
+        if (d.mode === 0) self.zoomF = [Math.min(f, d.f1 - MIN_SPAN), d.f1];
+        else self.zoomF = [d.f0, Math.max(f, d.f0 + MIN_SPAN)];
+      }
+      self._syncZoomBar();
+      self._zoomApplyThrottled();
+      if (e.cancelable && e.type === "touchmove") e.preventDefault();
+    };
+    this._docUp = function () { self._drag = null; };
+
+    document.addEventListener("mousemove", this._docMove);
+    document.addEventListener("mouseup", this._docUp);
+    document.addEventListener("touchmove", this._docMove, { passive: false });
+    document.addEventListener("touchend", this._docUp);
+  };
+
+  // two-finger pinch to zoom, one-finger drag to pan (only while zoomed in)
+  RaChart.prototype._bindPinch = function () {
+    var self = this, stage = this.stage;
+    var g = null;
+
+    function dist(t) {
+      var dx = t[0].clientX - t[1].clientX, dy = t[0].clientY - t[1].clientY;
+      return Math.sqrt(dx * dx + dy * dy) || 1;
+    }
+    function centerFrac(t, rect) {
+      var cx = t.length > 1 ? (t[0].clientX + t[1].clientX) / 2 : t[0].clientX;
+      return clamp01((cx - rect.left) / (rect.width || 1));
+    }
+
+    stage.addEventListener("touchstart", function (e) {
+      var span = self.zoomF[1] - self.zoomF[0];
+      if (e.touches.length === 2) {
+        var rect = stage.getBoundingClientRect();
+        g = {
+          mode: "pinch", d0: dist(e.touches), f: self.zoomF.slice(),
+          anchor: self.zoomF[0] + centerFrac(e.touches, rect) * span
+        };
+        self._touching = false;
+        self._deactivate();
+      } else if (e.touches.length === 1 && span < 0.999) {
+        g = { mode: "pan", x0: e.touches[0].clientX, f: self.zoomF.slice(), w: stage.clientWidth || 1 };
+      } else g = null;
+    }, { passive: true });
+
+    stage.addEventListener("touchmove", function (e) {
+      if (!g) return;
+      if (g.mode === "pinch" && e.touches.length === 2) {
+        var scale = dist(e.touches) / g.d0;
+        var span = clamp((g.f[1] - g.f[0]) / scale, 0.05, 1);
+        var f0 = clamp(g.anchor - span * ((g.anchor - g.f[0]) / ((g.f[1] - g.f[0]) || 1)), 0, 1 - span);
+        self.zoomF = [f0, f0 + span];
+        self._syncZoomBar();
+        self._zoomApplyThrottled();
+        if (e.cancelable) e.preventDefault();
+      } else if (g.mode === "pan" && e.touches.length === 1) {
+        var sp = g.f[1] - g.f[0];
+        var dx = (e.touches[0].clientX - g.x0) / g.w;
+        var nf0 = clamp(g.f[0] - dx * sp, 0, 1 - sp);
+        // only hijack the gesture once it is clearly horizontal
+        if (Math.abs(dx) > 0.01) {
+          self.zoomF = [nf0, nf0 + sp];
+          self._syncZoomBar();
+          self._zoomApplyThrottled();
+          if (e.cancelable) e.preventDefault();
+        }
+      }
+    }, { passive: false });
+
+    stage.addEventListener("touchend", function (e) {
+      if (e.touches.length === 0) g = null;
+    }, { passive: true });
+  };
+
+  /* ============================================================
+     XY — column / bar / line / area / lollipop
+     ============================================================ */
+
+  RaChart.prototype._xyVals = function (D) {
+    var o = this.opts, self = this;
+    var m = o.series.map(function (s) { return D.map(function (d) { return +d[s.field] || 0; }); });
+    if (o.fullStacked && o.type !== "line" && o.type !== "area") {
+      for (var c = 0; c < D.length; c++) {
+        var tot = 0;
+        m.forEach(function (row, si) { if (!self.hidden[si]) tot += row[c]; });
+        m.forEach(function (row, si) { row[c] = (tot && !self.hidden[si]) ? row[c] / tot * 100 : 0; });
+      }
+    }
+    return m;
+  };
+
+  RaChart.prototype._buildXY = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    if (o.fullStacked && o.type !== "line" && o.type !== "area") o.stacked = true;
+    var horizontal = o.type === "bar";
+    var isLine = o.type === "line" || o.type === "area";
+    var isLolli = o.type === "lollipop";
+    var depth = (!isLine && !isLolli && o.depth > 0) ? o.depth : 0;
+
+    var vw = this._zoomWindow((o.data || []).length);
+    var data = (o.data || []).slice(vw[0], vw[1] + 1);
+    this.viewData = data;
+
+    var cats = data.map(function (d) { return String(d[o.category]); });
+    var nS = o.series.length, nC = cats.length;
+
+    this.cur = { kind: "xy", vals: this._xyVals(data), scaleMax: null };
+
+    var g = { horizontal: horizontal, isLine: isLine, isLolli: isLolli, depth: depth, cats: cats, nS: nS, nC: nC };
+    this.geom = g;
+
+    var scale = this._xyScale();
+    var yLabels = [];
+    for (var v = o.min; v <= scale.max + 1e-9; v += scale.step) yLabels.push(fmt(v));
+    var maxYLabelW = Math.max.apply(null, yLabels.map(function (s) { return textW(s); }).concat([12]));
+    var maxCatW = Math.max.apply(null, cats.map(function (s) { return textW(s); }).concat([12]));
+
+    g.padL = (horizontal ? Math.min(maxCatW, this.w * 0.34) : maxYLabelW) + 12;
+    g.padR = 8 + depth;
+    g.padT = 8 + depth * 0.5;
+    g.padB = 24;
+    g.plotX = g.padL;
+    g.plotY = g.padT;
+    g.plotW = Math.max(40, this.w - g.padL - g.padR);
+    g.plotH = Math.max(40, this.h - g.padT - g.padB);
+    g.band = (horizontal ? g.plotH : g.plotW) / Math.max(1, nC);
+
+    this.gGrid = svgEl("g", null, this.svg);
+    this.gMarks = svgEl("g", null, this.svg);
+    this.gUI = svgEl("g", null, this.svg);
+    this._xyDrawGrid(scale);
+
+    this.nodes = { rects: [], paths: [], areas: [], bullets: [], groups: [] };
+
+    o.series.forEach(function (s, si) {
+      var color = self._color(si);
+      var gS = svgEl("g", { opacity: self.hidden[si] ? 0 : 1 }, self.gMarks);
+      gS.style.transition = "opacity .18s";
+
+      if (isLine) {
+        var area = svgEl("path", { fill: color, "fill-opacity": o.type === "area" ? 0.16 : 0, stroke: "none" }, gS);
+        var path = svgEl("path", {
+          fill: "none", stroke: color, "stroke-width": 2.2,
+          "stroke-linejoin": "round", "stroke-linecap": "round"
+        }, gS);
+        var bl = [];
+        for (var ci = 0; ci < nC; ci++) {
+          bl.push(svgEl("circle", {
+            r: 4, fill: color, stroke: T.surface, "stroke-width": 2
+          }, gS));
+        }
+        self.nodes.paths[si] = path;
+        self.nodes.areas[si] = area;
+        self.nodes.bullets[si] = bl;
+        self.nodes.rects[si] = null;
+      } else {
+        var rl = [];
+        for (var cj = 0; cj < nC; cj++) {
+          var node;
+          if (isLolli) {
+            node = svgEl("g", { "class": "ra-hit", "data-s": si, "data-c": cj }, gS);
+            node._line = svgEl("line", { stroke: color, "stroke-width": 2, "stroke-linecap": "round" }, node);
+            node._dot = svgEl("circle", { r: COARSE ? 7 : 6, fill: color, stroke: T.surface, "stroke-width": 2 }, node);
+          } else if (depth > 0) {
+            node = svgEl("g", { "class": "ra-hit", "data-s": si, "data-c": cj }, gS);
+            node._t = svgEl("path", { fill: shade(color, .22), stroke: "none" }, node);
+            node._s = svgEl("path", { fill: shade(color, -.18), stroke: "none" }, node);
+            var fA = { fill: color };
+            if (o.stacked) { fA.stroke = T.surface; fA["stroke-width"] = 2; }
+            node._f = svgEl("path", fA, node);
+          } else {
+            var attrs = { fill: color, "class": "ra-hit", "data-s": si, "data-c": cj };
+            if (o.stacked) { attrs.stroke = T.surface; attrs["stroke-width"] = 2; }
+            node = svgEl("path", attrs, gS);
+          }
+          node.style.transition = "transform .18s, opacity .18s";
+          rl.push(node);
+        }
+        self.nodes.rects[si] = rl;
+        self.nodes.paths[si] = null; self.nodes.areas[si] = null; self.nodes.bullets[si] = null;
+      }
+      self.nodes.groups[si] = gS;
+    });
+
+    // line/area: a crosshair driven by band-wide invisible hit columns (touch friendly)
+    if (isLine) {
+      this.crossLine = svgEl("line", {
+        y1: g.plotY, y2: g.plotY + g.plotH,
+        stroke: T.baseline, "stroke-width": 1, "stroke-dasharray": "4 3", opacity: 0
+      }, this.gUI);
+      for (var hc = 0; hc < nC; hc++) {
+        svgEl("rect", {
+          x: g.plotX + g.band * hc, y: g.plotY, width: g.band, height: g.plotH,
+          fill: "transparent", "class": "ra-hit", "data-s": -1, "data-c": hc
+        }, this.gUI);
+      }
+    }
+
+    var sfx = o.fullStacked ? "%" : "";
+    this._hitHandler = function (node, x, y) {
+      var si = +node.getAttribute("data-s"), ci = +node.getAttribute("data-c");
+      if (si < 0) { self._xyCross(ci); return; }        // line/area band
+      var val = self.cur.vals[si][ci];
+      node.style.transform = horizontal ? "translate(3px,0)" : "translate(0,-4px)";
+      if (nS > 1) self._dimGroups(si);
+      self._tipShow(
+        '<span class="ra-chart__tip-cat">' + cats[ci] + "</span>" + self._dot(self._color(si)) +
+        o.series[si].name + ": <b>" + fmt(val) + sfx + "</b>", x, y - 10);
+      self._emit("raChartSelect", {
+        seriesIndex: si, categoryIndex: ci, series: o.series[si].name,
+        category: cats[ci], value: val, row: data[ci]
+      });
+    };
+    this._leaveHandler = function () {
+      o.series.forEach(function (s, si) {
+        (self.nodes.rects[si] || []).forEach(function (n) { n.style.transform = ""; });
+      });
+      self._dimGroups(-1);
+      if (self.crossLine) self.crossLine.setAttribute("opacity", 0);
+      self._xyBulletReset();
+    };
+
+    if (o.legend && nS > 1) {
+      this._buildLegend(
+        o.series.map(function (s, i) { return { name: s.name, color: self._color(i) }; }),
+        function () { self._xyTransition(); },
+        function (i) { self._dimGroups(i); });
+    } else this.legendEl.style.display = "none";
+
+    if (entrance) this._xyEntrance();
+    else this._xyFrame(this.cur.vals, 1, null);
+  };
+
+  RaChart.prototype._xyScale = function () {
+    var o = this.opts, self = this;
+    if (o.fullStacked && o.type !== "line" && o.type !== "area") {
+      this.cur.scaleMax = 100;
+      return { max: 100, step: 20 };
+    }
+    var D = this.viewData || o.data || [];
+    var maxV = 0;
+    for (var ci = 0; ci < D.length; ci++) {
+      var sum = 0;
+      o.series.forEach(function (s, si) {
+        if (self.hidden[si]) return;
+        var v = +D[ci][s.field] || 0;
+        if (o.stacked && o.type !== "line" && o.type !== "area") sum += v;
+        else if (v > maxV) maxV = v;
+      });
+      if (sum > maxV) maxV = sum;
+    }
+    var ns = niceScale(maxV || 1, o.min);
+    this.cur.scaleMax = ns.max;
+    return ns;
+  };
+
+  RaChart.prototype._xyDrawGrid = function (scale) {
+    var o = this.opts, g = this.geom, T = this.theme;
+    empty(this.gGrid);
+    var i, v, pos;
+
+    if (g.horizontal) {
+      for (v = o.min; v <= scale.max + 1e-9; v += scale.step) {
+        pos = g.plotX + (v - o.min) / (scale.max - o.min) * g.plotW;
+        svgEl("line", { x1: pos, x2: pos, y1: g.plotY, y2: g.plotY + g.plotH, stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+        svgText(this.gGrid, pos, g.plotY + g.plotH + 16, fmt(v), "middle", 11, T.label);
+      }
+      for (i = 0; i < g.nC; i++) {
+        svgText(this.gGrid, g.plotX - 7, g.plotY + g.band * (i + .5) + 4, g.cats[i], "end", 11.5, T.label);
+      }
+    } else {
+      for (v = o.min; v <= scale.max + 1e-9; v += scale.step) {
+        pos = g.plotY + g.plotH - (v - o.min) / (scale.max - o.min) * g.plotH;
+        svgEl("line", {
+          x1: g.plotX, x2: g.plotX + g.plotW, y1: pos, y2: pos,
+          stroke: v === o.min ? T.baseline : T.grid, "stroke-width": 1
+        }, this.gGrid);
+        svgText(this.gGrid, g.plotX - 7, pos + 4, fmt(v), "end", 11, T.label);
+      }
+      var skip = Math.max(1, Math.ceil(32 / g.band));
+      for (i = 0; i < g.nC; i++) {
+        if (i % skip) continue;
+        svgText(this.gGrid, g.plotX + g.band * (i + .5), g.plotY + g.plotH + 16, g.cats[i], "middle", 11, T.label);
+      }
+    }
+  };
+
+  RaChart.prototype._xyFrame = function (vals, alphaT, growth) {
+    var o = this.opts, g = this.geom, self = this;
+    var min = o.min, range = (this.cur.scaleMax - min) || 1;
+
+    var visIdx = [];
+    o.series.forEach(function (_, j) { if (!self.hidden[j]) visIdx.push(j); });
+    var lastVis = visIdx[visIdx.length - 1];
+
+    o.series.forEach(function (s, si) {
+      var target = self.hidden[si] ? 0 : 1;
+      var gEl = self.nodes.groups[si];
+      var a = self._alphas ? lerp(self._alphas.from[si], target, alphaT) : target;
+      gEl.setAttribute("opacity", a);
+
+      if (g.isLine) {
+        var pts = [];
+        for (var ci = 0; ci < g.nC; ci++) {
+          var vv = vals[si][ci] * (growth ? growth[ci] : 1);
+          var px = g.plotX + g.band * (ci + .5);
+          var py = g.plotY + g.plotH - (vv - min) / range * g.plotH;
+          pts.push([+px.toFixed(2), +py.toFixed(2)]);
+          var b = self.nodes.bullets[si][ci];
+          b.setAttribute("cx", px); b.setAttribute("cy", py);
+        }
+        var d = o.stepped ? steppedPath(pts) : linePath(pts, o.smooth);
+        self.nodes.paths[si].setAttribute("d", d);
+        if (o.type === "area") {
+          var base = g.plotY + g.plotH;
+          self.nodes.areas[si].setAttribute("d",
+            d + " L" + pts[pts.length - 1][0] + " " + base + " L" + pts[0][0] + " " + base + " Z");
+        }
+      } else {
+        var slot = visIdx.indexOf(si);
+        var nVis = Math.max(1, visIdx.length);
+
+        for (var cj = 0; cj < g.nC; cj++) {
+          var v2 = vals[si][cj] * (growth ? growth[cj] : 1);
+          var len = (v2 - min) / range * (g.horizontal ? g.plotW : g.plotH);
+          if (len < 0) len = 0;
+          var node = self.nodes.rects[si][cj];
+          var rx, ry, rw, rh, showTop = true, showSide = true;
+
+          if (o.stacked) {
+            var offset = 0;
+            for (var k = 0; k < si; k++) {
+              if (self.hidden[k]) continue;
+              offset += (vals[k][cj] * (growth ? growth[cj] : 1) - min) / range * (g.horizontal ? g.plotW : g.plotH);
+            }
+            var thick = g.band * 0.55;
+            if (g.horizontal) {
+              rx = g.plotX + offset; ry = g.plotY + g.band * cj + (g.band - thick) / 2;
+              rw = len; rh = thick; showSide = (si === lastVis);
+            } else {
+              rx = g.plotX + g.band * cj + (g.band - thick) / 2; ry = g.plotY + g.plotH - offset - len;
+              rw = thick; rh = len; showTop = (si === lastVis);
+            }
+          } else {
+            var usable = g.band * (nVis > 1 ? 0.72 : 0.55);
+            var gap = nVis > 1 ? 3 : 0;
+            var each = (usable - gap * (nVis - 1)) / nVis;
+            var start = g.band * cj + (g.band - usable) / 2 + (slot < 0 ? 0 : slot) * (each + gap);
+            if (g.horizontal) { rx = g.plotX; ry = g.plotY + start; rw = len; rh = each; }
+            else { rx = g.plotX + start; ry = g.plotY + g.plotH - len; rw = each; rh = len; }
+          }
+
+          if (g.isLolli) {
+            if (g.horizontal) {
+              var lcy = ry + rh / 2, tipX = rx + rw;
+              node._line.setAttribute("x1", g.plotX); node._line.setAttribute("y1", lcy);
+              node._line.setAttribute("x2", tipX); node._line.setAttribute("y2", lcy);
+              node._dot.setAttribute("cx", tipX); node._dot.setAttribute("cy", lcy);
+            } else {
+              var lcx = rx + rw / 2;
+              node._line.setAttribute("x1", lcx); node._line.setAttribute("y1", g.plotY + g.plotH);
+              node._line.setAttribute("x2", lcx); node._line.setAttribute("y2", ry);
+              node._dot.setAttribute("cx", lcx); node._dot.setAttribute("cy", ry);
+            }
+          } else if (g.depth > 0) {
+            var f = extrude(rx, ry, rw, rh, g.depth);
+            node._f.setAttribute("d", f.front);
+            node._t.setAttribute("d", showTop ? f.top : "M0 0");
+            node._s.setAttribute("d", showSide ? f.side : "M0 0");
+          } else {
+            var rr = o.stacked ? (si === lastVis ? 4 : 0) : 4;
+            node.setAttribute("d", colPath(rx, ry, rw, rh, rr, g.horizontal));
+          }
+        }
+      }
+    });
+  };
+
+  RaChart.prototype._xyEntrance = function () {
+    var self = this, o = this.opts, g = this.geom;
+    var dur = o.animation.duration, delay = o.animation.delay;
+
+    if (g.isLine) {
+      this._xyFrame(this.cur.vals, 1, null);
+      o.series.forEach(function (s, si) {
+        var p = self.nodes.paths[si];
+        var L = p.getTotalLength ? p.getTotalLength() : 0;
+        p.setAttribute("stroke-dasharray", L + " " + L);
+        p.setAttribute("stroke-dashoffset", L);
+        if (self.nodes.areas[si]) self.nodes.areas[si].setAttribute("opacity", 0);
+        self.nodes.bullets[si].forEach(function (b) { b.setAttribute("r", 0); });
+      });
+      var total = dur + delay + 260;
+      this._tween(total, EASE.outCubic, function (e, raw) {
+        o.series.forEach(function (s, si) {
+          var p = self.nodes.paths[si];
+          var L = p.getTotalLength ? p.getTotalLength() : 0;
+          p.setAttribute("stroke-dashoffset", L * (1 - e));
+          if (self.nodes.areas[si]) self.nodes.areas[si].setAttribute("opacity", clamp01((raw - .35) / .5));
+          self.nodes.bullets[si].forEach(function (b, ci) {
+            b.setAttribute("r", 4 * EASE.outCubic(clamp01((raw * total - ci * 36 - 180) / 240)));
+          });
+        });
+      }, function () {
+        o.series.forEach(function (s, si) {
+          self.nodes.paths[si].removeAttribute("stroke-dasharray");
+          self.nodes.paths[si].removeAttribute("stroke-dashoffset");
+          self.nodes.bullets[si].forEach(function (b) { b.setAttribute("r", 4); });
+        });
+      });
+    } else {
+      var totalMs = dur + delay * Math.min(g.nC, 10);
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        var growth = [];
+        for (var ci = 0; ci < g.nC; ci++) {
+          growth.push(EASE.outCubic(clamp01((raw * totalMs - ci * delay) / dur)));
+        }
+        self._xyFrame(self.cur.vals, 1, growth);
+      });
+    }
+  };
+
+  RaChart.prototype._xyTransition = function () {
+    var self = this;
+    var D = this.viewData || this.opts.data;
+    var from = this.cur.vals.map(function (r) { return r.slice(); });
+    var to = this._xyVals(D);
+    this._alphas = { from: this.nodes.groups.map(function (gr) { return +gr.getAttribute("opacity"); }) };
+    this._xyDrawGrid(this._xyScale());
+    this._tween(MORPH_MS, EASE.inOutCubic, function (e) {
+      var vals = from.map(function (row, si) {
+        return row.map(function (v, ci) { return lerp(v, to[si][ci], e); });
+      });
+      self._xyFrame(vals, e, null);
+      self.cur.vals = vals;
+    }, function () {
+      self.cur.vals = to;
+      self._alphas = null;
+    });
+  };
+
+  RaChart.prototype._xyCross = function (ci) {
+    var o = this.opts, g = this.geom, self = this;
+    var x = g.plotX + g.band * (ci + .5);
+    this.crossLine.setAttribute("x1", x);
+    this.crossLine.setAttribute("x2", x);
+    this.crossLine.setAttribute("opacity", 1);
+    this._xyBulletReset();
+    var rows = "";
+    o.series.forEach(function (s, si) {
+      if (self.hidden[si]) return;
+      self.nodes.bullets[si][ci].setAttribute("r", 6);
+      rows += self._dot(self._color(si)) + s.name + ": <b>" + fmt(self.cur.vals[si][ci]) + "</b>";
+    });
+    this._tipShow('<span class="ra-chart__tip-cat">' + g.cats[ci] + "</span>" + rows, x, g.plotY + 2);
+    this._emit("raChartSelect", {
+      seriesIndex: -1, categoryIndex: ci, category: g.cats[ci],
+      row: (this.viewData || [])[ci]
+    });
+  };
+
+  RaChart.prototype._xyBulletReset = function () {
+    (this.nodes.bullets || []).forEach(function (bl) {
+      if (bl) bl.forEach(function (b) { b.setAttribute("r", 4); });
+    });
+  };
+
+  /* ============================================================
+     Pie / Donut (+ semi, + 3D)
+     ============================================================ */
+
+  RaChart.prototype._buildPie = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var field = o.series.length ? o.series[0].field : "value";
+    var cats = o.data.map(function (d) { return String(d[o.category]); });
+    var vals = o.data.map(function (d) { return +d[field] || 0; });
+
+    var d = o.depth > 0 ? o.depth : 0;
+    var tilt = d > 0 ? PIE_TILT : 1;
+    var semi = !!o.semi;
+    var cx = this.w / 2, cy, R;
+    if (semi) {
+      R = Math.min(this.w / 2 - 8, (this.h - 40 - d) / tilt);
+      cy = this.h - 20 - d;
+    } else if (d > 0) {
+      R = Math.min(this.w / 2 - 8, (this.h - d - 20) / (2 * tilt));
+      cy = (this.h - d) / 2;
+    } else {
+      R = Math.min(this.w, this.h) / 2 - 8;
+      cy = this.h / 2;
+    }
+    var r0 = o.type === "donut" ? R * 0.62 : 0;
+    this.geom = { cx: cx, cy: cy, R: R, r0: r0, d: d, tilt: tilt, semi: semi, cats: cats, vals: vals, field: field };
+
+    this.gMarks = svgEl("g", null, this.svg);
+    var gInner = svgEl("g", null, this.gMarks);
+    var gOuter = svgEl("g", null, this.gMarks);
+    var gTop = svgEl("g", null, this.gMarks);
+    this.nodes = { slices: [] };
+
+    vals.forEach(function (v, i) {
+      var color = self._color(i);
+      var inner = (d > 0 && r0 > 0) ? svgEl("path", { fill: shade(color, -.3), stroke: "none" }, gInner) : null;
+      var outer = d > 0 ? svgEl("path", { fill: shade(color, -.18), stroke: "none" }, gOuter) : null;
+      var top = svgEl("path", {
+        fill: color, stroke: T.surface, "stroke-width": 2,
+        "class": "ra-hit", "data-i": i
+      }, gTop);
+      [top, outer, inner].forEach(function (p) {
+        if (p) p.style.transition = "transform .18s, opacity .18s";
+      });
+      self.nodes.slices.push({ top: top, outer: outer, inner: inner });
+    });
+
+    if (r0 > 0) {
+      this.centerSub = svgText(this.svg, cx, semi ? cy - 30 : cy - 7, "Total", "middle", 11, T.muted, 700);
+      this.centerVal = svgText(this.svg, cx, semi ? cy - 6 : cy + 16, "", "middle", 21, T.text, 800);
+    }
+
+    this._hitHandler = function (node, x, y) {
+      var i = +node.getAttribute("data-i");
+      var a = self.cur.angles[i];
+      var mid = a.start + a.sweep / 2;
+      var dx = Math.cos(mid) * 8, dy = Math.sin(mid) * 8 * tilt;
+      var s = self.nodes.slices[i];
+      [s.top, s.outer, s.inner].forEach(function (p) {
+        if (p) p.style.transform = "translate(" + dx + "px," + dy + "px)";
+      });
+      self._dimSlices(i);
+      var total = self._pieTotal();
+      var pct = total > 0 ? (vals[i] / total * 100) : 0;
+      self._tipShow(self._dot(self._color(i)) + cats[i] + ": <b>" + fmt(vals[i]) +
+        '</b> <span class="ra-chart__tip-muted">(' + pct.toFixed(1) + "%)</span>", x, y - 10);
+      self._emit("raChartSelect", { index: i, category: cats[i], value: vals[i], percent: pct, row: o.data[i] });
+    };
+    this._leaveHandler = function () {
+      self.nodes.slices.forEach(function (s) {
+        [s.top, s.outer, s.inner].forEach(function (p) { if (p) p.style.transform = ""; });
+      });
+      self._dimSlices(-1);
+    };
+
+    if (o.legend) {
+      this._buildLegend(
+        cats.map(function (c, i) { return { name: c, color: self._color(i), value: vals[i] }; }),
+        function () { self._pieTransition(); },
+        function (i) { self._dimSlices(i); });
+    } else this.legendEl.style.display = "none";
+
+    var target = this._pieAngles();
+    this.cur = { kind: "pie", angles: target.map(function (a) { return { start: a.start, sweep: a.sweep }; }) };
+
+    if (entrance) {
+      var start = semi ? -Math.PI : -Math.PI / 2;
+      var span = semi ? Math.PI : Math.PI * 2;
+      this._tween(o.animation.duration + o.animation.delay, EASE.outCubic, function (e) {
+        var sweepAll = e * span;
+        var angles = target.map(function (a) {
+          return { start: a.start, sweep: clamp01((sweepAll - (a.start - start)) / (a.sweep || 1e-9)) * a.sweep };
+        });
+        self._pieFrame(angles);
+        self.cur.angles = angles;
+      }, function () {
+        self.cur.angles = target;
+        self._pieFrame(target);
+      });
+    } else {
+      this._pieFrame(target);
+      this.cur.angles = target;
+    }
+    this._pieCenter();
+  };
+
+  RaChart.prototype._pieTotal = function () {
+    var self = this, t = 0;
+    this.geom.vals.forEach(function (v, i) { if (!self.hidden[i]) t += v; });
+    return t;
+  };
+
+  RaChart.prototype._pieAngles = function () {
+    var self = this;
+    var total = this._pieTotal() || 1;
+    var semi = this.geom && this.geom.semi;
+    var span = semi ? Math.PI : Math.PI * 2;
+    var a = semi ? -Math.PI : -Math.PI / 2;
+    return this.geom.vals.map(function (v, i) {
+      var sweep = self.hidden[i] ? 0 : (v / total) * span;
+      var out = { start: a, sweep: sweep };
+      a += sweep;
+      return out;
+    });
+  };
+
+  RaChart.prototype._pieFrame = function (angles) {
+    var g = this.geom;
+    for (var i = 0; i < angles.length; i++) {
+      var a0 = angles[i].start, a1 = a0 + angles[i].sweep;
+      var s = this.nodes.slices[i];
+      s.top.setAttribute("d", arcPath(g.cx, g.cy, g.r0, g.R, a0, a1, g.tilt));
+      if (g.d > 0) {
+        if (s.outer) s.outer.setAttribute("d", wallPath(g.R, Math.max(a0, 0), Math.min(a1, Math.PI), g) || "M0 0");
+        if (s.inner) {
+          var innerD = wallPath(g.r0, a0, Math.min(a1, 0), g) + wallPath(g.r0, Math.max(a0, Math.PI), a1, g);
+          s.inner.setAttribute("d", innerD || "M0 0");
+        }
+      }
+    }
+  };
+
+  RaChart.prototype._pieCenter = function () {
+    if (this.centerVal) setText(this.centerVal, fmt(this._pieTotal()));
+  };
+
+  RaChart.prototype._pieTransition = function () {
+    var self = this;
+    var from = this.cur.angles.map(function (a) { return { start: a.start, sweep: a.sweep }; });
+    var to = this._pieAngles();
+    this._tween(MORPH_MS, EASE.inOutCubic, function (e) {
+      var angles = from.map(function (a, i) {
+        return { start: lerp(a.start, to[i].start, e), sweep: lerp(a.sweep, to[i].sweep, e) };
+      });
+      self._pieFrame(angles);
+      self.cur.angles = angles;
+    }, function () { self.cur.angles = to; });
+    this._pieCenter();
+  };
+
+  /* ============================================================
+     Radar
+     ============================================================ */
+
+  RaChart.prototype._buildRadar = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var cats = o.data.map(function (d) { return String(d[o.category]); });
+    var nC = cats.length, nS = o.series.length;
+
+    var cx = this.w / 2, cy = this.h / 2 + 2;
+    var R = Math.min(this.w, this.h) / 2 - 30;
+    this.geom = { cx: cx, cy: cy, R: R, cats: cats, nC: nC };
+    this.cur = { kind: "radar", vals: o.series.map(function (s) { return o.data.map(function (d) { return +d[s.field] || 0; }); }) };
+
+    var maxV = 0;
+    this.cur.vals.forEach(function (row, si) {
+      if (self.hidden[si]) return;
+      row.forEach(function (v) { if (v > maxV) maxV = v; });
+    });
+    var ns = niceScale(maxV || 1, o.min);
+    this.cur.scaleMax = ns.max;
+
+    function angle(i) { return -Math.PI / 2 + i * Math.PI * 2 / nC; }
+    function pt(i, r) { return [cx + Math.cos(angle(i)) * r, cy + Math.sin(angle(i)) * r]; }
+    this._radarPt = pt;
+
+    this.gGrid = svgEl("g", null, this.svg);
+    this.gMarks = svgEl("g", null, this.svg);
+
+    for (var v = o.min + ns.step; v <= ns.max + 1e-9; v += ns.step) {
+      var rr = (v - o.min) / (ns.max - o.min) * R;
+      var ringPts = [];
+      for (var i = 0; i < nC; i++) ringPts.push(pt(i, rr).map(function (n) { return n.toFixed(1); }).join(","));
+      svgEl("polygon", { points: ringPts.join(" "), fill: "none", stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+      svgText(this.gGrid, cx + 4, cy - rr - 3, fmt(v), "start", 10, T.label);
+    }
+    for (var j = 0; j < nC; j++) {
+      var e2 = pt(j, R);
+      svgEl("line", { x1: cx, y1: cy, x2: e2[0], y2: e2[1], stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+      var lp = pt(j, R + 14);
+      var ca = Math.cos(angle(j)), sa = Math.sin(angle(j));
+      svgText(this.gGrid, lp[0], lp[1] + (sa > .3 ? 8 : sa < -.3 ? -1 : 4), cats[j],
+        ca > .3 ? "start" : ca < -.3 ? "end" : "middle", 11, T.body, 600);
+    }
+
+    this.nodes = { polys: [], bullets: [], groups: [] };
+    o.series.forEach(function (s, si) {
+      var color = self._color(si);
+      var gS = svgEl("g", { opacity: self.hidden[si] ? 0 : 1 }, self.gMarks);
+      gS.style.transition = "opacity .18s";
+      var poly = svgEl("polygon", {
+        fill: color, "fill-opacity": 0.15, stroke: color,
+        "stroke-width": 2, "stroke-linejoin": "round"
+      }, gS);
+      var bl = [];
+      for (var ci = 0; ci < nC; ci++) {
+        var b = svgEl("circle", {
+          r: COARSE ? 5 : 4, fill: color, stroke: T.surface, "stroke-width": 2,
+          "class": "ra-hit", "data-s": si, "data-c": ci
+        }, gS);
+        bl.push(b);
+      }
+      self.nodes.polys.push(poly);
+      self.nodes.bullets.push(bl);
+      self.nodes.groups.push(gS);
+    });
+
+    this._hitHandler = function (node, x, y) {
+      var si = +node.getAttribute("data-s"), ci = +node.getAttribute("data-c");
+      node.setAttribute("r", COARSE ? 7 : 6);
+      if (nS > 1) self._dimGroups(si);
+      self._tipShow('<span class="ra-chart__tip-cat">' + cats[ci] + "</span>" +
+        self._dot(self._color(si)) + o.series[si].name + ": <b>" + fmt(self.cur.vals[si][ci]) + "</b>", x, y - 10);
+      self._emit("raChartSelect", {
+        seriesIndex: si, categoryIndex: ci, series: o.series[si].name,
+        category: cats[ci], value: self.cur.vals[si][ci], row: o.data[ci]
+      });
+    };
+    this._leaveHandler = function () {
+      self.nodes.bullets.forEach(function (bl) {
+        bl.forEach(function (b) { b.setAttribute("r", COARSE ? 5 : 4); });
+      });
+      self._dimGroups(-1);
+    };
+
+    if (o.legend && nS > 1) {
+      this._buildLegend(
+        o.series.map(function (s, i) { return { name: s.name, color: self._color(i) }; }),
+        function () { self._radarTransition(); },
+        function (i) { self._dimGroups(i); });
+    } else this.legendEl.style.display = "none";
+
+    if (entrance) {
+      this._tween(o.animation.duration + o.animation.delay, EASE.outCubic, function (e) {
+        self._radarFrame(self.cur.vals, e, 1);
+      });
+    } else this._radarFrame(this.cur.vals, 1, 1);
+  };
+
+  RaChart.prototype._radarFrame = function (vals, factor, alphaT) {
+    var self = this, o = this.opts, g = this.geom;
+    var min = o.min, range = (this.cur.scaleMax - min) || 1;
+    o.series.forEach(function (s, si) {
+      var target = self.hidden[si] ? 0 : 1;
+      var a = self._alphas ? lerp(self._alphas.from[si], target, alphaT) : target;
+      self.nodes.groups[si].setAttribute("opacity", a);
+      var pts = [];
+      for (var ci = 0; ci < g.nC; ci++) {
+        var r = (vals[si][ci] * factor - min * factor) / range * g.R;
+        if (r < 0) r = 0;
+        var p = self._radarPt(ci, r);
+        pts.push(p[0].toFixed(1) + "," + p[1].toFixed(1));
+        self.nodes.bullets[si][ci].setAttribute("cx", p[0]);
+        self.nodes.bullets[si][ci].setAttribute("cy", p[1]);
+      }
+      self.nodes.polys[si].setAttribute("points", pts.join(" "));
+    });
+  };
+
+  RaChart.prototype._radarTransition = function () {
+    var self = this, o = this.opts;
+    var from = this.cur.vals.map(function (r) { return r.slice(); });
+    var to = o.series.map(function (s) { return o.data.map(function (d) { return +d[s.field] || 0; }); });
+    this._alphas = { from: this.nodes.groups.map(function (gr) { return +gr.getAttribute("opacity"); }) };
+    this._tween(MORPH_MS, EASE.inOutCubic, function (e) {
+      var vals = from.map(function (row, si) {
+        return row.map(function (v, ci) { return lerp(v, to[si][ci], e); });
+      });
+      self.cur.vals = vals;
+      self._radarFrame(vals, 1, e);
+    }, function () {
+      self.cur.vals = to;
+      self._alphas = null;
+    });
+  };
+
+  /* ============================================================
+     Treemap
+     ============================================================ */
+
+  RaChart.prototype._buildTreemap = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var field = o.series.length ? o.series[0].field : "value";
+    var cats = o.data.map(function (d) { return String(d[o.category]); });
+    var rawVals = o.data.map(function (d) { return +d[field] || 0; });
+    var vals = rawVals.map(function (v, i) { return self.hidden[i] ? 0 : v; });
+    this.cur = { kind: "treemap" };
+
+    var rects = treemapLayout(vals, 2, 2, this.w - 4, this.h - 4);
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { cells: [] };
+    var total = 0;
+    vals.forEach(function (v) { total += v; });
+
+    vals.forEach(function (v, i) {
+      var r = rects[i];
+      if (!r) { self.nodes.cells.push(null); return; }
+      var gC = svgEl("g", { "class": "ra-hit", "data-i": i }, self.gMarks);
+      gC.style.transition = "opacity .18s";
+      var rect = svgEl("rect", { fill: self._color(i), stroke: T.surface, "stroke-width": 2, rx: 3 }, gC);
+      var lbl = null, lblV = null;
+      if (r.w > 54 && r.h > 36) {
+        lbl = svgText(gC, 0, 0, cats[i], "start", 12, "#ffffff", 700);
+        lblV = svgText(gC, 0, 0, fmt(v), "start", 10.5, "rgba(255,255,255,.85)", 600);
+      }
+      self.nodes.cells.push({ g: gC, rect: rect, lbl: lbl, lblV: lblV, r: r });
+    });
+
+    function drawCell(c, e) {
+      var r = c.r;
+      var wq = Math.max(0, r.w * e), hq = Math.max(0, r.h * e);
+      c.rect.setAttribute("x", r.x + (r.w - wq) / 2);
+      c.rect.setAttribute("y", r.y + (r.h - hq) / 2);
+      c.rect.setAttribute("width", wq);
+      c.rect.setAttribute("height", hq);
+      if (c.lbl) {
+        c.lbl.setAttribute("x", r.x + 8); c.lbl.setAttribute("y", r.y + 19);
+        c.lbl.setAttribute("opacity", e);
+        c.lblV.setAttribute("x", r.x + 8); c.lblV.setAttribute("y", r.y + 34);
+        c.lblV.setAttribute("opacity", e * .9);
+      }
+    }
+
+    this._hitHandler = function (node, x, y) {
+      var i = +node.getAttribute("data-i");
+      self.nodes.cells.forEach(function (c, j) { if (c) c.g.style.opacity = j === i ? "" : .55; });
+      var pct = total > 0 ? (vals[i] / total * 100) : 0;
+      self._tipShow(self._dot(self._color(i)) + cats[i] + ": <b>" + fmt(vals[i]) +
+        '</b> <span class="ra-chart__tip-muted">(' + pct.toFixed(1) + "%)</span>", x, y - 10);
+      self._emit("raChartSelect", { index: i, category: cats[i], value: vals[i], percent: pct, row: o.data[i] });
+    };
+    this._leaveHandler = function () {
+      self.nodes.cells.forEach(function (c) { if (c) c.g.style.opacity = ""; });
+    };
+
+    if (o.legend) {
+      this._buildLegend(
+        cats.map(function (c, i) { return { name: c, color: self._color(i), value: rawVals[i] }; }),
+        function () { self.build(true); },
+        function (i) {
+          self.nodes.cells.forEach(function (c, j) { if (c) c.g.style.opacity = (i >= 0 && j !== i) ? .55 : ""; });
+        });
+    } else this.legendEl.style.display = "none";
+
+    if (entrance) {
+      var dur = o.animation.duration * 0.6, delay = 42;
+      var totalMs = dur + delay * this.nodes.cells.length;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.cells.forEach(function (c, i) {
+          if (c) drawCell(c, EASE.outCubic(clamp01((raw * totalMs - i * delay) / dur)));
+        });
+      });
+    } else {
+      this.nodes.cells.forEach(function (c) { if (c) drawCell(c, 1); });
+    }
+  };
+
+  /* ============================================================
+     Sankey
+     ============================================================ */
+
+  RaChart.prototype._buildSankey = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var F = merge({ from: "from", to: "to", value: "value" }, o.fields || {});
+    var links = (o.data || []).map(function (d) {
+      return { s: String(d[F.from]), t: String(d[F.to]), v: +d[F.value] || 0 };
+    }).filter(function (l) { return l.v > 0 && l.s !== l.t; });
+
+    this.cur = { kind: "sankey" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { links: [], rects: [] };
+    this.legendEl.style.display = "none";
+    if (!links.length) return;
+
+    var names = [];
+    links.forEach(function (l) {
+      if (names.indexOf(l.s) < 0) names.push(l.s);
+      if (names.indexOf(l.t) < 0) names.push(l.t);
+    });
+    var idx = {};
+    names.forEach(function (n, i) { idx[n] = i; });
+    var N = names.length;
+
+    var layer = names.map(function () { return 0; });
+    for (var it = 0; it < N; it++) {
+      var changed = false;
+      links.forEach(function (l) {
+        if (layer[idx[l.t]] < layer[idx[l.s]] + 1) { layer[idx[l.t]] = layer[idx[l.s]] + 1; changed = true; }
+      });
+      if (!changed) break;
+    }
+    var maxLayer = Math.max.apply(null, layer);
+
+    var inSum = names.map(function () { return 0; }), outSum = names.map(function () { return 0; });
+    links.forEach(function (l) { outSum[idx[l.s]] += l.v; inSum[idx[l.t]] += l.v; });
+    var flow = names.map(function (n, i) { return Math.max(inSum[i], outSum[i]); });
+
+    var layers = [];
+    for (var L = 0; L <= maxLayer; L++) layers.push([]);
+    names.forEach(function (n, i) { layers[layer[i]].push(i); });
+
+    var padT = 10, padB = 12, gapN = 10, nodeW = 12;
+    var availH = this.h - padT - padB;
+    var scale = Infinity;
+    layers.forEach(function (col) {
+      var tf = 0;
+      col.forEach(function (i) { tf += flow[i]; });
+      var s = (availH - gapN * Math.max(0, col.length - 1)) / (tf || 1);
+      if (s < scale) scale = s;
+    });
+    if (!isFinite(scale)) scale = 1;
+
+    var labelPad = 52;
+    var x0 = 6, x1 = this.w - 6 - nodeW - (maxLayer > 0 ? labelPad : 0);
+    var pos = [];
+    layers.forEach(function (col, L2) {
+      var tf = 0;
+      col.forEach(function (i) { tf += flow[i]; });
+      var colH = tf * scale + gapN * Math.max(0, col.length - 1);
+      var yy = padT + (availH - colH) / 2;
+      var lx = maxLayer ? x0 + (x1 - x0) * L2 / maxLayer : (x0 + x1) / 2;
+      col.forEach(function (i) {
+        pos[i] = { x: lx, y: yy, h: Math.max(2, flow[i] * scale), layer: L2 };
+        yy += flow[i] * scale + gapN;
+      });
+    });
+
+    var gLinks = svgEl("g", null, this.gMarks);
+    var gNodes = svgEl("g", null, this.gMarks);
+    var outOff = names.map(function () { return 0; }), inOff = names.map(function () { return 0; });
+    var sorted = links.slice().sort(function (a, b) {
+      return pos[idx[a.t]].y - pos[idx[b.t]].y || pos[idx[a.s]].y - pos[idx[b.s]].y;
+    });
+
+    sorted.forEach(function (l) {
+      var si = idx[l.s], ti = idx[l.t];
+      var lw = Math.max(1.5, l.v * scale);
+      var sx = pos[si].x + nodeW, sy = pos[si].y + outOff[si] + l.v * scale / 2;
+      var tx = pos[ti].x, ty = pos[ti].y + inOff[ti] + l.v * scale / 2;
+      outOff[si] += l.v * scale;
+      inOff[ti] += l.v * scale;
+      var mx = (sx + tx) / 2;
+      var p = svgEl("path", {
+        d: "M" + sx + " " + sy + " C" + mx + " " + sy + " " + mx + " " + ty + " " + tx + " " + ty,
+        fill: "none", stroke: self._color(si), "stroke-width": lw,
+        "stroke-opacity": entrance ? 0 : 0.32,
+        "class": "ra-hit", "data-kind": "link", "data-i": self.nodes.links.length
+      }, gLinks);
+      self.nodes.links.push({ p: p, l: l, sLayer: pos[si].layer });
+    });
+
+    names.forEach(function (n, i) {
+      var gN = svgEl("g", {
+        "class": "ra-hit", "data-kind": "node", "data-i": i, opacity: entrance ? 0 : 1
+      }, gNodes);
+      svgEl("rect", {
+        x: pos[i].x, y: pos[i].y, width: nodeW, height: pos[i].h, rx: 3, fill: self._color(i)
+      }, gN);
+      var right = pos[i].layer < maxLayer;
+      svgText(gN, right ? pos[i].x + nodeW + 6 : pos[i].x - 6, pos[i].y + pos[i].h / 2 + 4,
+        n, right ? "start" : "end", 11, T.body, 600);
+      self.nodes.rects.push({ g: gN, layer: pos[i].layer, name: n, flow: flow[i] });
+    });
+
+    this._hitHandler = function (node, x, y) {
+      var kind = node.getAttribute("data-kind"), i = +node.getAttribute("data-i");
+      var html;
+      if (kind === "link") {
+        var lk = self.nodes.links[i];
+        self.nodes.links.forEach(function (l3, j) { l3.p.setAttribute("stroke-opacity", j === i ? .65 : .1); });
+        html = lk.l.s + " &rarr; " + lk.l.t + ": <b>" + fmt(lk.l.v) + "</b>";
+        self._emit("raChartSelect", { kind: "link", from: lk.l.s, to: lk.l.t, value: lk.l.v });
+      } else {
+        var nd = self.nodes.rects[i], nm = nd.name;
+        self.nodes.links.forEach(function (l3) {
+          l3.p.setAttribute("stroke-opacity", (l3.l.s === nm || l3.l.t === nm) ? .55 : .1);
+        });
+        html = nm + ": <b>" + fmt(nd.flow) + "</b>";
+        self._emit("raChartSelect", { kind: "node", name: nm, value: nd.flow });
+      }
+      self._tipShow(html, x, y - 10);
+    };
+    this._leaveHandler = function () {
+      self.nodes.links.forEach(function (l3) { l3.p.setAttribute("stroke-opacity", .32); });
+    };
+
+    function finish() {
+      self.nodes.links.forEach(function (l3) { l3.p.style.transition = "stroke-opacity .18s"; });
+    }
+    if (entrance) {
+      var totalMs = o.animation.duration + maxLayer * 180;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.rects.forEach(function (nd) {
+          nd.g.setAttribute("opacity", EASE.outCubic(clamp01((raw * totalMs - nd.layer * 180) / 420)));
+        });
+        self.nodes.links.forEach(function (l3) {
+          l3.p.setAttribute("stroke-opacity", .32 * EASE.outCubic(clamp01((raw * totalMs - l3.sLayer * 180 - 140) / 420)));
+        });
+      }, finish);
+    } else finish();
+  };
+
+  /* ============================================================
+     Word cloud
+     ============================================================ */
+
+  RaChart.prototype._buildCloud = function (entrance) {
+    var self = this, o = this.opts;
+    var field = o.series.length ? o.series[0].field : "value";
+    var items = (o.data || []).map(function (d) { return { w: String(d[o.category]), v: +d[field] || 0 }; })
+      .filter(function (it) { return it.v > 0; })
+      .sort(function (a, b) { return b.v - a.v; });
+    var vmax = items.length ? items[0].v : 1;
+    var cx = this.w / 2, cy = this.h / 2, W = this.w, H = this.h;
+
+    this.cur = { kind: "cloud" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { words: [] };
+    this.legendEl.style.display = "none";
+    var placed = [];
+    var base = Math.max(11, Math.min(16, W / 26));
+    var range = Math.max(14, Math.min(30, W / 13));
+
+    items.forEach(function (it, i) {
+      var size = base + range * Math.sqrt(it.v / vmax);
+      var font = "700 " + size + "px system-ui, -apple-system, 'Segoe UI', sans-serif";
+      var tw = textW(it.w, font) + 6;
+      var th = size * 1.1;
+      var px = cx, py = cy, ok = false;
+      for (var t = 0; t < 2400; t++) {
+        var r = t * 0.18, a = t * 0.33;
+        px = cx + r * Math.cos(a) * 1.4;
+        py = cy + r * Math.sin(a);
+        var box = { x: px - tw / 2, y: py - th / 2, w: tw, h: th };
+        if (box.x < 2 || box.y < 2 || box.x + box.w > W - 2 || box.y + box.h > H - 2) continue;
+        var hit = placed.some(function (b) {
+          return !(box.x + box.w < b.x || b.x + b.w < box.x || box.y + box.h < b.y || b.y + b.h < box.y);
+        });
+        if (!hit) { ok = true; placed.push(box); break; }
+      }
+      if (!ok) return;
+      var txt = svgEl("text", {
+        x: px, y: py, "text-anchor": "middle", "dominant-baseline": "middle",
+        "font-size": size, fill: self._color(i),
+        "font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif", "font-weight": 700,
+        "class": "ra-hit", "data-i": self.nodes.words.length, opacity: entrance ? 0 : 1
+      }, self.gMarks);
+      txt.appendChild(document.createTextNode(it.w));
+      self.nodes.words.push({ node: txt, it: it, size: size });
+    });
+
+    this._hitHandler = function (node, x, y) {
+      var i = +node.getAttribute("data-i");
+      self.nodes.words.forEach(function (w2, j) {
+        w2.node.style.opacity = j === i ? "" : .35;
+        w2.node.style.fontSize = j === i ? (w2.size * 1.14) + "px" : "";
+      });
+      var w3 = self.nodes.words[i];
+      self._tipShow(w3.it.w + ": <b>" + fmt(w3.it.v) + "</b>", x, y - 14);
+      self._emit("raChartSelect", { index: i, category: w3.it.w, value: w3.it.v });
+    };
+    this._leaveHandler = function () {
+      self.nodes.words.forEach(function (w2) {
+        w2.node.style.opacity = "";
+        w2.node.style.fontSize = "";
+      });
+    };
+
+    function finish() {
+      self.nodes.words.forEach(function (w2) { w2.node.style.transition = "opacity .18s, font-size .18s"; });
+    }
+    if (entrance) {
+      var dur = 320, delay = 50;
+      var totalMs = dur + delay * this.nodes.words.length;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.words.forEach(function (w2, i) {
+          w2.node.setAttribute("opacity", EASE.outCubic(clamp01((raw * totalMs - i * delay) / dur)));
+        });
+      }, finish);
+    } else finish();
+  };
+
+  /* ============================================================
+     Venn
+     ============================================================ */
+
+  RaChart.prototype._buildVenn = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var field = o.series.length ? o.series[0].field : "value";
+    var all = (o.data || []).slice(0, 3).map(function (d, i) {
+      return { label: String(d[o.category]), v: +d[field] || 0, di: i };
+    });
+    var items = all.filter(function (it) { return !self.hidden[it.di] && it.v > 0; });
+    var n = items.length;
+
+    this.cur = { kind: "venn" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { circles: [] };
+
+    var cx = this.w / 2, cy = this.h / 2;
+    var vmax = Math.max.apply(null, items.map(function (i2) { return i2.v; }).concat([1]));
+    var Rmax = Math.min(this.w, this.h) / (n <= 1 ? 2.6 : 3.1);
+    var radii = items.map(function (it) { return Math.max(22, Rmax * Math.sqrt(it.v / vmax)); });
+    var centers;
+    if (n === 1) centers = [[cx, cy]];
+    else if (n === 2) {
+      var d2 = (radii[0] + radii[1]) * 0.6;
+      centers = [[cx - d2 / 2, cy], [cx + d2 / 2, cy]];
+    } else if (n === 3) {
+      var dAB = (radii[0] + radii[1]) * 0.6;
+      var yTop = cy - Rmax * 0.42;
+      centers = [
+        [cx - dAB / 2, yTop], [cx + dAB / 2, yTop],
+        [cx, yTop + ((radii[0] + radii[2]) * 0.6 + (radii[1] + radii[2]) * 0.6) / 2 * 0.82]
+      ];
+    } else centers = [];
+
+    items.forEach(function (it, i) {
+      var color = self._color(it.di);
+      var c = svgEl("circle", {
+        cx: centers[i][0], cy: centers[i][1], r: entrance ? 0 : radii[i],
+        fill: color, "fill-opacity": .38, stroke: color, "stroke-width": 2,
+        "class": "ra-hit", "data-i": i
+      }, self.gMarks);
+      c.style.transition = "fill-opacity .18s";
+      var mx = 0, my = 0;
+      centers.forEach(function (p) { mx += p[0] / centers.length; my += p[1] / centers.length; });
+      var dx = centers[i][0] - mx, dy = centers[i][1] - my;
+      var dl = Math.sqrt(dx * dx + dy * dy) || 1;
+      var lx = n === 1 ? centers[i][0] : centers[i][0] + dx / dl * radii[i] * 0.45;
+      var ly = n === 1 ? centers[i][1] : centers[i][1] + dy / dl * radii[i] * 0.45;
+      var t1 = svgText(self.gMarks, lx, ly, it.label, "middle", 12.5, T.text, 700);
+      var t2 = svgText(self.gMarks, lx, ly + 15, fmt(it.v), "middle", 11, T.body, 600);
+      if (entrance) { t1.setAttribute("opacity", 0); t2.setAttribute("opacity", 0); }
+      self.nodes.circles.push({ c: c, r: radii[i], t1: t1, t2: t2, it: it });
+    });
+
+    this._hitHandler = function (node, x, y) {
+      var i = +node.getAttribute("data-i");
+      self.nodes.circles.forEach(function (c2, j) { c2.c.setAttribute("fill-opacity", j === i ? .58 : .16); });
+      var c3 = self.nodes.circles[i];
+      self._tipShow(self._dot(self._color(c3.it.di)) + c3.it.label + ": <b>" + fmt(c3.it.v) + "</b>", x, y - 10);
+      self._emit("raChartSelect", { index: c3.it.di, category: c3.it.label, value: c3.it.v });
+    };
+    this._leaveHandler = function () {
+      self.nodes.circles.forEach(function (c2) { c2.c.setAttribute("fill-opacity", .38); });
+    };
+
+    if (o.legend && all.length > 1) {
+      this._buildLegend(
+        all.map(function (it) { return { name: it.label, color: self._color(it.di), value: it.v }; }),
+        function () { self.build(true); },
+        function (i) {
+          self.nodes.circles.forEach(function (c2) {
+            c2.c.setAttribute("fill-opacity", (i >= 0 && c2.it.di !== i) ? .16 : .38);
+          });
+        });
+    } else this.legendEl.style.display = "none";
+
+    if (entrance) {
+      var dur = o.animation.duration * 0.7, delay = 130;
+      var totalMs = dur + delay * n;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.circles.forEach(function (c2, i) {
+          var p = EASE.outCubic(clamp01((raw * totalMs - i * delay) / dur));
+          c2.c.setAttribute("r", c2.r * p);
+          c2.t1.setAttribute("opacity", p);
+          c2.t2.setAttribute("opacity", p * .9);
+        });
+      });
+    }
+  };
+
+  /* ============================================================
+     Candlestick
+     ============================================================ */
+
+  RaChart.prototype._buildCandle = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var F = merge({ open: "open", high: "high", low: "low", close: "close" }, o.fields || {});
+    var vw = this._zoomWindow((o.data || []).length);
+    var data = (o.data || []).slice(vw[0], vw[1] + 1);
+    this.viewData = data;
+    var cats = data.map(function (d) { return String(d[o.category]); });
+    var n = cats.length;
+    this.cur = { kind: "candle" };
+    this.legendEl.style.display = "none";
+
+    var lo = Infinity, hi = -Infinity;
+    var rows = data.map(function (d) {
+      var r = { o: +d[F.open] || 0, h: +d[F.high] || 0, l: +d[F.low] || 0, c: +d[F.close] || 0 };
+      if (r.l < lo) lo = r.l;
+      if (r.h > hi) hi = r.h;
+      return r;
+    });
+    if (!isFinite(lo)) { lo = 0; hi = 1; }
+    if (hi === lo) hi = lo + 1;
+    var padV = (hi - lo) * 0.08;
+    var aMin = lo - padV, aMax = hi + padV;
+    var step = niceScale(aMax, aMin).step;
+
+    var yLabels = [];
+    for (var v = Math.ceil(aMin / step) * step; v <= aMax + 1e-9; v += step) yLabels.push(fmt(v));
+    var padL = Math.max.apply(null, yLabels.map(function (s) { return textW(s); }).concat([12])) + 12;
+    var g = { plotX: padL, plotY: 8, plotW: Math.max(40, this.w - padL - 8), plotH: Math.max(40, this.h - 42) };
+    g.band = g.plotW / Math.max(1, n);
+    this.geom = g;
+
+    this.gGrid = svgEl("g", null, this.svg);
+    this.gMarks = svgEl("g", null, this.svg);
+    function y(val) { return g.plotY + g.plotH - (val - aMin) / (aMax - aMin) * g.plotH; }
+
+    for (var v2 = Math.ceil(aMin / step) * step; v2 <= aMax + 1e-9; v2 += step) {
+      var pos = y(v2);
+      svgEl("line", { x1: g.plotX, x2: g.plotX + g.plotW, y1: pos, y2: pos, stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+      svgText(this.gGrid, g.plotX - 7, pos + 4, fmt(v2), "end", 11, T.label);
+    }
+    var skip = Math.max(1, Math.ceil(42 / g.band));
+    for (var i = 0; i < n; i++) {
+      if (i % skip) continue;
+      svgText(this.gGrid, g.plotX + g.band * (i + .5), g.plotY + g.plotH + 16, cats[i], "middle", 11, T.label);
+    }
+
+    this.nodes = { candles: [] };
+    rows.forEach(function (r, i2) {
+      var up = r.c >= r.o;
+      var color = up ? o.upColor : o.downColor;
+      var ccx = g.plotX + g.band * (i2 + .5);
+      var gC = svgEl("g", { "class": "ra-hit", "data-i": i2 }, self.gMarks);
+      gC.style.transition = "opacity .18s";
+      var wick = svgEl("line", { x1: ccx, x2: ccx, stroke: color, "stroke-width": 1.5 }, gC);
+      var bw = Math.max(3, Math.min(18, g.band * 0.55));
+      var body = svgEl("rect", { x: ccx - bw / 2, width: bw, fill: color, rx: 1.5 }, gC);
+      // wide invisible hit target so a fingertip can pick a thin candle
+      svgEl("rect", {
+        x: g.plotX + g.band * i2, y: g.plotY, width: g.band, height: g.plotH, fill: "transparent"
+      }, gC);
+      self.nodes.candles.push({ g: gC, wick: wick, body: body, r: r, up: up });
+    });
+
+    function drawCandle(c, e) {
+      var mid = (c.r.h + c.r.l) / 2;
+      function iy(val) { return y(mid + (val - mid) * e); }
+      c.wick.setAttribute("y1", iy(c.r.h));
+      c.wick.setAttribute("y2", iy(c.r.l));
+      var top = iy(Math.max(c.r.o, c.r.c)), bot = iy(Math.min(c.r.o, c.r.c));
+      c.body.setAttribute("y", top);
+      c.body.setAttribute("height", Math.max(1, bot - top));
+    }
+
+    this._hitHandler = function (node, x, y2) {
+      var i2 = +node.getAttribute("data-i");
+      var c = self.nodes.candles[i2];
+      self.nodes.candles.forEach(function (cc, j) { cc.g.style.opacity = j === i2 ? "" : .45; });
+      self._tipShow(
+        '<span class="ra-chart__tip-cat">' + cats[i2] + "</span>" +
+        self._dot(c.up ? o.upColor : o.downColor) +
+        "O <b>" + fmt(c.r.o) + "</b> H <b>" + fmt(c.r.h) + "</b><br>" +
+        "L <b>" + fmt(c.r.l) + "</b> C <b>" + fmt(c.r.c) + "</b>", x, y2 - 10);
+      self._emit("raChartSelect", { index: i2, category: cats[i2], ohlc: c.r, row: data[i2] });
+    };
+    this._leaveHandler = function () {
+      self.nodes.candles.forEach(function (cc) { cc.g.style.opacity = ""; });
+    };
+
+    if (entrance) {
+      var dur = o.animation.duration * 0.45, delay = 26;
+      var totalMs = dur + delay * n;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.candles.forEach(function (c, i2) {
+          drawCandle(c, EASE.outCubic(clamp01((raw * totalMs - i2 * delay) / dur)));
+        });
+      });
+    } else {
+      this.nodes.candles.forEach(function (c) { drawCandle(c, 1); });
+    }
+  };
+
+  /* ============================================================
+     Timeline
+     ============================================================ */
+
+  RaChart.prototype._buildTimeline = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var field = o.series.length ? o.series[0].field : "date";
+    var items = (o.data || []).map(function (d) {
+      var p = parseVal(d[field]);
+      return { label: String(d[o.category]), n: p.n, isDate: p.isDate };
+    });
+    var isDate = items.some(function (it) { return it.isDate; });
+
+    this.cur = { kind: "timeline" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { events: [] };
+    this.legendEl.style.display = "none";
+    if (!items.length) return;
+
+    var lo = Infinity, hi = -Infinity;
+    items.forEach(function (it) {
+      if (it.n < lo) lo = it.n;
+      if (it.n > hi) hi = it.n;
+    });
+    if (hi === lo) hi = lo + 1;
+    var g = { plotX: 34, plotW: this.w - 68, cy: this.h / 2 };
+    function x(nv) { return g.plotX + (nv - lo) / (hi - lo) * g.plotW; }
+    function fmtV(nv) { return isDate ? fmtDateShort(nv) : fmt(nv); }
+
+    var axis = svgEl("line", {
+      x1: g.plotX, y1: g.cy, x2: entrance ? g.plotX : g.plotX + g.plotW, y2: g.cy,
+      stroke: T.baseline, "stroke-width": 2, "stroke-linecap": "round"
+    }, this.gMarks);
+
+    items.forEach(function (it, i) {
+      var ex = x(it.n);
+      var up = i % 2 === 0;
+      var stem = 36 + (Math.floor(i / 2) % 2 ? 26 : 0);
+      var ey = g.cy + (up ? -stem : stem);
+      var gE = svgEl("g", { "class": "ra-hit", "data-i": i, opacity: entrance ? 0 : 1 }, self.gMarks);
+      svgEl("line", { x1: ex, y1: g.cy, x2: ex, y2: ey, stroke: T.grid, "stroke-width": 1.5 }, gE);
+      var dot = svgEl("circle", {
+        cx: ex, cy: g.cy, r: COARSE ? 7 : 6, fill: self._color(i), stroke: T.surface, "stroke-width": 2
+      }, gE);
+      svgText(gE, ex, ey + (up ? -16 : 19), it.label, "middle", 12, T.text, 700);
+      svgText(gE, ex, ey + (up ? -3 : 32), fmtV(it.n), "middle", 10.5, T.muted, 600);
+      self.nodes.events.push({ g: gE, dot: dot, it: it });
+    });
+
+    this._hitHandler = function (node, x2, y2) {
+      var i = +node.getAttribute("data-i");
+      self.nodes.events.forEach(function (ev, j) {
+        ev.g.style.opacity = j === i ? "" : .35;
+        ev.dot.setAttribute("r", j === i ? (COARSE ? 9 : 8) : (COARSE ? 7 : 6));
+      });
+      var ev2 = self.nodes.events[i];
+      self._tipShow(ev2.it.label + ' <span class="ra-chart__tip-muted">— ' + fmtV(ev2.it.n) + "</span>", x2, y2 - 14);
+      self._emit("raChartSelect", { index: i, category: ev2.it.label, value: ev2.it.n, row: o.data[i] });
+    };
+    this._leaveHandler = function () {
+      self.nodes.events.forEach(function (ev) {
+        ev.g.style.opacity = "";
+        ev.dot.setAttribute("r", COARSE ? 7 : 6);
+      });
+    };
+
+    function finish() {
+      self.nodes.events.forEach(function (ev) { ev.g.style.transition = "opacity .18s"; });
+    }
+    if (entrance) {
+      var totalMs = 460 + items.length * 80 + 320;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        axis.setAttribute("x2", g.plotX + g.plotW * EASE.outCubic(clamp01(raw * totalMs / 460)));
+        self.nodes.events.forEach(function (ev, i) {
+          ev.g.setAttribute("opacity", EASE.outCubic(clamp01((raw * totalMs - 300 - i * 80) / 320)));
+        });
+      }, finish);
+    } else finish();
+  };
+
+  /* ============================================================
+     Gantt
+     ============================================================ */
+
+  RaChart.prototype._buildGantt = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var F = merge({ start: "start", end: "end", progress: "progress" }, o.fields || {});
+    var tasks = (o.data || []).map(function (d) {
+      var s = parseVal(d[F.start]), e = parseVal(d[F.end]);
+      return {
+        label: String(d[o.category]), s: s.n, e: e.n,
+        isDate: s.isDate || e.isDate,
+        prog: d[F.progress] != null ? +d[F.progress] : null
+      };
+    });
+
+    this.cur = { kind: "gantt" };
+    this.gGrid = svgEl("g", null, this.svg);
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { bars: [] };
+    this.legendEl.style.display = "none";
+    if (!tasks.length) return;
+
+    var isDate = tasks.some(function (t) { return t.isDate; });
+    var lo = Infinity, hi = -Infinity;
+    tasks.forEach(function (t) {
+      if (t.s < lo) lo = t.s;
+      if (t.e > hi) hi = t.e;
+    });
+    if (hi === lo) hi = lo + 1;
+    var padL = Math.min(this.w * 0.36,
+      Math.max.apply(null, tasks.map(function (t) { return textW(t.label); }).concat([12])) + 12);
+    var g = { plotX: padL, plotY: 8, plotW: Math.max(40, this.w - padL - 10), plotH: Math.max(40, this.h - 36) };
+    g.band = g.plotH / tasks.length;
+    function x(nv) { return g.plotX + (nv - lo) / (hi - lo) * g.plotW; }
+    function fmtV(nv) { return isDate ? fmtDateShort(nv) : fmt(nv); }
+
+    var ticks = this.w < 400 ? 2 : 4;
+    for (var k = 0; k <= ticks; k++) {
+      var tv = lo + (hi - lo) * k / ticks;
+      var tx = x(tv);
+      svgEl("line", { x1: tx, x2: tx, y1: g.plotY, y2: g.plotY + g.plotH, stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+      svgText(this.gGrid, tx, g.plotY + g.plotH + 16, fmtV(tv), "middle", 10.5, T.label);
+    }
+    tasks.forEach(function (t, i) {
+      svgText(self.gGrid, g.plotX - 7, g.plotY + g.band * (i + .5) + 4, t.label, "end", 11, T.body, 600);
+    });
+
+    tasks.forEach(function (t, i) {
+      var color = self._color(i);
+      var by = g.plotY + g.band * i + g.band * 0.22;
+      var bh = g.band * 0.56;
+      var rx2 = Math.min(5, bh / 2);
+      var gB = svgEl("g", { "class": "ra-hit", "data-i": i }, self.gMarks);
+      gB.style.transition = "opacity .18s, transform .18s";
+      var bar = svgEl("rect", {
+        x: x(t.s), y: by, height: bh, width: 0, rx: rx2,
+        fill: color, "fill-opacity": t.prog != null ? .35 : 1
+      }, gB);
+      var progBar = t.prog != null
+        ? svgEl("rect", { x: x(t.s), y: by, height: bh, width: 0, rx: rx2, fill: color }, gB)
+        : null;
+      self.nodes.bars.push({ g: gB, bar: bar, prog: progBar, t: t });
+    });
+
+    function drawBar(b, e) {
+      var w2 = Math.max(0, (x(b.t.e) - x(b.t.s)) * e);
+      b.bar.setAttribute("width", w2);
+      if (b.prog) b.prog.setAttribute("width", w2 * clamp01((b.t.prog || 0) / 100));
+    }
+
+    this._hitHandler = function (node, x2, y2) {
+      var i = +node.getAttribute("data-i");
+      self.nodes.bars.forEach(function (b, j) { b.g.style.opacity = j === i ? "" : .4; });
+      node.style.transform = "translate(0,-2px)";
+      var b2 = self.nodes.bars[i];
+      self._tipShow(b2.t.label + ": <b>" + fmtV(b2.t.s) + " &ndash; " + fmtV(b2.t.e) + "</b>" +
+        (b2.t.prog != null ? ' <span class="ra-chart__tip-muted">(' + b2.t.prog + "%)</span>" : ""), x2, y2 - 10);
+      self._emit("raChartSelect", {
+        index: i, category: b2.t.label, start: b2.t.s, end: b2.t.e,
+        progress: b2.t.prog, row: o.data[i]
+      });
+    };
+    this._leaveHandler = function () {
+      self.nodes.bars.forEach(function (b) { b.g.style.opacity = ""; b.g.style.transform = ""; });
+    };
+
+    if (entrance) {
+      var dur = o.animation.duration * 0.6, delay = 62;
+      var totalMs = dur + delay * tasks.length;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.bars.forEach(function (b, i) {
+          drawBar(b, EASE.outCubic(clamp01((raw * totalMs - i * delay) / dur)));
+        });
+      });
+    } else {
+      this.nodes.bars.forEach(function (b) { drawBar(b, 1); });
+    }
+  };
+
+  /* ============================================================
+     Scatter / Bubble
+     ============================================================ */
+
+  RaChart.prototype._buildScatter = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var isBubble = o.type === "bubble";
+    var xf = o.xField || "x", sf = o.sizeField || "size";
+    var D = o.data || [];
+    var nS = o.series.length;
+    this.cur = { kind: "scatter" };
+
+    var xLo = Infinity, xHi = -Infinity, yLo = Infinity, yHi = -Infinity, sMax = 0;
+    D.forEach(function (d) {
+      var xv = +d[xf] || 0;
+      if (xv < xLo) xLo = xv;
+      if (xv > xHi) xHi = xv;
+      o.series.forEach(function (s) {
+        var yv = +d[s.field] || 0;
+        if (yv < yLo) yLo = yv;
+        if (yv > yHi) yHi = yv;
+      });
+      var sv = +d[sf] || 0;
+      if (sv > sMax) sMax = sv;
+    });
+    if (!isFinite(xLo)) { xLo = 0; xHi = 1; }
+    if (xHi === xLo) xHi = xLo + 1;
+    if (!isFinite(yLo)) { yLo = 0; yHi = 1; }
+    if (yHi === yLo) yHi = yLo + 1;
+    xLo -= (xHi - xLo) * 0.06; xHi += (xHi - xLo) * 0.06;
+    yLo -= (yHi - yLo) * 0.1; yHi += (yHi - yLo) * 0.1;
+    var xStep = niceScale(xHi, xLo).step, yStep = niceScale(yHi, yLo).step;
+
+    var yLabels = [];
+    for (var v = Math.ceil(yLo / yStep) * yStep; v <= yHi + 1e-9; v += yStep) yLabels.push(fmt(v));
+    var padL = Math.max.apply(null, yLabels.map(function (s) { return textW(s); }).concat([12])) + 12;
+    var g = { plotX: padL, plotY: 8, plotW: Math.max(40, this.w - padL - 10), plotH: Math.max(40, this.h - 42) };
+    function fx(val) { return g.plotX + (val - xLo) / (xHi - xLo) * g.plotW; }
+    function fy(val) { return g.plotY + g.plotH - (val - yLo) / (yHi - yLo) * g.plotH; }
+
+    this.gGrid = svgEl("g", null, this.svg);
+    this.gMarks = svgEl("g", null, this.svg);
+
+    for (var v2 = Math.ceil(yLo / yStep) * yStep; v2 <= yHi + 1e-9; v2 += yStep) {
+      svgEl("line", { x1: g.plotX, x2: g.plotX + g.plotW, y1: fy(v2), y2: fy(v2), stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+      svgText(this.gGrid, g.plotX - 7, fy(v2) + 4, fmt(v2), "end", 11, T.label);
+    }
+    for (var v3 = Math.ceil(xLo / xStep) * xStep; v3 <= xHi + 1e-9; v3 += xStep) {
+      svgEl("line", { x1: fx(v3), x2: fx(v3), y1: g.plotY, y2: g.plotY + g.plotH, stroke: T.grid, "stroke-width": 1 }, this.gGrid);
+      svgText(this.gGrid, fx(v3), g.plotY + g.plotH + 16, fmt(v3), "middle", 11, T.label);
+    }
+
+    this.nodes = { groups: [], dots: [] };
+    o.series.forEach(function (s, si) {
+      var color = self._color(si);
+      var gS = svgEl("g", { opacity: self.hidden[si] ? 0 : 1 }, self.gMarks);
+      gS.style.transition = "opacity .18s";
+      var dl = [];
+      D.forEach(function (d, ci) {
+        var sv = +d[sf] || 0;
+        var r = isBubble ? 4 + 14 * Math.sqrt(sv / (sMax || 1)) : (COARSE ? 6 : 5);
+        var cxp = fx(+d[xf] || 0), cyp = fy(+d[s.field] || 0);
+        var dot = svgEl("circle", {
+          cx: cxp, cy: cyp, r: entrance ? 0 : r,
+          fill: color, "fill-opacity": isBubble ? .4 : .85,
+          stroke: isBubble ? color : T.surface, "stroke-width": isBubble ? 1.5 : 2
+        }, gS);
+        // finger-sized transparent hit ring over each point
+        svgEl("circle", {
+          cx: cxp, cy: cyp, r: Math.max(r, COARSE ? 16 : 9), fill: "transparent",
+          "class": "ra-hit", "data-s": si, "data-c": ci
+        }, gS);
+        dl.push({ node: dot, r: r, x: +d[xf] || 0, y: +d[s.field] || 0, s: sv });
+      });
+      self.nodes.groups.push(gS);
+      self.nodes.dots.push(dl);
+    });
+
+    this._hitHandler = function (node, x, y) {
+      var si = +node.getAttribute("data-s"), ci = +node.getAttribute("data-c");
+      var dt = self.nodes.dots[si][ci];
+      dt.node.setAttribute("r", dt.r * 1.3);
+      if (nS > 1) self._dimGroups(si);
+      self._tipShow(self._dot(self._color(si)) + o.series[si].name +
+        ' <span class="ra-chart__tip-muted">(' + fmt(dt.x) + ", " + fmt(dt.y) +
+        (isBubble ? ", " + fmt(dt.s) : "") + ")</span>", x, y - 12);
+      self._emit("raChartSelect", {
+        seriesIndex: si, index: ci, series: o.series[si].name,
+        x: dt.x, y: dt.y, size: dt.s, row: D[ci]
+      });
+    };
+    this._leaveHandler = function () {
+      self.nodes.dots.forEach(function (dl) {
+        dl.forEach(function (dt) { dt.node.setAttribute("r", dt.r); });
+      });
+      self._dimGroups(-1);
+    };
+
+    if (o.legend && nS > 1) {
+      this._buildLegend(
+        o.series.map(function (s, i) { return { name: s.name, color: self._color(i) }; }),
+        function () {
+          o.series.forEach(function (s, si) {
+            self.nodes.groups[si].setAttribute("opacity", self.hidden[si] ? 0 : 1);
+          });
+        },
+        function (i) { self._dimGroups(i); });
+    } else this.legendEl.style.display = "none";
+
+    if (entrance) {
+      var dur = 280, delay = 22;
+      var totalMs = dur + delay * D.length;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.dots.forEach(function (dl) {
+          dl.forEach(function (dt, ci) {
+            dt.node.setAttribute("r", dt.r * EASE.outCubic(clamp01((raw * totalMs - ci * delay) / dur)));
+          });
+        });
+      });
+    }
+  };
+
+  /* ============================================================
+     Funnel / Pyramid
+     ============================================================ */
+
+  RaChart.prototype._buildFunnel = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var isPyr = o.type === "pyramid";
+    var field = o.series.length ? o.series[0].field : "value";
+    var all = (o.data || []).map(function (d, i) {
+      return { label: String(d[o.category]), v: +d[field] || 0, di: i };
+    });
+    var items = all.filter(function (it) { return !self.hidden[it.di] && it.v > 0; });
+
+    this.cur = { kind: "funnel" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { slices: [] };
+    if (!items.length) { this.legendEl.style.display = "none"; return; }
+
+    var labelW = Math.min(this.w * 0.42,
+      Math.max.apply(null, items.map(function (it) { return textW(it.label); }).concat([30])) + 54);
+    var fw = Math.max(60, this.w - labelW - 22);
+    var cx = 11 + fw / 2;
+    var top = 6, H = this.h - 12;
+    var total = 0, vmax = 0;
+    items.forEach(function (it) { total += it.v; if (it.v > vmax) vmax = it.v; });
+
+    var widths = [], ys = [top];
+    if (isPyr) {
+      var cum = 0;
+      widths.push(0);
+      items.forEach(function (it) {
+        cum += it.v;
+        ys.push(top + H * cum / total);
+        widths.push(fw * cum / total);
+      });
+    } else {
+      var hS = H / items.length;
+      items.forEach(function (it, i) {
+        widths.push(fw * it.v / vmax);
+        ys.push(top + hS * (i + 1));
+      });
+      widths.push(fw * items[items.length - 1].v / vmax);
+    }
+
+    items.forEach(function (it, i) {
+      var gSl = svgEl("g", { "class": "ra-hit", "data-i": i }, self.gMarks);
+      gSl.style.transition = "opacity .18s, transform .18s";
+      var path = svgEl("path", { fill: self._color(it.di), stroke: T.surface, "stroke-width": 2 }, gSl);
+      var ty = (ys[i] + ys[i + 1]) / 2;
+      var pct = isPyr ? it.v / total * 100 : it.v / items[0].v * 100;
+      var t1 = svgText(gSl, 11 + fw + 12, ty, it.label, "start", 12, T.text, 700);
+      var t2 = svgText(gSl, 11 + fw + 12, ty + 14, fmt(it.v) + " (" + pct.toFixed(0) + "%)", "start", 10.5, T.muted, 600);
+      self.nodes.slices.push({
+        g: gSl, path: path, w0: widths[i], w1: widths[i + 1],
+        y0: ys[i], y1: ys[i + 1], it: it, t1: t1, t2: t2
+      });
+    });
+
+    function draw(s, e) {
+      var w0 = s.w0 * e, w1 = s.w1 * e;
+      s.path.setAttribute("d",
+        "M" + (cx - w0 / 2).toFixed(2) + " " + s.y0.toFixed(2) +
+        " L" + (cx + w0 / 2).toFixed(2) + " " + s.y0.toFixed(2) +
+        " L" + (cx + w1 / 2).toFixed(2) + " " + s.y1.toFixed(2) +
+        " L" + (cx - w1 / 2).toFixed(2) + " " + s.y1.toFixed(2) + " Z");
+      s.t1.setAttribute("opacity", e);
+      s.t2.setAttribute("opacity", e * .9);
+    }
+
+    this._hitHandler = function (node, x, y) {
+      var i = +node.getAttribute("data-i");
+      node.style.transform = "translate(6px,0)";
+      self.nodes.slices.forEach(function (s, j) { s.g.style.opacity = j === i ? "" : .45; });
+      var s2 = self.nodes.slices[i];
+      self._tipShow(self._dot(self._color(s2.it.di)) + s2.it.label + ": <b>" + fmt(s2.it.v) + "</b>", x, y - 10);
+      self._emit("raChartSelect", { index: s2.it.di, category: s2.it.label, value: s2.it.v });
+    };
+    this._leaveHandler = function () {
+      self.nodes.slices.forEach(function (s) { s.g.style.opacity = ""; s.g.style.transform = ""; });
+    };
+
+    if (o.legend && all.length > 1) {
+      this._buildLegend(
+        all.map(function (it) { return { name: it.label, color: self._color(it.di), value: it.v }; }),
+        function () { self.build(true); },
+        function (i) {
+          self.nodes.slices.forEach(function (s) { s.g.style.opacity = (i >= 0 && s.it.di !== i) ? .45 : ""; });
+        });
+    } else this.legendEl.style.display = "none";
+
+    if (entrance) {
+      var dur = o.animation.duration * 0.5, delay = 80;
+      var totalMs = dur + delay * items.length;
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.slices.forEach(function (s, i) {
+          draw(s, EASE.outCubic(clamp01((raw * totalMs - i * delay) / dur)));
+        });
+      });
+    } else {
+      this.nodes.slices.forEach(function (s) { draw(s, 1); });
+    }
+  };
+
+  /* ============================================================
+     Gauge
+     ============================================================ */
+
+  RaChart.prototype._buildGauge = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var field = o.series.length ? o.series[0].field : "value";
+    var val = (o.data && o.data.length) ? (+o.data[0][field] || 0) : 0;
+    var min = o.min || 0;
+    var max = o.max != null ? o.max : 100;
+    if (max <= min) max = min + 1;
+    var frac = clamp01((val - min) / (max - min));
+
+    this.cur = { kind: "gauge" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = {};
+    this.legendEl.style.display = "none";
+
+    var cx = this.w / 2;
+    var R = Math.max(40, Math.min(this.w / 2 - 34, this.h - 62));
+    var cy = (this.h + R) / 2 - 4;
+    var LW = Math.max(9, R * 0.14);
+    var A0 = Math.PI;
+
+    function pt(a, r) { return (cx + r * Math.cos(a)).toFixed(2) + " " + (cy + r * Math.sin(a)).toFixed(2); }
+    function arc(a0, a1, r) { return "M" + pt(a0, r) + " A" + r + " " + r + " 0 0 1 " + pt(a1, r); }
+
+    svgEl("path", {
+      d: arc(A0, Math.PI * 2, R), fill: "none",
+      stroke: T.dark ? "#2c2c2a" : "#eceff3", "stroke-width": LW, "stroke-linecap": "round"
+    }, this.gMarks);
+
+    (o.bands || []).forEach(function (b) {
+      var f0 = clamp01(((b.from != null ? b.from : min) - min) / (max - min));
+      var f1 = clamp01(((b.to != null ? b.to : max) - min) / (max - min));
+      if (f1 <= f0) return;
+      svgEl("path", {
+        d: arc(A0 + f0 * Math.PI, A0 + f1 * Math.PI, R + LW / 2 + 6),
+        fill: "none", stroke: b.color || T.grid, "stroke-width": 4
+      }, self.gMarks);
+    });
+
+    var vColor = this._color(0);
+    (o.bands || []).forEach(function (b) {
+      var bf = b.from != null ? b.from : min, bt = b.to != null ? b.to : max;
+      if (val >= bf && val <= bt && b.color) vColor = b.color;
+    });
+
+    var varc = svgEl("path", { fill: "none", stroke: vColor, "stroke-width": LW, "stroke-linecap": "round" }, this.gMarks);
+    var needle = svgEl("line", { stroke: T.text, "stroke-width": 3, "stroke-linecap": "round" }, this.gMarks);
+    svgEl("circle", { cx: cx, cy: cy, r: 6, fill: T.text }, this.gMarks);
+    svgText(this.gMarks, cx - R, cy + 18, fmt(min), "middle", 11, T.label);
+    svgText(this.gMarks, cx + R, cy + 18, fmt(max), "middle", 11, T.label);
+    var valText = svgText(this.gMarks, cx, cy - R * 0.3, "", "middle", 28, T.text, 800);
+    if (o.series.length && o.series[0].name) {
+      svgText(this.gMarks, cx, cy - R * 0.3 + 20, o.series[0].name, "middle", 11.5, T.muted, 600);
+    }
+
+    function draw(fr) {
+      var a = A0 + Math.max(0.001, fr * Math.PI);
+      varc.setAttribute("d", arc(A0, a, R));
+      var nr = R - LW / 2 - 10;
+      needle.setAttribute("x1", cx + 14 * Math.cos(a + Math.PI));
+      needle.setAttribute("y1", cy + 14 * Math.sin(a + Math.PI));
+      needle.setAttribute("x2", cx + nr * Math.cos(a));
+      needle.setAttribute("y2", cy + nr * Math.sin(a));
+      setText(valText, fmt(min + (max - min) * fr));
+    }
+    if (entrance) this._tween(o.animation.duration + 180, EASE.outCubic, function (e) { draw(frac * e); });
+    else draw(frac);
+  };
+
+  /* ============================================================
+     Heatmap
+     ============================================================ */
+
+  RaChart.prototype._buildHeat = function (entrance) {
+    var self = this, o = this.opts, T = this.theme;
+    var rows = o.data || [];
+    var cols = o.series || [];
+    var catL = rows.map(function (d) { return String(d[o.category]); });
+
+    this.cur = { kind: "heat" };
+    this.gMarks = svgEl("g", null, this.svg);
+    this.nodes = { cells: [] };
+    this.legendEl.style.display = "none";
+    if (!rows.length || !cols.length) return;
+
+    var vmin = Infinity, vmax = -Infinity;
+    rows.forEach(function (d) {
+      cols.forEach(function (s) {
+        var v = +d[s.field] || 0;
+        if (v < vmin) vmin = v;
+        if (v > vmax) vmax = v;
+      });
+    });
+    if (!isFinite(vmin)) { vmin = 0; vmax = 1; }
+    if (vmax === vmin) vmax = vmin + 1;
+
+    var padL = Math.min(this.w * 0.28,
+      Math.max.apply(null, catL.map(function (s) { return textW(s); }).concat([12])) + 10);
+    var g = { plotX: padL, plotY: 4, plotW: Math.max(40, this.w - padL - 4), plotH: Math.max(40, this.h - 28) };
+    var cw = g.plotW / cols.length, ch = g.plotH / rows.length;
+
+    rows.forEach(function (d, ri) {
+      svgText(self.gMarks, g.plotX - 6, g.plotY + ch * (ri + .5) + 4, catL[ri], "end", 11, T.label);
+    });
+    cols.forEach(function (s, ci) {
+      svgText(self.gMarks, g.plotX + cw * (ci + .5), g.plotY + g.plotH + 16, s.name, "middle", 10.5, T.label);
+    });
+
+    rows.forEach(function (d, ri) {
+      cols.forEach(function (s, ci) {
+        var v = +d[s.field] || 0;
+        var t = (v - vmin) / (vmax - vmin);
+        var rect = svgEl("rect", {
+          x: g.plotX + cw * ci + 1, y: g.plotY + ch * ri + 1,
+          width: Math.max(0, cw - 2), height: Math.max(0, ch - 2),
+          rx: 3, fill: rampColor(self.seq, t), "class": "ra-hit",
+          "data-r": ri, "data-c": ci, opacity: entrance ? 0 : 1
+        }, self.gMarks);
+        var txt = null;
+        if (cw > 38 && ch > 20) {
+          var lightOnDark = self.dark ? t < .45 : t > .55;
+          txt = svgText(self.gMarks, g.plotX + cw * (ci + .5), g.plotY + ch * (ri + .5) + 4,
+            fmt(v), "middle", 10.5, lightOnDark ? "#ffffff" : "#1f2937", 600);
+          if (entrance) txt.setAttribute("opacity", 0);
+          txt.style.pointerEvents = "none";
+        }
+        self.nodes.cells.push({ rect: rect, txt: txt, v: v, ri: ri, ci: ci });
+      });
+    });
+
+    this._hitHandler = function (node, x, y) {
+      var ri = +node.getAttribute("data-r"), ci = +node.getAttribute("data-c");
+      self.nodes.cells.forEach(function (c) { c.rect.removeAttribute("stroke"); });
+      node.setAttribute("stroke", T.text);
+      node.setAttribute("stroke-width", 1.5);
+      var cell = self.nodes.cells[ri * cols.length + ci];
+      self._tipShow(catL[ri] + " &times; " + cols[ci].name + ": <b>" + fmt(cell.v) + "</b>", x, y - 10);
+      self._emit("raChartSelect", {
+        row: ri, col: ci, category: catL[ri], series: cols[ci].name, value: cell.v
+      });
+    };
+    this._leaveHandler = function () {
+      self.nodes.cells.forEach(function (c) { c.rect.removeAttribute("stroke"); });
+    };
+
+    if (entrance) {
+      var delay = 22, dur = 240;
+      var totalMs = dur + delay * (rows.length + cols.length);
+      this._tween(totalMs, EASE.linear, function (e, raw) {
+        self.nodes.cells.forEach(function (c) {
+          var p = EASE.outCubic(clamp01((raw * totalMs - (c.ri + c.ci) * delay) / dur));
+          c.rect.setAttribute("opacity", p);
+          if (c.txt) c.txt.setAttribute("opacity", p);
+        });
+      });
+    }
+  };
+
+  /* ============================================================
+     Public API
+     ============================================================ */
+
+  RaChart.prototype.setData = function (data) {
+    this.opts.data = data || [];
+    this._lastW = null;
+    if (this.zoomable) { this.build(true); return this; }
+
+    if (this.kind === "xy" && this.cur && this.cur.kind === "xy" && data.length === this.geom.nC) {
+      this.viewData = data;
+      this.geom.cats = data.map(function (d) { return String(d[this.opts.category]); }, this);
+      this._xyDrawGrid(this._xyScale());
+      this._xyTransition();
+    } else if (this.kind === "pie" && this.cur && this.cur.kind === "pie" && data.length === this.geom.vals.length) {
+      var field = this.geom.field;
+      this.geom.vals = data.map(function (d) { return +d[field] || 0; });
+      this._pieTransition();
+    } else if (this.kind === "radar" && this.cur && this.cur.kind === "radar" && data.length === this.geom.nC) {
+      this._radarTransition();
+    } else {
+      this.build(true);
+    }
+    return this;
+  };
+
+  RaChart.prototype.setType = function (type) {
+    this.opts.type = type;
+    this.hidden = {};
+    this.zoomF = [0, 1];
+    this._lastW = null;
+    this.build(true);
+    return this;
+  };
+
+  RaChart.prototype.update = function (partial) {
+    var o = this.opts;
+    partial = partial || {};
+    if (partial.colors !== undefined) o.colors = partial.colors;
+    if (partial.series) o.series = partial.series;
+    if (partial.data) o.data = partial.data;
+    for (var k in partial) {
+      if (!Object.prototype.hasOwnProperty.call(partial, k)) continue;
+      if (k === "colors" || k === "series" || k === "data") continue;
+      if (k === "animation") merge(o.animation, partial[k]);
+      else o[k] = partial[k];
+    }
+    this.hidden = {};
+    this._lastW = null;
+    this.build(true);
+    return this;
+  };
+
+  RaChart.prototype.replay = function () {
+    this.build(true);
+    return this;
+  };
+
+  RaChart.prototype.resize = function () {
+    this._rebuildBody();
+    return this;
+  };
+
+  /** Zoom to a fraction window (0..1) or, with integers, a data index range. */
+  RaChart.prototype.zoomTo = function (from, to) {
+    if (!this.zoomable) return this;
+    var n = (this.opts.data || []).length || 1;
+    if (from > 1 || to > 1) { from = from / n; to = to / n; }   // index form
+    this.zoomF = [clamp01(Math.min(from, to)), clamp01(Math.max(from, to))];
+    if (this.zoomF[1] - this.zoomF[0] < 0.05) this.zoomF[1] = Math.min(1, this.zoomF[0] + 0.05);
+    this._syncZoomBar();
+    this._zoomApply(true);
+    return this;
+  };
+
+  RaChart.prototype.resetZoom = function () {
+    if (!this.zoomable) return this;
+    this.zoomF = [0, 1];
+    this._syncZoomBar();
+    this._zoomApply(true);
+    return this;
+  };
+
+  RaChart.prototype.getZoom = function () {
+    var n = (this.opts.data || []).length;
+    var w = this._zoomWindow(n);
+    return { from: this.zoomF[0], to: this.zoomF[1], startIndex: w[0], endIndex: w[1] };
+  };
+
+  RaChart.prototype.toggleSeries = function (index, hidden) {
+    this.hidden[index] = hidden === undefined ? !this.hidden[index] : !!hidden;
+    this.build(false);
+    return this;
+  };
+
+  /** Serialise the current chart to an SVG string (for share/export). */
+  RaChart.prototype.toSVG = function () {
+    if (!this.svg) return "";
+    var clone = this.svg.cloneNode(true);
+    clone.setAttribute("xmlns", NS);
+    clone.setAttribute("width", this.w);
+    clone.setAttribute("height", this.h);
+    var bg = document.createElementNS(NS, "rect");
+    bg.setAttribute("width", this.w);
+    bg.setAttribute("height", this.h);
+    bg.setAttribute("fill", this.theme.surface);
+    clone.insertBefore(bg, clone.firstChild);
+    return new XMLSerializer().serializeToString(clone);
+  };
+
+  /* ---------- statics ---------- */
+
+  RaChart.version = VERSION;
+  RaChart.defaults = DEFAULTS;
+  RaChart.palette = PALETTE_LIGHT;
+  RaChart.paletteDark = PALETTE_DARK;
+  RaChart.types = Object.keys(KINDS);
+  RaChart.create = function (host, options) { return new RaChart(host, options); };
+
+  /** Optional jQuery bridge — only if jQuery happens to be present. */
+  if (typeof window !== "undefined" && window.jQuery) {
+    (function ($) {
+      $.fn.raChart = function (options) {
+        if (typeof options === "string") {
+          var args = Array.prototype.slice.call(arguments, 1);
+          var out = this;
+          this.each(function () {
+            var inst = $(this).data("raChart");
+            if (!inst) return;
+            if (options === "instance") { out = inst; return; }
+            if (typeof inst[options] === "function") inst[options].apply(inst, args);
+          });
+          return out;
+        }
+        return this.each(function () {
+          var prev = $(this).data("raChart");
+          if (prev) prev.destroy();
+          $(this).data("raChart", new RaChart(this, options));
+        });
+      };
+    })(window.jQuery);
+  }
+
+  return RaChart;
+}));