aliencharts 0.2.0 → 0.3.0

package/dist/react.js

@@ -172,6 +172,524 @@ var removeDrawingById = (drawings, drawingId) => (Array.isArray(drawings) ? draw
   (drawing) => drawing?.id !== drawingId
 );
 
+// src/core/chartModel.js
+var LINE_CAPABILITIES = Object.freeze({
+  appendAnimation: true,
+  drawings: true,
+  latestValue: true,
+  markers: true,
+  movingAverage: true
+});
+var BAR_CAPABILITIES = Object.freeze({
+  appendAnimation: false,
+  drawings: false,
+  latestValue: false,
+  markers: false,
+  movingAverage: false
+});
+var CHART_DEFINITIONS = Object.freeze({
+  line: Object.freeze({
+    capabilities: LINE_CAPABILITIES,
+    defaultOrientation: "vertical",
+    orientationFromSeries: false,
+    orientations: Object.freeze(["vertical"]),
+    rangeIncludesZero: false
+  }),
+  bar: Object.freeze({
+    capabilities: BAR_CAPABILITIES,
+    defaultOrientation: "vertical",
+    orientationFromSeries: true,
+    orientations: Object.freeze(["vertical", "horizontal"]),
+    rangeIncludesZero: true
+  })
+});
+var getChartCategories = (chart) => {
+  if (chart?.categories == null) return [];
+  if (!Array.isArray(chart.categories)) {
+    throw new TypeError(`Chart "${chart.id}" categories must be an array`);
+  }
+  const values = /* @__PURE__ */ new Set();
+  return chart.categories.map((category, index) => {
+    const normalized = typeof category === "string" ? { value: index, label: category } : { value: Number(category?.value), label: category?.label };
+    if (!Number.isFinite(normalized.value) || typeof normalized.label !== "string") {
+      throw new TypeError(
+        `Chart "${chart.id}" category ${index} must be a string or a { value, label } object`
+      );
+    }
+    if (values.has(normalized.value)) {
+      throw new TypeError(
+        `Chart "${chart.id}" has duplicate category value ${normalized.value}`
+      );
+    }
+    values.add(normalized.value);
+    return normalized;
+  });
+};
+var getCategoryLabel = (chart, value) => getChartCategories(chart).find((category) => category.value === value)?.label;
+var getSeriesType = (series) => {
+  if (series?.type == null) return "line";
+  if (Object.prototype.hasOwnProperty.call(CHART_DEFINITIONS, series.type)) {
+    return series.type;
+  }
+  throw new TypeError(`Unknown AlienCharts series type: "${series.type}"`);
+};
+var resolveChartDescriptor = (chart) => {
+  const series = Array.isArray(chart?.series) ? chart.series : [];
+  const categories = getChartCategories(chart);
+  const type = series.length ? getSeriesType(series[0]) : "line";
+  const definition = CHART_DEFINITIONS[type];
+  const orientation = definition.orientationFromSeries ? series[0]?.orientation || definition.defaultOrientation : definition.defaultOrientation;
+  series.forEach((item) => {
+    const itemType = getSeriesType(item);
+    if (itemType !== type) {
+      const mixedTypes = /* @__PURE__ */ new Set([type, itemType]);
+      const typeLabel = mixedTypes.has("line") && mixedTypes.has("bar") ? "line and bar" : `${type} and ${itemType}`;
+      throw new TypeError(
+        `Chart "${chart.id}" cannot mix ${typeLabel} series`
+      );
+    }
+    const itemOrientation = definition.orientationFromSeries ? item.orientation || definition.defaultOrientation : definition.defaultOrientation;
+    if (!definition.orientations.includes(itemOrientation)) {
+      throw new TypeError(
+        `Chart "${chart.id}" has an invalid ${itemType} orientation`
+      );
+    }
+    if (itemOrientation !== orientation) {
+      throw new TypeError(
+        `Chart "${chart.id}" cannot mix ${itemType} orientations`
+      );
+    }
+  });
+  return Object.freeze({
+    capabilities: definition.capabilities,
+    categorical: categories.length > 0,
+    orientation,
+    rangeIncludesZero: definition.rangeIncludesZero,
+    rendererType: type,
+    type
+  });
+};
+var resolveChartDescriptors = (charts) => {
+  const descriptors = /* @__PURE__ */ new Map();
+  charts.forEach((chart) => {
+    descriptors.set(chart.id, resolveChartDescriptor(chart));
+  });
+  return descriptors;
+};
+var getChartDescriptor = (chart, descriptors) => descriptors?.get(chart?.id) || resolveChartDescriptor(chart);
+var getOrderedSeries = (chart, seriesOrderByChart) => {
+  const series = Array.isArray(chart?.series) ? chart.series : [];
+  const order = seriesOrderByChart?.[chart?.id];
+  if (!Array.isArray(order) || order.length !== series.length) {
+    return series;
+  }
+  const used = /* @__PURE__ */ new Set();
+  const ordered = [];
+  order.forEach((seriesIndex) => {
+    if (!Number.isInteger(seriesIndex)) return;
+    if (seriesIndex < 0 || seriesIndex >= series.length) return;
+    if (used.has(seriesIndex)) return;
+    used.add(seriesIndex);
+    ordered.push(series[seriesIndex]);
+  });
+  return ordered.length === series.length ? ordered : series;
+};
+var CHART_TYPES = Object.freeze(Object.keys(CHART_DEFINITIONS));
+
+// src/core/coordinateTransform.js
+var safeSpan = (min, max) => Math.max(1e-12, max - min);
+var createCoordinateTransform = ({
+  orientation = "vertical",
+  categoryRange,
+  valueRange,
+  plot
+}) => {
+  const horizontal = orientation === "horizontal";
+  const categorySpan = safeSpan(categoryRange.min, categoryRange.max);
+  const valueSpan = safeSpan(valueRange.min, valueRange.max);
+  const categoryPixelLength = horizontal ? plot.height : plot.width;
+  const valuePixelLength = horizontal ? plot.width : plot.height;
+  const categoryRatio = (point) => horizontal ? (point.y - plot.y) / plot.height : (point.x - plot.x) / plot.width;
+  const valueRatio = (point) => horizontal ? (point.x - plot.x) / plot.width : 1 - (point.y - plot.y) / plot.height;
+  const dataToScreen = (point) => {
+    const category = point.category ?? point.x;
+    const value = point.value ?? point.y;
+    const categoryPosition = (category - categoryRange.min) / categorySpan;
+    const valuePosition = (value - valueRange.min) / valueSpan;
+    return horizontal ? {
+      x: plot.x + valuePosition * plot.width,
+      y: plot.y + categoryPosition * plot.height
+    } : {
+      x: plot.x + categoryPosition * plot.width,
+      y: plot.y + (1 - valuePosition) * plot.height
+    };
+  };
+  const screenToData = (point) => ({
+    x: categoryRange.min + categoryRatio(point) * categorySpan,
+    y: valueRange.min + valueRatio(point) * valueSpan
+  });
+  const categoryDragDelta = (start, current) => (horizontal ? current.y - start.y : current.x - start.x) / categoryPixelLength * categorySpan;
+  const valueOffsetDelta = (start, current) => horizontal ? -((current.x - start.x) / valuePixelLength) * valueSpan : (current.y - start.y) / valuePixelLength * valueSpan;
+  const categoryScaleDelta = (start, current) => horizontal ? current.y - start.y : current.x - start.x;
+  const valueScaleDelta = (start, current) => horizontal ? current.x - start.x : current.y - start.y;
+  const dataBoundsForRect = (rect) => {
+    const first = screenToData({ x: rect.left, y: rect.top });
+    const second = screenToData({
+      x: rect.left + rect.width,
+      y: rect.top + rect.height
+    });
+    return {
+      categoryMin: Math.min(first.x, second.x),
+      categoryMax: Math.max(first.x, second.x),
+      valueMin: Math.min(first.y, second.y),
+      valueMax: Math.max(first.y, second.y)
+    };
+  };
+  return Object.freeze({
+    categoryDragDelta,
+    categoryPixelLength,
+    categoryRatio,
+    categoryScaleDelta,
+    dataBoundsForRect,
+    dataToScreen,
+    horizontal,
+    orientation,
+    screenToData,
+    valueOffsetDelta,
+    valuePixelLength,
+    valueRatio,
+    valueScaleDelta
+  });
+};
+
+// src/core/renderers/webglUtils.js
+var INITIAL_GPU_VERTEX_CAPACITY = 4096;
+var createProgram = (gl, vertexSource, fragmentSource) => {
+  const compile = (type, source) => {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
+    }
+    return shader;
+  };
+  const program = gl.createProgram();
+  const vertexShader = compile(gl.VERTEX_SHADER, vertexSource);
+  const fragmentShader = compile(gl.FRAGMENT_SHADER, fragmentSource);
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
+  }
+  return program;
+};
+var hexToRgb = (color) => {
+  const value = String(color || "#38bdf8").replace("#", "");
+  const normalized = value.length === 3 ? value.split("").map((char) => char + char).join("") : value.padEnd(6, "0").slice(0, 6);
+  const number = Number.parseInt(normalized, 16);
+  return [
+    (number >> 16 & 255) / 255,
+    (number >> 8 & 255) / 255,
+    (number & 255) / 255
+  ];
+};
+var getNextVertexCapacity = (currentCapacity, requiredCapacity) => {
+  let nextCapacity = Math.max(
+    INITIAL_GPU_VERTEX_CAPACITY,
+    currentCapacity || 0
+  );
+  while (nextCapacity < requiredCapacity) nextCapacity *= 2;
+  return nextCapacity;
+};
+var getDynamicBuffer = (gl, cache, key, requiredFloats) => {
+  let entry = cache.get(key);
+  if (!entry) {
+    entry = {
+      buffer: gl.createBuffer(),
+      gpuCapacity: 0,
+      vertices: new Float32Array(
+        getNextVertexCapacity(0, requiredFloats)
+      )
+    };
+    cache.set(key, entry);
+  }
+  if (entry.vertices.length < requiredFloats) {
+    entry.vertices = new Float32Array(
+      getNextVertexCapacity(entry.vertices.length, requiredFloats)
+    );
+  }
+  if (entry.gpuCapacity < entry.vertices.length) {
+    entry.gpuCapacity = entry.vertices.length;
+    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
+      gl.DYNAMIC_DRAW
+    );
+  }
+  return entry;
+};
+var deleteBufferCache = (gl, cache) => {
+  cache.forEach((entry) => {
+    if (entry.buffer) gl.deleteBuffer(entry.buffer);
+  });
+  cache.clear();
+};
+
+// src/core/renderers/barRenderer.js
+var BAR_GROUP_WIDTH_RATIO = 0.8;
+var BAR_SLICE_WIDTH_RATIO = 0.9;
+var BAR_VERTEX_FLOAT_STRIDE = 3;
+var VERTEX_SOURCE = `#version 300 es
+  in vec2 a_unit;
+  in vec3 a_bar;
+  uniform vec2 u_resolution;
+  uniform vec4 u_rect;
+  uniform vec2 u_categoryRange;
+  uniform vec2 u_valueRange;
+  uniform float u_baseline;
+  uniform float u_seriesIndex;
+  uniform float u_seriesCount;
+  uniform int u_orientation;
+
+  void main() {
+    float groupWidth = a_bar.z * ${BAR_GROUP_WIDTH_RATIO.toFixed(1)};
+    float sliceWidth = groupWidth / max(1.0, u_seriesCount);
+    float center = a_bar.x - groupWidth * 0.5
+      + sliceWidth * (u_seriesIndex + 0.5);
+    float halfWidth = sliceWidth * ${(BAR_SLICE_WIDTH_RATIO / 2).toFixed(2)};
+    float category = mix(center - halfWidth, center + halfWidth, a_unit.x);
+    float value = mix(u_baseline, a_bar.y, a_unit.y);
+    float categoryDenom = max(
+      0.000000000001,
+      abs(u_categoryRange.y - u_categoryRange.x)
+    );
+    float valueDenom = max(
+      0.000000000001,
+      abs(u_valueRange.y - u_valueRange.x)
+    );
+    float categoryRatio = (category - u_categoryRange.x) / categoryDenom;
+    float valueRatio = (value - u_valueRange.x) / valueDenom;
+    vec2 px = u_orientation == 0
+      ? vec2(
+          u_rect.x + categoryRatio * u_rect.z,
+          u_rect.y + (1.0 - valueRatio) * u_rect.w
+        )
+      : vec2(
+          u_rect.x + valueRatio * u_rect.z,
+          u_rect.y + categoryRatio * u_rect.w
+        );
+    vec2 clip = (px / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+var FRAGMENT_SOURCE = `#version 300 es
+  precision highp float;
+  uniform vec3 u_color;
+  out vec4 outColor;
+
+  void main() {
+    outColor = vec4(u_color, 1.0);
+  }
+`;
+var getBarCategoryInterval = ({
+  visiblePoints,
+  index,
+  categoryMin,
+  categoryMax
+}) => {
+  const count = visiblePoints.pointCount;
+  const category = visiblePoints.x[index];
+  const fallbackInterval = (categoryMax - categoryMin) / Math.max(10, count || 1);
+  const previousGap = index > 0 ? category - visiblePoints.x[index - 1] : Infinity;
+  const nextGap = index + 1 < count ? visiblePoints.x[index + 1] - category : Infinity;
+  let interval = Math.min(
+    previousGap > 0 ? previousGap : Infinity,
+    nextGap > 0 ? nextGap : Infinity
+  );
+  if (!Number.isFinite(interval)) {
+    interval = Number.isFinite(previousGap) && previousGap > 0 ? previousGap : Number.isFinite(nextGap) && nextGap > 0 ? nextGap : fallbackInterval;
+  }
+  return Math.max(Number.EPSILON, interval || fallbackInterval || 1);
+};
+var getGroupedBarCategory = ({
+  visiblePoints,
+  pointIndex,
+  seriesIndex,
+  seriesCount,
+  categoryMin,
+  categoryMax
+}) => {
+  const category = visiblePoints.x[pointIndex];
+  const interval = getBarCategoryInterval({
+    visiblePoints,
+    index: pointIndex,
+    categoryMin,
+    categoryMax
+  });
+  const groupWidth = interval * BAR_GROUP_WIDTH_RATIO;
+  const sliceWidth = groupWidth / Math.max(1, seriesCount);
+  return category - groupWidth / 2 + sliceWidth * (seriesIndex + 0.5);
+};
+var fillBarInstances = ({
+  vertices,
+  visiblePoints,
+  categoryMin,
+  categoryMax
+}) => {
+  for (let index = 0; index < visiblePoints.pointCount; index += 1) {
+    const offset = index * BAR_VERTEX_FLOAT_STRIDE;
+    vertices[offset] = visiblePoints.x[index];
+    vertices[offset + 1] = visiblePoints.y[index];
+    vertices[offset + 2] = getBarCategoryInterval({
+      visiblePoints,
+      index,
+      categoryMin,
+      categoryMax
+    });
+  }
+  return visiblePoints.pointCount;
+};
+var createBarRenderer = (gl) => {
+  const program = createProgram(gl, VERTEX_SOURCE, FRAGMENT_SOURCE);
+  const quadBuffer = gl.createBuffer();
+  const buffers = /* @__PURE__ */ new Map();
+  gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([
+      0,
+      0,
+      1,
+      0,
+      0,
+      1,
+      0,
+      1,
+      1,
+      0,
+      1,
+      1
+    ]),
+    gl.STATIC_DRAW
+  );
+  const locations = Object.freeze({
+    aBar: gl.getAttribLocation(program, "a_bar"),
+    aUnit: gl.getAttribLocation(program, "a_unit"),
+    uBaseline: gl.getUniformLocation(program, "u_baseline"),
+    uCategoryRange: gl.getUniformLocation(program, "u_categoryRange"),
+    uColor: gl.getUniformLocation(program, "u_color"),
+    uOrientation: gl.getUniformLocation(program, "u_orientation"),
+    uRect: gl.getUniformLocation(program, "u_rect"),
+    uResolution: gl.getUniformLocation(program, "u_resolution"),
+    uSeriesCount: gl.getUniformLocation(program, "u_seriesCount"),
+    uSeriesIndex: gl.getUniformLocation(program, "u_seriesIndex"),
+    uValueRange: gl.getUniformLocation(program, "u_valueRange")
+  });
+  return {
+    draw({
+      categoryPixelLength,
+      chart,
+      descriptor,
+      pixelHeight,
+      pixelWidth,
+      scaledPlot,
+      seriesOrderByChart,
+      state,
+      yRange
+    }) {
+      gl.disable(gl.BLEND);
+      gl.useProgram(program);
+      gl.enableVertexAttribArray(locations.aUnit);
+      gl.enableVertexAttribArray(locations.aBar);
+      gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+      gl.vertexAttribPointer(locations.aUnit, 2, gl.FLOAT, false, 0, 0);
+      gl.vertexAttribDivisor(locations.aUnit, 0);
+      gl.uniform2f(locations.uResolution, pixelWidth, pixelHeight);
+      gl.uniform4f(
+        locations.uRect,
+        scaledPlot.x,
+        scaledPlot.y,
+        scaledPlot.width,
+        scaledPlot.height
+      );
+      gl.uniform2f(
+        locations.uCategoryRange,
+        state.xMin,
+        state.xMax
+      );
+      gl.uniform2f(
+        locations.uValueRange,
+        yRange.minY,
+        yRange.maxY
+      );
+      gl.uniform1f(locations.uBaseline, 0);
+      gl.uniform1i(
+        locations.uOrientation,
+        descriptor.orientation === "horizontal" ? 1 : 0
+      );
+      const orderedSeries = getOrderedSeries(chart, seriesOrderByChart);
+      gl.uniform1f(locations.uSeriesCount, Math.max(1, orderedSeries.length));
+      orderedSeries.forEach((series, seriesIndex) => {
+        const visiblePoints = series.getVisiblePoints(
+          state.xMin,
+          state.xMax,
+          categoryPixelLength
+        );
+        if (!visiblePoints.pointCount) return;
+        const requiredFloats = visiblePoints.pointCount * BAR_VERTEX_FLOAT_STRIDE;
+        const bufferEntry = getDynamicBuffer(
+          gl,
+          buffers,
+          series.id,
+          requiredFloats
+        );
+        const instanceCount = fillBarInstances({
+          vertices: bufferEntry.vertices,
+          visiblePoints,
+          categoryMin: state.xMin,
+          categoryMax: state.xMax
+        });
+        const [r, g, b] = hexToRgb(series.color);
+        gl.uniform3f(locations.uColor, r, g, b);
+        gl.uniform1f(locations.uSeriesIndex, seriesIndex);
+        gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
+        gl.vertexAttribPointer(
+          locations.aBar,
+          BAR_VERTEX_FLOAT_STRIDE,
+          gl.FLOAT,
+          false,
+          0,
+          0
+        );
+        gl.vertexAttribDivisor(locations.aBar, 1);
+        gl.bufferSubData(
+          gl.ARRAY_BUFFER,
+          0,
+          bufferEntry.vertices,
+          0,
+          instanceCount * BAR_VERTEX_FLOAT_STRIDE
+        );
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, instanceCount);
+      });
+      gl.vertexAttribDivisor(locations.aBar, 0);
+      return { seriesEndpoints: /* @__PURE__ */ new Map() };
+    },
+    getTooltipCategory(payload) {
+      return getGroupedBarCategory(payload);
+    },
+    destroy() {
+      deleteBufferCache(gl, buffers);
+      gl.deleteBuffer(quadBuffer);
+      gl.deleteProgram(program);
+    }
+  };
+};
+
 // src/core/lodSeries.js
 var DEFAULT_MAX_LEVELS = 18;
 var toTypedArray = (value, Type) => {
@@ -250,7 +768,7 @@ var concatTyped = (Type, left, right) => {
   out.set(right, left.length);
   return out;
 };
-var LineSeries = class {
+var LodSeries = class {
   constructor({ id, name, color, x, y, maxLevels = DEFAULT_MAX_LEVELS }) {
     this.id = id;
     this.name = name || id;
@@ -365,273 +883,182 @@ var LineSeries = class {
     };
   }
 };
-var createSeries = (options) => new LineSeries(options);
-
-// src/core/chartRenderer.js
-var CHART_HEIGHT = 360;
-var RIGHT_AXIS_WIDTH = 58;
-var PLOT_PADDING = {
-  left: 38,
-  right: RIGHT_AXIS_WIDTH,
-  top: 34,
-  bottom: 28
+var LineSeries = class extends LodSeries {
+  constructor(options) {
+    super(options);
+    this.type = "line";
+  }
 };
-var Y_SCALE_MIN = 0.05;
-var Y_SCALE_MAX = 40;
-var Y_AXIS_TICK_COUNT = 5;
-var X_AXIS_TICK_COUNT = 5;
-var X_SCALE_MIN_SPAN = 10;
-var X_SCALE_MAX_SPAN = 1e9;
-var JUMP_LATEST_RIGHT_PADDING_RATIO = 0.1;
-var INITIAL_GPU_VERTEX_CAPACITY = 4096;
+var BarSeries = class extends LodSeries {
+  constructor({ orientation = "vertical", ...options }) {
+    super(options);
+    if (orientation !== "vertical" && orientation !== "horizontal") {
+      throw new TypeError(
+        'BarSeries orientation must be "vertical" or "horizontal"'
+      );
+    }
+    this.type = "bar";
+    this.orientation = orientation;
+  }
+};
+var createLineSeries = (options) => new LineSeries(options);
+var createSeries = createLineSeries;
+var createBarSeries = (options) => new BarSeries(options);
+
+// src/core/renderers/lineRenderer.js
 var AA_VERTEX_FLOAT_STRIDE = 6;
 var AA_LINE_WIDTH_PX = 1.5;
 var AA_EDGE_WIDTH_PX = 1;
 var DASH_LENGTH_PX = 7;
 var DASH_GAP_PX = 5;
-var DEFAULT_CHART_BACKGROUND = "#f5f9ff";
-var EMPTY_OBJECT = {};
-var hexToRgb = (color) => {
-  const value = String(color || "#38bdf8").replace("#", "");
-  const normalized = value.length === 3 ? value.split("").map((char) => char + char).join("") : value.padEnd(6, "0").slice(0, 6);
-  const number = Number.parseInt(normalized, 16);
-  return [
-    (number >> 16 & 255) / 255,
-    (number >> 8 & 255) / 255,
-    (number & 255) / 255
-  ];
-};
-var getReadableTextColor = (backgroundColor) => {
-  const [r, g, b] = hexToRgb(backgroundColor);
-  const toLinear = (value) => value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
-  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-  return luminance > 0.45 ? "#111827" : "#ffffff";
-};
-var getSeriesLabelTextColor = (series) => {
-  if (series.__labelTextColorFor !== series.color) {
-    series.__labelTextColorFor = series.color;
-    series.__labelTextColor = getReadableTextColor(series.color);
-  }
-  return series.__labelTextColor;
-};
-var createProgram = (gl) => {
-  const vertexSource = `#version 300 es
-    in vec2 a_xy;
-    uniform vec2 u_resolution;
-    uniform vec4 u_rect;
-    uniform vec2 u_xRange;
-    uniform vec2 u_yRange;
+var LINE_VERTEX_SOURCE = `#version 300 es
+  in vec2 a_xy;
+  uniform vec2 u_resolution;
+  uniform vec4 u_rect;
+  uniform vec2 u_xRange;
+  uniform vec2 u_yRange;
 
-    void main() {
-      float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
-      float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
-      float nx = (a_xy.x - u_xRange.x) / xDenom;
-      float ny = (a_xy.y - u_yRange.x) / yDenom;
-      float px = u_rect.x + nx * u_rect.z;
-      float py = u_rect.y + (1.0 - ny) * u_rect.w;
-      vec2 zeroToOne = vec2(px, py) / u_resolution;
-      vec2 clip = zeroToOne * 2.0 - 1.0;
-      gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
-    }
-  `;
-  const fragmentSource = `#version 300 es
-    precision highp float;
-    uniform vec3 u_color;
-    out vec4 outColor;
+  void main() {
+    float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
+    float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
+    float nx = (a_xy.x - u_xRange.x) / xDenom;
+    float ny = (a_xy.y - u_yRange.x) / yDenom;
+    float px = u_rect.x + nx * u_rect.z;
+    float py = u_rect.y + (1.0 - ny) * u_rect.w;
+    vec2 clip = (vec2(px, py) / u_resolution) * 2.0 - 1.0;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+var LINE_FRAGMENT_SOURCE = `#version 300 es
+  precision highp float;
+  uniform vec3 u_color;
+  out vec4 outColor;
 
-    void main() {
-      outColor = vec4(u_color, 1.0);
-    }
-  `;
-  const compile = (type, source) => {
-    const shader = gl.createShader(type);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
-    }
-    return shader;
-  };
-  const program = gl.createProgram();
-  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
-  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
-  }
-  return program;
-};
-var createAntialiasProgram = (gl) => {
-  const vertexSource = `#version 300 es
-    in vec2 a_start;
-    in vec2 a_end;
-    in float a_side;
-    in float a_along;
-    uniform vec2 u_resolution;
-    uniform vec4 u_rect;
-    uniform vec2 u_xRange;
-    uniform vec2 u_yRange;
-    uniform float u_lineHalfWidth;
-    uniform float u_edgeWidth;
-    out float v_side;
+  void main() {
+    outColor = vec4(u_color, 1.0);
+  }
+`;
+var AA_VERTEX_SOURCE = `#version 300 es
+  in vec2 a_start;
+  in vec2 a_end;
+  in float a_side;
+  in float a_along;
+  uniform vec2 u_resolution;
+  uniform vec4 u_rect;
+  uniform vec2 u_xRange;
+  uniform vec2 u_yRange;
+  uniform float u_lineHalfWidth;
+  uniform float u_edgeWidth;
+  out float v_side;
 
-    vec2 toPixel(vec2 value) {
-      float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
-      float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
-      float nx = (value.x - u_xRange.x) / xDenom;
-      float ny = (value.y - u_yRange.x) / yDenom;
-      return vec2(
-        u_rect.x + nx * u_rect.z,
-        u_rect.y + (1.0 - ny) * u_rect.w
-      );
-    }
+  vec2 toPixel(vec2 value) {
+    float xDenom = max(0.000000000001, abs(u_xRange.y - u_xRange.x));
+    float yDenom = max(0.000000000001, abs(u_yRange.y - u_yRange.x));
+    float nx = (value.x - u_xRange.x) / xDenom;
+    float ny = (value.y - u_yRange.x) / yDenom;
+    return vec2(
+      u_rect.x + nx * u_rect.z,
+      u_rect.y + (1.0 - ny) * u_rect.w
+    );
+  }
 
-    void main() {
-      vec2 startPx = toPixel(a_start);
-      vec2 endPx = toPixel(a_end);
-      vec2 delta = endPx - startPx;
-      float segmentLength = max(0.000001, length(delta));
-      vec2 direction = delta / segmentLength;
-      vec2 normal = vec2(-direction.y, direction.x);
-      float expand = u_lineHalfWidth + u_edgeWidth;
-      float cap = min(expand, segmentLength * 0.5);
-      vec2 px = mix(startPx, endPx, a_along)
-        + direction * ((a_along * 2.0 - 1.0) * cap)
-        + normal * a_side * expand;
-      vec2 zeroToOne = px / u_resolution;
-      vec2 clip = zeroToOne * 2.0 - 1.0;
-      v_side = a_side;
-      gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
-    }
-  `;
-  const fragmentSource = `#version 300 es
-    precision highp float;
-    uniform vec3 u_color;
-    uniform float u_lineHalfWidth;
-    uniform float u_edgeWidth;
-    in float v_side;
-    out vec4 outColor;
+  void main() {
+    vec2 startPx = toPixel(a_start);
+    vec2 endPx = toPixel(a_end);
+    vec2 delta = endPx - startPx;
+    float segmentLength = max(0.000001, length(delta));
+    vec2 direction = delta / segmentLength;
+    vec2 normal = vec2(-direction.y, direction.x);
+    float expand = u_lineHalfWidth + u_edgeWidth;
+    float cap = min(expand, segmentLength * 0.5);
+    vec2 px = mix(startPx, endPx, a_along)
+      + direction * ((a_along * 2.0 - 1.0) * cap)
+      + normal * a_side * expand;
+    vec2 clip = (px / u_resolution) * 2.0 - 1.0;
+    v_side = a_side;
+    gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  }
+`;
+var AA_FRAGMENT_SOURCE = `#version 300 es
+  precision highp float;
+  uniform vec3 u_color;
+  uniform float u_lineHalfWidth;
+  uniform float u_edgeWidth;
+  in float v_side;
+  out vec4 outColor;
 
-    void main() {
-      float expand = u_lineHalfWidth + u_edgeWidth;
-      float distanceFromCenter = abs(v_side) * expand;
-      float alpha = 1.0 - smoothstep(u_lineHalfWidth, expand, distanceFromCenter);
-      outColor = vec4(u_color, alpha);
-    }
-  `;
-  const compile = (type, source) => {
-    const shader = gl.createShader(type);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      throw new Error(gl.getShaderInfoLog(shader) || "Shader compile failed");
-    }
-    return shader;
-  };
-  const program = gl.createProgram();
-  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
-  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
-  gl.linkProgram(program);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    throw new Error(gl.getProgramInfoLog(program) || "Program link failed");
-  }
-  return program;
-};
-var createSeriesBufferCache = () => /* @__PURE__ */ new Map();
-var getNextVertexCapacity = (currentCapacity, requiredCapacity) => {
-  let nextCapacity = Math.max(
-    INITIAL_GPU_VERTEX_CAPACITY,
-    currentCapacity || 0
-  );
-  while (nextCapacity < requiredCapacity) {
-    nextCapacity *= 2;
-  }
-  return nextCapacity;
-};
-var getSeriesBuffer = (gl, cache, seriesId, pointCount) => {
-  const requiredVertexFloats = pointCount * 2;
-  let entry = cache.get(seriesId);
-  if (!entry) {
-    entry = {
-      buffer: gl.createBuffer(),
-      gpuCapacity: 0,
-      vertices: new Float32Array(
-        getNextVertexCapacity(0, requiredVertexFloats)
-      )
-    };
-    cache.set(seriesId, entry);
-  }
-  if (entry.vertices.length < requiredVertexFloats) {
-    entry.vertices = new Float32Array(
-      getNextVertexCapacity(entry.vertices.length, requiredVertexFloats)
-    );
-  }
-  if (entry.gpuCapacity < entry.vertices.length) {
-    entry.gpuCapacity = entry.vertices.length;
-    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
-      gl.DYNAMIC_DRAW
-    );
+  void main() {
+    float expand = u_lineHalfWidth + u_edgeWidth;
+    float distanceFromCenter = abs(v_side) * expand;
+    float alpha = 1.0 - smoothstep(u_lineHalfWidth, expand, distanceFromCenter);
+    outColor = vec4(u_color, alpha);
+  }
+`;
+var fillSeriesPoints = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  animatedPoint
+}) => {
+  for (let index = 0; index < pointCount; index += 1) {
+    const source = animatedPoint && index === animatedPoint.index ? animatedPoint : { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+    vertices[index * 2] = source.x;
+    vertices[index * 2 + 1] = source.y;
   }
-  return entry;
 };
-var getAntialiasSeriesBuffer = (gl, cache, seriesId, pointCount) => {
-  const segmentCount = Math.max(0, pointCount - 1);
-  const requiredVertexFloats = segmentCount * 6 * AA_VERTEX_FLOAT_STRIDE;
-  let entry = cache.get(seriesId);
-  if (!entry) {
-    entry = {
-      buffer: gl.createBuffer(),
-      gpuCapacity: 0,
-      vertices: new Float32Array(
-        getNextVertexCapacity(0, requiredVertexFloats)
-      )
-    };
-    cache.set(seriesId, entry);
-  }
-  if (entry.vertices.length < requiredVertexFloats) {
-    entry.vertices = new Float32Array(
-      getNextVertexCapacity(entry.vertices.length, requiredVertexFloats)
-    );
-  }
-  if (entry.gpuCapacity < entry.vertices.length) {
-    entry.gpuCapacity = entry.vertices.length;
-    gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      entry.gpuCapacity * Float32Array.BYTES_PER_ELEMENT,
-      gl.DYNAMIC_DRAW
-    );
+var getSinglePointSegment = ({ series, state, yRange, plot }) => {
+  if (series.length !== 1) return null;
+  const x = series.rawX[0];
+  const y = series.rawY[0];
+  if (x < state.xMin || x > state.xMax || y < yRange.minY || y > yRange.maxY) {
+    return null;
   }
-  return entry;
+  const halfWidth = (state.xMax - state.xMin) / Math.max(1, plot.width) * 3;
+  return {
+    x: new Float64Array([x - halfWidth, x + halfWidth]),
+    y: new Float32Array([y, y]),
+    bucketSize: 1,
+    pointCount: 2,
+    endpoint: { x, y }
+  };
 };
-var deleteSeriesBuffers = (gl, cache) => {
-  cache.forEach((entry) => {
-    if (entry.buffer) gl.deleteBuffer(entry.buffer);
-  });
-  cache.clear();
+var writeAntialiasVertex = (vertices, offset, start, end, side, along) => {
+  vertices[offset] = start.x;
+  vertices[offset + 1] = start.y;
+  vertices[offset + 2] = end.x;
+  vertices[offset + 3] = end.y;
+  vertices[offset + 4] = side;
+  vertices[offset + 5] = along;
 };
-var fillSeriesPoints = ({ vertices, visiblePoints, pointCount, animatedPoint }) => {
-  for (let i = 0; i < pointCount; i += 1) {
-    if (animatedPoint && i === animatedPoint.index) {
-      vertices[i * 2] = animatedPoint.x;
-      vertices[i * 2 + 1] = animatedPoint.y;
-      continue;
-    }
-    vertices[i * 2] = visiblePoints.x[i];
-    vertices[i * 2 + 1] = visiblePoints.y[i];
+var getSeriesPoint = (visiblePoints, animatedPoint, index) => animatedPoint && index === animatedPoint.index ? { x: animatedPoint.x, y: animatedPoint.y } : { x: visiblePoints.x[index], y: visiblePoints.y[index] };
+var fillAntialiasSeriesSegments = ({
+  vertices,
+  visiblePoints,
+  pointCount,
+  animatedPoint
+}) => {
+  let offset = 0;
+  for (let index = 0; index < pointCount - 1; index += 1) {
+    const start = getSeriesPoint(visiblePoints, animatedPoint, index);
+    const end = getSeriesPoint(visiblePoints, animatedPoint, index + 1);
+    [
+      [-1, 0],
+      [1, 0],
+      [-1, 1],
+      [-1, 1],
+      [1, 0],
+      [1, 1]
+    ].forEach(([side, along]) => {
+      writeAntialiasVertex(vertices, offset, start, end, side, along);
+      offset += AA_VERTEX_FLOAT_STRIDE;
+    });
   }
+  return offset / AA_VERTEX_FLOAT_STRIDE;
 };
 var projectDataToPixel = ({ x, y, state, yRange, plot }) => ({
   x: plot.x + (x - state.xMin) / (state.xMax - state.xMin) * plot.width,
   y: plot.y + (yRange.maxY - y) / (yRange.maxY - yRange.minY) * plot.height
 });
-var writeLineVertex = (vertices, offset, x, y) => {
-  vertices[offset] = x;
-  vertices[offset + 1] = y;
-};
 var fillDashedSeriesSegments = ({
   vertices,
   visiblePoints,
@@ -643,14 +1070,11 @@ var fillDashedSeriesSegments = ({
   let offset = 0;
   let distance = 0;
   const dashTotal = DASH_LENGTH_PX + DASH_GAP_PX;
-  for (let i = 0; i < pointCount - 1; i += 1) {
-    const start = {
-      x: visiblePoints.x[i],
-      y: visiblePoints.y[i]
-    };
+  for (let index = 0; index < pointCount - 1; index += 1) {
+    const start = { x: visiblePoints.x[index], y: visiblePoints.y[index] };
     const end = {
-      x: visiblePoints.x[i + 1],
-      y: visiblePoints.y[i + 1]
+      x: visiblePoints.x[index + 1],
+      y: visiblePoints.y[index + 1]
     };
     const startPx = projectDataToPixel({ ...start, state, yRange, plot });
     const endPx = projectDataToPixel({ ...end, state, yRange, plot });
@@ -662,25 +1086,14 @@ var fillDashedSeriesSegments = ({
       const boundary = phase < DASH_LENGTH_PX ? DASH_LENGTH_PX - phase : dashTotal - phase;
       const step = Math.min(boundary, pixelLength - consumed);
       if (phase < DASH_LENGTH_PX) {
-        if (offset + 4 > vertices.length) {
-          return offset / 2;
-        }
+        if (offset + 4 > vertices.length) return offset / 2;
         const t0 = consumed / pixelLength;
         const t1 = (consumed + step) / pixelLength;
-        writeLineVertex(
-          vertices,
-          offset,
-          start.x + (end.x - start.x) * t0,
-          start.y + (end.y - start.y) * t0
-        );
-        offset += 2;
-        writeLineVertex(
-          vertices,
-          offset,
-          start.x + (end.x - start.x) * t1,
-          start.y + (end.y - start.y) * t1
-        );
-        offset += 2;
+        vertices[offset] = start.x + (end.x - start.x) * t0;
+        vertices[offset + 1] = start.y + (end.y - start.y) * t0;
+        vertices[offset + 2] = start.x + (end.x - start.x) * t1;
+        vertices[offset + 3] = start.y + (end.y - start.y) * t1;
+        offset += 4;
       }
       consumed += step;
       distance += step;
@@ -688,107 +1101,6 @@ var fillDashedSeriesSegments = ({
   }
   return offset / 2;
 };
-var getSeriesPoint = (visiblePoints, animatedPoint, index) => {
-  if (animatedPoint && index === animatedPoint.index) {
-    return { x: animatedPoint.x, y: animatedPoint.y };
-  }
-  return { x: visiblePoints.x[index], y: visiblePoints.y[index] };
-};
-var getSinglePointSegment = ({ series, state, yRange, plot }) => {
-  if (series.length !== 1) return null;
-  const x = series.rawX[0];
-  const y = series.rawY[0];
-  if (x < state.xMin || x > state.xMax || y < yRange.minY || y > yRange.maxY) {
-    return null;
-  }
-  const halfWidth = (state.xMax - state.xMin) / Math.max(1, plot.width) * 3;
-  return {
-    x: new Float64Array([x - halfWidth, x + halfWidth]),
-    y: new Float32Array([y, y]),
-    bucketSize: 1,
-    pointCount: 2,
-    endpoint: { x, y }
-  };
-};
-var writeAntialiasVertex = (vertices, offset, start, end, side, along) => {
-  vertices[offset] = start.x;
-  vertices[offset + 1] = start.y;
-  vertices[offset + 2] = end.x;
-  vertices[offset + 3] = end.y;
-  vertices[offset + 4] = side;
-  vertices[offset + 5] = along;
-};
-var fillAntialiasSeriesSegments = ({
-  vertices,
-  visiblePoints,
-  pointCount,
-  animatedPoint
-}) => {
-  let offset = 0;
-  for (let i = 0; i < pointCount - 1; i += 1) {
-    const start = getSeriesPoint(visiblePoints, animatedPoint, i);
-    const end = getSeriesPoint(visiblePoints, animatedPoint, i + 1);
-    writeAntialiasVertex(vertices, offset, start, end, -1, 0);
-    offset += AA_VERTEX_FLOAT_STRIDE;
-    writeAntialiasVertex(vertices, offset, start, end, 1, 0);
-    offset += AA_VERTEX_FLOAT_STRIDE;
-    writeAntialiasVertex(vertices, offset, start, end, -1, 1);
-    offset += AA_VERTEX_FLOAT_STRIDE;
-    writeAntialiasVertex(vertices, offset, start, end, -1, 1);
-    offset += AA_VERTEX_FLOAT_STRIDE;
-    writeAntialiasVertex(vertices, offset, start, end, 1, 0);
-    offset += AA_VERTEX_FLOAT_STRIDE;
-    writeAntialiasVertex(vertices, offset, start, end, 1, 1);
-    offset += AA_VERTEX_FLOAT_STRIDE;
-  }
-  return offset / AA_VERTEX_FLOAT_STRIDE;
-};
-var lowerBound2 = (array, value) => {
-  let lo = 0;
-  let hi = array.length;
-  while (lo < hi) {
-    const mid = lo + hi >> 1;
-    if (array[mid] < value) lo = mid + 1;
-    else hi = mid;
-  }
-  return lo;
-};
-var getNearestPointIndex = (xValues, xValue) => {
-  if (!xValues.length) return -1;
-  const nextIndex = lowerBound2(xValues, xValue);
-  if (nextIndex <= 0) return 0;
-  if (nextIndex >= xValues.length) return xValues.length - 1;
-  const previousIndex = nextIndex - 1;
-  return Math.abs(xValues[nextIndex] - xValue) < Math.abs(xValue - xValues[previousIndex]) ? nextIndex : previousIndex;
-};
-var getChartXBounds = (chart) => {
-  let minX = Infinity;
-  let maxX = -Infinity;
-  chart.series.forEach((series) => {
-    if (series.length === 0) return;
-    minX = Math.min(minX, series.rawX[0]);
-    maxX = Math.max(maxX, series.rawX[series.length - 1]);
-  });
-  return { minX, maxX };
-};
-var getOrderedSeries = (chart, seriesOrderByChart) => {
-  const series = Array.isArray(chart?.series) ? chart.series : [];
-  const order = seriesOrderByChart?.[chart?.id];
-  if (!Array.isArray(order) || order.length !== series.length) {
-    return series;
-  }
-  const used = /* @__PURE__ */ new Set();
-  const ordered = [];
-  order.forEach((seriesIndex) => {
-    if (!Number.isInteger(seriesIndex)) return;
-    if (seriesIndex < 0 || seriesIndex >= series.length) return;
-    if (used.has(seriesIndex)) return;
-    used.add(seriesIndex);
-    ordered.push(series[seriesIndex]);
-  });
-  if (ordered.length !== series.length) return series;
-  return ordered;
-};
 var normalizeMovingAverage = (movingAverage) => {
   if (!movingAverage?.enabled) return null;
   return {
@@ -797,7 +1109,6 @@ var normalizeMovingAverage = (movingAverage) => {
     type: movingAverage.type === "sma" ? "sma" : "ema"
   };
 };
-var getMovingAverageCacheKey = (series, movingAverage) => `${series.id}::ma:${movingAverage.type}:${movingAverage.period}`;
 var calculateMovingAverageChunk = ({
   sourceY,
   startIndex,
@@ -806,106 +1117,524 @@ var calculateMovingAverageChunk = ({
   previousAverage
 }) => {
   const out = new Float32Array(Math.max(0, sourceY.length - startIndex));
-  if (out.length === 0) return out;
+  if (!out.length) return out;
   if (type === "sma") {
     let sum = 0;
     const firstWindowStart = Math.max(0, startIndex - period + 1);
-    for (let i = firstWindowStart; i < startIndex; i += 1) {
-      sum += sourceY[i];
+    for (let index = firstWindowStart; index < startIndex; index += 1) {
+      sum += sourceY[index];
     }
-    for (let sourceIndex = startIndex; sourceIndex < sourceY.length; sourceIndex += 1) {
-      sum += sourceY[sourceIndex];
-      const removeIndex = sourceIndex - period;
-      if (removeIndex >= firstWindowStart) {
-        sum -= sourceY[removeIndex];
-      }
-      const safePeriod = Math.min(period, sourceIndex + 1);
-      out[sourceIndex - startIndex] = sum / safePeriod;
+    for (let index = startIndex; index < sourceY.length; index += 1) {
+      sum += sourceY[index];
+      const removeIndex = index - period;
+      if (removeIndex >= firstWindowStart) sum -= sourceY[removeIndex];
+      out[index - startIndex] = sum / Math.min(period, index + 1);
     }
     return out;
   }
   const multiplier = 2 / (period + 1);
-  let prev = Number.isFinite(previousAverage) ? previousAverage : sourceY[startIndex];
-  for (let sourceIndex = startIndex; sourceIndex < sourceY.length; sourceIndex += 1) {
-    prev = sourceY[sourceIndex] * multiplier + prev * (1 - multiplier);
-    out[sourceIndex - startIndex] = prev;
+  let previous = Number.isFinite(previousAverage) ? previousAverage : sourceY[startIndex];
+  for (let index = startIndex; index < sourceY.length; index += 1) {
+    previous = sourceY[index] * multiplier + previous * (1 - multiplier);
+    out[index - startIndex] = previous;
   }
   return out;
 };
-var getMovingAverageSeriesForChart = ({
-  chart,
-  movingAverage,
-  cache
-}) => {
-  const normalized = normalizeMovingAverage(movingAverage);
-  if (!normalized || !cache) return [];
-  return chart.series.map((series) => {
-    if (series.length === 0) return null;
-    const cacheKey = getMovingAverageCacheKey(series, normalized);
-    const cached = cache.get(cacheKey);
-    if (cached && cached.sourceSeries === series && cached.sourceLength <= series.length) {
-      const appendStart = cached.sourceLength;
-      if (appendStart < series.length) {
-        const appendedY = calculateMovingAverageChunk({
-          sourceY: series.rawY.subarray(0, series.length),
-          startIndex: appendStart,
-          period: normalized.period,
-          type: normalized.type,
-          previousAverage: appendStart > 0 ? cached.series.rawY[appendStart - 1] : void 0
-        });
-        cached.series.append(
-          series.rawX.subarray(appendStart, series.length),
-          appendedY
-        );
-        cached.sourceLength = series.length;
-      }
-      cached.series.color = series.color;
-      cached.series.name = `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`;
-      return cached.series;
-    }
-    const y = calculateMovingAverageChunk({
-      sourceY: series.rawY.subarray(0, series.length),
-      startIndex: 0,
-      period: normalized.period,
-      type: normalized.type
-    });
-    const maSeries = createSeries({
-      id: cacheKey,
-      name: `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`,
-      color: series.color,
-      x: series.rawX.subarray(0, series.length),
-      y
-    });
-    cache.set(cacheKey, {
-      sourceSeries: series,
-      sourceLength: series.length,
-      series: maSeries
-    });
-    return maSeries;
-  }).filter(Boolean);
+var getMovingAverageSeriesForChart = ({
+  chart,
+  movingAverage,
+  cache
+}) => {
+  const normalized = normalizeMovingAverage(movingAverage);
+  if (!normalized) return [];
+  return chart.series.map((series) => {
+    if (!series.length) return null;
+    const key = `${series.id}::ma:${normalized.type}:${normalized.period}`;
+    const cached = cache.get(key);
+    if (cached && cached.sourceSeries === series && cached.sourceLength <= series.length) {
+      const appendStart = cached.sourceLength;
+      if (appendStart < series.length) {
+        const appendedY = calculateMovingAverageChunk({
+          sourceY: series.rawY.subarray(0, series.length),
+          startIndex: appendStart,
+          period: normalized.period,
+          type: normalized.type,
+          previousAverage: appendStart > 0 ? cached.series.rawY[appendStart - 1] : void 0
+        });
+        cached.series.append(
+          series.rawX.subarray(appendStart, series.length),
+          appendedY
+        );
+        cached.sourceLength = series.length;
+      }
+      cached.series.color = series.color;
+      cached.series.name = `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`;
+      return cached.series;
+    }
+    const movingY = calculateMovingAverageChunk({
+      sourceY: series.rawY.subarray(0, series.length),
+      startIndex: 0,
+      period: normalized.period,
+      type: normalized.type
+    });
+    const movingSeries = createLineSeries({
+      id: key,
+      name: `${series.name} ${normalized.type.toUpperCase()} ${normalized.period}`,
+      color: series.color,
+      x: series.rawX.subarray(0, series.length),
+      y: movingY
+    });
+    cache.set(key, {
+      sourceSeries: series,
+      sourceLength: series.length,
+      series: movingSeries
+    });
+    return movingSeries;
+  }).filter(Boolean);
+};
+var getLineLocations = (gl, program) => Object.freeze({
+  aXy: gl.getAttribLocation(program, "a_xy"),
+  uColor: gl.getUniformLocation(program, "u_color"),
+  uRect: gl.getUniformLocation(program, "u_rect"),
+  uResolution: gl.getUniformLocation(program, "u_resolution"),
+  uXRange: gl.getUniformLocation(program, "u_xRange"),
+  uYRange: gl.getUniformLocation(program, "u_yRange")
+});
+var createLineRenderer = (gl) => {
+  const program = createProgram(
+    gl,
+    LINE_VERTEX_SOURCE,
+    LINE_FRAGMENT_SOURCE
+  );
+  const antialiasProgram = createProgram(
+    gl,
+    AA_VERTEX_SOURCE,
+    AA_FRAGMENT_SOURCE
+  );
+  const locations = getLineLocations(gl, program);
+  const aaLocations = Object.freeze({
+    aAlong: gl.getAttribLocation(antialiasProgram, "a_along"),
+    aEnd: gl.getAttribLocation(antialiasProgram, "a_end"),
+    aSide: gl.getAttribLocation(antialiasProgram, "a_side"),
+    aStart: gl.getAttribLocation(antialiasProgram, "a_start"),
+    uColor: gl.getUniformLocation(antialiasProgram, "u_color"),
+    uEdgeWidth: gl.getUniformLocation(antialiasProgram, "u_edgeWidth"),
+    uLineHalfWidth: gl.getUniformLocation(antialiasProgram, "u_lineHalfWidth"),
+    uRect: gl.getUniformLocation(antialiasProgram, "u_rect"),
+    uResolution: gl.getUniformLocation(antialiasProgram, "u_resolution"),
+    uXRange: gl.getUniformLocation(antialiasProgram, "u_xRange"),
+    uYRange: gl.getUniformLocation(antialiasProgram, "u_yRange")
+  });
+  const buffers = /* @__PURE__ */ new Map();
+  const antialiasBuffers = /* @__PURE__ */ new Map();
+  const movingAverageCache = /* @__PURE__ */ new Map();
+  const setCommonUniforms = (activeLocations, pixelWidth, pixelHeight, scaledPlot, state, yRange) => {
+    gl.uniform2f(activeLocations.uResolution, pixelWidth, pixelHeight);
+    gl.uniform4f(
+      activeLocations.uRect,
+      scaledPlot.x,
+      scaledPlot.y,
+      scaledPlot.width,
+      scaledPlot.height
+    );
+    gl.uniform2f(activeLocations.uXRange, state.xMin, state.xMax);
+    gl.uniform2f(activeLocations.uYRange, yRange.minY, yRange.maxY);
+  };
+  return {
+    draw({
+      antialiasLines,
+      chart,
+      descriptor,
+      dpr,
+      getAppendAnimatedPoint,
+      movingAverage,
+      now,
+      pixelHeight,
+      pixelWidth,
+      plot,
+      scaledPlot,
+      seriesOrderByChart,
+      state,
+      yRange
+    }) {
+      const useAntialias = Boolean(antialiasLines);
+      const activeProgram = useAntialias ? antialiasProgram : program;
+      const activeLocations = useAntialias ? aaLocations : locations;
+      gl.useProgram(activeProgram);
+      setCommonUniforms(
+        activeLocations,
+        pixelWidth,
+        pixelHeight,
+        scaledPlot,
+        state,
+        yRange
+      );
+      if (useAntialias) {
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enableVertexAttribArray(aaLocations.aStart);
+        gl.enableVertexAttribArray(aaLocations.aEnd);
+        gl.enableVertexAttribArray(aaLocations.aSide);
+        gl.enableVertexAttribArray(aaLocations.aAlong);
+        gl.uniform1f(
+          aaLocations.uLineHalfWidth,
+          AA_LINE_WIDTH_PX * dpr / 2
+        );
+        gl.uniform1f(aaLocations.uEdgeWidth, AA_EDGE_WIDTH_PX * dpr);
+      } else {
+        gl.disable(gl.BLEND);
+        gl.enableVertexAttribArray(locations.aXy);
+      }
+      const seriesEndpoints = /* @__PURE__ */ new Map();
+      const hideBaseSeries = descriptor.capabilities.movingAverage && Boolean(movingAverage?.enabled) && Boolean(movingAverage?.hideBase);
+      if (!hideBaseSeries) {
+        getOrderedSeries(chart, seriesOrderByChart).forEach((series) => {
+          let visiblePoints = series.getVisiblePoints(
+            state.xMin,
+            state.xMax,
+            plot.width
+          );
+          let singlePointEndpoint = null;
+          if (visiblePoints.pointCount < 2) {
+            const singlePointSegment = getSinglePointSegment({
+              series,
+              state,
+              yRange,
+              plot
+            });
+            if (!singlePointSegment) return;
+            visiblePoints = singlePointSegment;
+            singlePointEndpoint = singlePointSegment.endpoint;
+          }
+          const animatedPoint = singlePointEndpoint ? null : getAppendAnimatedPoint({
+            seriesId: series.id,
+            visiblePoints,
+            now
+          });
+          const pointCount = animatedPoint?.pointCount ?? visiblePoints.pointCount;
+          if (animatedPoint) {
+            seriesEndpoints.set(series.id, {
+              x: animatedPoint.x,
+              y: animatedPoint.y
+            });
+          } else if (singlePointEndpoint) {
+            seriesEndpoints.set(series.id, singlePointEndpoint);
+          }
+          const [r, g, b] = hexToRgb(series.color);
+          gl.uniform3f(activeLocations.uColor, r, g, b);
+          if (useAntialias) {
+            const requiredFloats = Math.max(0, pointCount - 1) * 6 * AA_VERTEX_FLOAT_STRIDE;
+            const entry2 = getDynamicBuffer(
+              gl,
+              antialiasBuffers,
+              series.id,
+              requiredFloats
+            );
+            const drawVertexCount = fillAntialiasSeriesSegments({
+              vertices: entry2.vertices,
+              visiblePoints,
+              pointCount,
+              animatedPoint
+            });
+            const stride = AA_VERTEX_FLOAT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
+            gl.bindBuffer(gl.ARRAY_BUFFER, entry2.buffer);
+            gl.vertexAttribPointer(
+              aaLocations.aStart,
+              2,
+              gl.FLOAT,
+              false,
+              stride,
+              0
+            );
+            gl.vertexAttribPointer(
+              aaLocations.aEnd,
+              2,
+              gl.FLOAT,
+              false,
+              stride,
+              2 * Float32Array.BYTES_PER_ELEMENT
+            );
+            gl.vertexAttribPointer(
+              aaLocations.aSide,
+              1,
+              gl.FLOAT,
+              false,
+              stride,
+              4 * Float32Array.BYTES_PER_ELEMENT
+            );
+            gl.vertexAttribPointer(
+              aaLocations.aAlong,
+              1,
+              gl.FLOAT,
+              false,
+              stride,
+              5 * Float32Array.BYTES_PER_ELEMENT
+            );
+            gl.bufferSubData(
+              gl.ARRAY_BUFFER,
+              0,
+              entry2.vertices,
+              0,
+              drawVertexCount * AA_VERTEX_FLOAT_STRIDE
+            );
+            gl.drawArrays(gl.TRIANGLES, 0, drawVertexCount);
+            return;
+          }
+          const entry = getDynamicBuffer(
+            gl,
+            buffers,
+            series.id,
+            pointCount * 2
+          );
+          fillSeriesPoints({
+            vertices: entry.vertices,
+            visiblePoints,
+            pointCount,
+            animatedPoint
+          });
+          gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+          gl.vertexAttribPointer(locations.aXy, 2, gl.FLOAT, false, 0, 0);
+          gl.bufferSubData(
+            gl.ARRAY_BUFFER,
+            0,
+            entry.vertices,
+            0,
+            pointCount * 2
+          );
+          gl.drawArrays(gl.LINE_STRIP, 0, pointCount);
+        });
+      }
+      const movingSeries = getMovingAverageSeriesForChart({
+        chart,
+        movingAverage: descriptor.capabilities.movingAverage ? movingAverage : null,
+        cache: movingAverageCache
+      });
+      if (movingSeries.length) {
+        gl.disable(gl.BLEND);
+        gl.useProgram(program);
+        gl.enableVertexAttribArray(locations.aXy);
+        setCommonUniforms(
+          locations,
+          pixelWidth,
+          pixelHeight,
+          scaledPlot,
+          state,
+          yRange
+        );
+        getOrderedSeries(
+          { ...chart, series: movingSeries },
+          seriesOrderByChart
+        ).forEach((series) => {
+          const visiblePoints = series.getVisiblePoints(
+            state.xMin,
+            state.xMax,
+            plot.width
+          );
+          if (visiblePoints.pointCount < 2) return;
+          const entry = getDynamicBuffer(
+            gl,
+            buffers,
+            series.id,
+            visiblePoints.pointCount * 8 * 2
+          );
+          const drawVertexCount = fillDashedSeriesSegments({
+            vertices: entry.vertices,
+            visiblePoints,
+            pointCount: visiblePoints.pointCount,
+            state,
+            yRange,
+            plot
+          });
+          if (drawVertexCount < 2) return;
+          const [r, g, b] = hexToRgb(series.color);
+          gl.uniform3f(locations.uColor, r, g, b);
+          gl.bindBuffer(gl.ARRAY_BUFFER, entry.buffer);
+          gl.vertexAttribPointer(locations.aXy, 2, gl.FLOAT, false, 0, 0);
+          gl.bufferSubData(
+            gl.ARRAY_BUFFER,
+            0,
+            entry.vertices,
+            0,
+            drawVertexCount * 2
+          );
+          gl.drawArrays(gl.LINES, 0, drawVertexCount);
+        });
+      }
+      gl.disable(gl.BLEND);
+      return { seriesEndpoints };
+    },
+    destroy() {
+      deleteBufferCache(gl, buffers);
+      deleteBufferCache(gl, antialiasBuffers);
+      movingAverageCache.clear();
+      gl.deleteProgram(program);
+      gl.deleteProgram(antialiasProgram);
+    }
+  };
+};
+
+// src/core/renderers/index.js
+var RENDERER_FACTORIES = Object.freeze({
+  bar: createBarRenderer,
+  line: createLineRenderer
+});
+var createRendererRegistry = (gl) => {
+  const renderers = new Map(
+    Object.entries(RENDERER_FACTORIES).map(([type, createRenderer]) => [
+      type,
+      createRenderer(gl)
+    ])
+  );
+  return {
+    draw(type, payload) {
+      const renderer = renderers.get(type);
+      if (!renderer) {
+        throw new TypeError(`No AlienCharts renderer registered for "${type}"`);
+      }
+      return renderer.draw(payload);
+    },
+    getTooltipCategory(type, payload) {
+      const renderer = renderers.get(type);
+      if (!renderer) {
+        throw new TypeError(`No AlienCharts renderer registered for "${type}"`);
+      }
+      return renderer.getTooltipCategory?.(payload) ?? payload.visiblePoints.x[payload.pointIndex];
+    },
+    destroy() {
+      renderers.forEach((renderer) => renderer.destroy());
+      renderers.clear();
+    }
+  };
+};
+
+// src/core/chartRenderer.js
+var CHART_HEIGHT = 360;
+var RIGHT_AXIS_WIDTH = 58;
+var PLOT_PADDING = Object.freeze({
+  left: 38,
+  right: RIGHT_AXIS_WIDTH,
+  top: 34,
+  bottom: 28
+});
+var HORIZONTAL_PLOT_PADDING = Object.freeze({
+  left: RIGHT_AXIS_WIDTH,
+  right: 20,
+  top: 34,
+  bottom: 28
+});
+var CATEGORICAL_PLOT_PADDING = Object.freeze({
+  ...PLOT_PADDING,
+  bottom: 42
+});
+var CATEGORICAL_HORIZONTAL_PLOT_PADDING = Object.freeze({
+  ...HORIZONTAL_PLOT_PADDING,
+  left: 128
+});
+var Y_SCALE_MIN = 0.05;
+var Y_SCALE_MAX = 40;
+var Y_AXIS_TICK_COUNT = 5;
+var X_AXIS_TICK_COUNT = 5;
+var X_SCALE_MIN_SPAN = 10;
+var X_SCALE_MAX_SPAN = 1e9;
+var JUMP_LATEST_RIGHT_PADDING_RATIO = 0.1;
+var DEFAULT_CHART_BACKGROUND = "#f5f9ff";
+var getChartOrientation = (chart, descriptor) => (descriptor || resolveChartDescriptor(chart)).orientation;
+var getPlotPadding = (chart, descriptor) => {
+  const categorical = getChartCategories(chart).length > 0;
+  if (getChartOrientation(chart, descriptor) === "horizontal") {
+    return categorical ? CATEGORICAL_HORIZONTAL_PLOT_PADDING : HORIZONTAL_PLOT_PADDING;
+  }
+  return categorical ? CATEGORICAL_PLOT_PADDING : PLOT_PADDING;
+};
+var getCategoryPixelLength = (chart, plot, descriptor) => getChartOrientation(chart, descriptor) === "horizontal" ? plot.height : plot.width;
+var getReadableTextColor = (backgroundColor) => {
+  const [r, g, b] = hexToRgb(backgroundColor);
+  const toLinear = (value) => value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return luminance > 0.45 ? "#111827" : "#ffffff";
+};
+var getSeriesLabelTextColor = (series) => {
+  if (series.__labelTextColorFor !== series.color) {
+    series.__labelTextColorFor = series.color;
+    series.__labelTextColor = getReadableTextColor(series.color);
+  }
+  return series.__labelTextColor;
+};
+var lowerBound2 = (array, value) => {
+  let low = 0;
+  let high = array.length;
+  while (low < high) {
+    const middle = low + high >> 1;
+    if (array[middle] < value) low = middle + 1;
+    else high = middle;
+  }
+  return low;
+};
+var getNearestPointIndex = (xValues, xValue) => {
+  if (!xValues.length) return -1;
+  const nextIndex = lowerBound2(xValues, xValue);
+  if (nextIndex <= 0) return 0;
+  if (nextIndex >= xValues.length) return xValues.length - 1;
+  const previousIndex = nextIndex - 1;
+  return Math.abs(xValues[nextIndex] - xValue) < Math.abs(xValue - xValues[previousIndex]) ? nextIndex : previousIndex;
+};
+var getChartXBounds = (chart) => {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  chart.series.forEach((series) => {
+    if (!series.length) return;
+    minX = Math.min(minX, series.rawX[0]);
+    maxX = Math.max(maxX, series.rawX[series.length - 1]);
+  });
+  return { minX, maxX };
+};
+var getMinimumCategorySpan = (chart) => {
+  const categories = getChartCategories(chart).map((category) => category.value).sort((left, right) => left - right);
+  if (!categories.length) return X_SCALE_MIN_SPAN;
+  let minimumGap = Infinity;
+  for (let index = 1; index < categories.length; index += 1) {
+    minimumGap = Math.min(minimumGap, categories[index] - categories[index - 1]);
+  }
+  return Number.isFinite(minimumGap) ? minimumGap : 1;
 };
 var getInitialView = (chart, initialVisiblePoints = null) => {
+  const categories = getChartCategories(chart).map((category) => category.value).sort((left, right) => left - right);
+  if (categories.length) {
+    const requestedCount = Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0 ? Math.max(1, Math.floor(initialVisiblePoints)) : categories.length;
+    const visible = categories.slice(-requestedCount);
+    const first = visible[0];
+    const last = visible[visible.length - 1];
+    const firstIndex = categories.indexOf(first);
+    const lastIndex = categories.lastIndexOf(last);
+    const leftGap = firstIndex > 0 ? first - categories[firstIndex - 1] : visible[1] - first || 1;
+    const rightGap = lastIndex + 1 < categories.length ? categories[lastIndex + 1] - last : last - visible[visible.length - 2] || leftGap;
+    return {
+      xMin: first - leftGap / 2,
+      xMax: last + rightGap / 2
+    };
+  }
   const { minX, maxX } = getChartXBounds(chart);
   if (!Number.isFinite(minX) || !Number.isFinite(maxX)) {
     return { xMin: 0, xMax: 1 };
   }
   if (minX === maxX) {
     const span2 = Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0 ? Math.max(10, initialVisiblePoints) : 10;
-    const rightPadding2 = span2 * JUMP_LATEST_RIGHT_PADDING_RATIO;
-    const nextMax = maxX + rightPadding2;
+    const nextMax = maxX + span2 * JUMP_LATEST_RIGHT_PADDING_RATIO;
     return { xMin: nextMax - span2, xMax: nextMax };
   }
   let span = maxX - minX;
   if (Number.isFinite(initialVisiblePoints) && initialVisiblePoints > 0) {
     span = Math.min(span, initialVisiblePoints);
-    const rightPadding2 = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
-    const nextMax = maxX + rightPadding2;
+    const nextMax = maxX + span * JUMP_LATEST_RIGHT_PADDING_RATIO;
     return { xMin: nextMax - span, xMax: nextMax };
   }
-  const rightPadding = span * JUMP_LATEST_RIGHT_PADDING_RATIO;
-  return { xMin: minX, xMax: maxX + rightPadding };
+  return {
+    xMin: minX,
+    xMax: maxX + span * JUMP_LATEST_RIGHT_PADDING_RATIO
+  };
 };
-var getYRange = (chart, xMin, xMax, width) => {
+var getYRange = (chart, xMin, xMax, width, suppliedDescriptor) => {
+  const descriptor = suppliedDescriptor || resolveChartDescriptor(chart);
   let minY = Infinity;
   let maxY = -Infinity;
   let renderedPoints = 0;
@@ -914,26 +1643,53 @@ var getYRange = (chart, xMin, xMax, width) => {
     const visible = series.getVisiblePoints(xMin, xMax, width);
     renderedPoints += visible.pointCount;
     bucketSize = Math.max(bucketSize, visible.bucketSize);
-    for (let i = 0; i < visible.y.length; i += 1) {
-      const value = visible.y[i];
-      if (value < minY) minY = value;
-      if (value > maxY) maxY = value;
+    for (let index = 0; index < visible.y.length; index += 1) {
+      minY = Math.min(minY, visible.y[index]);
+      maxY = Math.max(maxY, visible.y[index]);
     }
   });
-  if (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
-    return { minY: 0, maxY: 1, renderedPoints, bucketSize };
-  }
   const fixedMinY = Number(chart.yRange?.min);
   const fixedMaxY = Number(chart.yRange?.max);
   if (Number.isFinite(fixedMinY) && Number.isFinite(fixedMaxY) && fixedMinY < fixedMaxY) {
-    return { minY: fixedMinY, maxY: fixedMaxY, renderedPoints, bucketSize };
+    return {
+      minY: fixedMinY,
+      maxY: fixedMaxY,
+      renderedPoints,
+      bucketSize
+    };
+  }
+  if (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
+    return { minY: 0, maxY: 1, renderedPoints, bucketSize };
+  }
+  if (descriptor.rangeIncludesZero) {
+    if (minY >= 0) {
+      return {
+        minY: 0,
+        maxY: maxY === 0 ? 1 : maxY * 1.08,
+        renderedPoints,
+        bucketSize
+      };
+    }
+    if (maxY <= 0) {
+      return {
+        minY: minY === 0 ? -1 : minY * 1.08,
+        maxY: 0,
+        renderedPoints,
+        bucketSize
+      };
+    }
   }
   if (minY === maxY) {
     minY -= 1;
     maxY += 1;
   }
-  const pad = (maxY - minY) * 0.08;
-  return { minY: minY - pad, maxY: maxY + pad, renderedPoints, bucketSize };
+  const padding = (maxY - minY) * 0.08;
+  return {
+    minY: minY - padding,
+    maxY: maxY + padding,
+    renderedPoints,
+    bucketSize
+  };
 };
 var applyYScale = (yRange, scale = 1, centerOffset = 0) => {
   const clampedScale = Math.min(Y_SCALE_MAX, Math.max(Y_SCALE_MIN, scale));
@@ -948,20 +1704,30 @@ var applyYScale = (yRange, scale = 1, centerOffset = 0) => {
 var trimFormattedNumber = (value) => value.replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
 var formatNumber = (value) => {
   if (!Number.isFinite(value)) return "";
-  const abs = Math.abs(value);
-  if (abs !== 0 && abs < 1e-4) return value.toExponential(2);
-  if (abs < 1) return trimFormattedNumber(value.toPrecision(5));
-  if (abs >= 1e5) return value.toFixed(0);
-  if (abs >= 1e3) return trimFormattedNumber(value.toFixed(1));
-  if (abs >= 10) return trimFormattedNumber(value.toFixed(2));
+  const absolute = Math.abs(value);
+  if (absolute !== 0 && absolute < 1e-4) return value.toExponential(2);
+  if (absolute < 1) return trimFormattedNumber(value.toPrecision(5));
+  if (absolute >= 1e5) return value.toFixed(0);
+  if (absolute >= 1e3) return trimFormattedNumber(value.toFixed(1));
+  if (absolute >= 10) return trimFormattedNumber(value.toFixed(2));
   return trimFormattedNumber(value.toFixed(4));
 };
 var formatCompactNumber = (value) => {
   if (!Number.isFinite(value)) return "";
-  const abs = Math.abs(value);
-  if (abs >= 1e9) return `${(value / 1e9).toFixed(abs >= 1e10 ? 0 : 1)}B`;
-  if (abs >= 1e6) return `${(value / 1e6).toFixed(abs >= 1e7 ? 0 : 1)}M`;
-  if (abs >= 1e3) return `${(value / 1e3).toFixed(abs >= 1e4 ? 0 : 1)}k`;
+  const absolute = Math.abs(value);
+  if (absolute >= 1e9) {
+    return `${(value / 1e9).toFixed(
+      absolute >= 1e10 ? 0 : 1
+    )}B`;
+  }
+  if (absolute >= 1e6) {
+    return `${(value / 1e6).toFixed(
+      absolute >= 1e7 ? 0 : 1
+    )}M`;
+  }
+  if (absolute >= 1e3) {
+    return `${(value / 1e3).toFixed(absolute >= 1e4 ? 0 : 1)}k`;
+  }
   return formatNumber(value);
 };
 var normalizeRect = (start, end) => {
@@ -979,8 +1745,27 @@ var clampPointToPlot = (point, plot) => ({
   x: Math.min(plot.x + plot.width, Math.max(plot.x, point.x)),
   y: Math.min(plot.y + plot.height, Math.max(plot.y, point.y))
 });
+var getScaledYRangeForLayout = ({
+  chart,
+  descriptor,
+  state,
+  plot,
+  yScaleRef,
+  yCenterOffsetRef
+}) => applyYScale(
+  getYRange(
+    chart,
+    state.xMin,
+    state.xMax,
+    getCategoryPixelLength(chart, plot, descriptor),
+    descriptor
+  ),
+  yScaleRef.current.get(chart.id) ?? 1,
+  yCenterOffsetRef.current.get(chart.id) ?? 0
+);
 var applyRectangleZoom = ({
   chart,
+  descriptor: suppliedDescriptor,
   plot,
   start,
   end,
@@ -990,120 +1775,164 @@ var applyRectangleZoom = ({
   yCenterOffsetRef,
   yManualScaleRef
 }) => {
-  const clampedStart = clampPointToPlot(start, plot);
-  const clampedEnd = clampPointToPlot(end, plot);
-  const rect = normalizeRect(clampedStart, clampedEnd);
+  const rect = normalizeRect(
+    clampPointToPlot(start, plot),
+    clampPointToPlot(end, plot)
+  );
   if (!rect || rect.width < 6 || rect.height < 6) return false;
+  const descriptor = suppliedDescriptor || resolveChartDescriptor(chart);
   const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
-  const currentYRange = applyYScale(
-    getYRange(chart, state.xMin, state.xMax, plot.width),
-    yScaleRef.current.get(chart.id) ?? 1,
-    yCenterOffsetRef.current.get(chart.id) ?? 0
-  );
-  const leftRatio = (rect.left - plot.x) / plot.width;
-  const rightRatio = (rect.left + rect.width - plot.x) / plot.width;
-  const topRatio = (rect.top - plot.y) / plot.height;
-  const bottomRatio = (rect.top + rect.height - plot.y) / plot.height;
-  const nextMin = state.xMin + leftRatio * (state.xMax - state.xMin);
-  const nextMax = state.xMin + rightRatio * (state.xMax - state.xMin);
-  if (nextMax - nextMin < X_SCALE_MIN_SPAN) return false;
-  const selectedMaxY = currentYRange.maxY - topRatio * (currentYRange.maxY - currentYRange.minY);
-  const selectedMinY = currentYRange.maxY - bottomRatio * (currentYRange.maxY - currentYRange.minY);
-  const selectedSpan = selectedMaxY - selectedMinY;
+  const currentYRange = getScaledYRangeForLayout({
+    chart,
+    descriptor,
+    state,
+    plot,
+    yScaleRef,
+    yCenterOffsetRef
+  });
+  const transform = createCoordinateTransform({
+    orientation: descriptor.orientation,
+    categoryRange: { min: state.xMin, max: state.xMax },
+    valueRange: {
+      min: currentYRange.minY,
+      max: currentYRange.maxY
+    },
+    plot
+  });
+  const selected = transform.dataBoundsForRect(rect);
+  if (selected.categoryMax - selected.categoryMin < getMinimumCategorySpan(chart)) {
+    return false;
+  }
+  const selectedSpan = selected.valueMax - selected.valueMin;
   if (!Number.isFinite(selectedSpan) || selectedSpan <= 0) return false;
-  viewStateRef.current.set(chart.id, { xMin: nextMin, xMax: nextMax });
-  const baseYRange = getYRange(chart, nextMin, nextMax, plot.width);
+  viewStateRef.current.set(chart.id, {
+    xMin: selected.categoryMin,
+    xMax: selected.categoryMax
+  });
+  const baseYRange = getYRange(
+    chart,
+    selected.categoryMin,
+    selected.categoryMax,
+    getCategoryPixelLength(chart, plot, descriptor),
+    descriptor
+  );
   const baseSpan = baseYRange.maxY - baseYRange.minY;
   if (Number.isFinite(baseSpan) && baseSpan > 0) {
-    const selectedCenter = (selectedMinY + selectedMaxY) / 2;
+    const selectedCenter = (selected.valueMin + selected.valueMax) / 2;
     const baseCenter = (baseYRange.minY + baseYRange.maxY) / 2;
-    const nextScale = Math.min(
-      Y_SCALE_MAX,
-      Math.max(Y_SCALE_MIN, selectedSpan / baseSpan)
+    yScaleRef.current.set(
+      chart.id,
+      Math.min(
+        Y_SCALE_MAX,
+        Math.max(Y_SCALE_MIN, selectedSpan / baseSpan)
+      )
     );
-    yScaleRef.current.set(chart.id, nextScale);
     yCenterOffsetRef.current.set(chart.id, selectedCenter - baseCenter);
     yManualScaleRef.current.add(chart.id);
   }
   return true;
 };
-var getChartState = (chart, initialVisiblePoints, viewStateRef) => viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
-var getScaledYRangeForLayout = ({
-  chart,
-  state,
-  plot,
-  yScaleRef,
-  yCenterOffsetRef
-}) => applyYScale(
-  getYRange(chart, state.xMin, state.xMax, plot.width),
-  yScaleRef.current.get(chart.id) ?? 1,
-  yCenterOffsetRef.current.get(chart.id) ?? 0
-);
 var screenPointToDataPoint = ({
   point,
   chart,
+  descriptor: suppliedDescriptor,
   plot,
   initialVisiblePoints,
   viewStateRef,
   yScaleRef,
   yCenterOffsetRef
 }) => {
-  const state = getChartState(chart, initialVisiblePoints, viewStateRef);
+  const descriptor = suppliedDescriptor || resolveChartDescriptor(chart);
+  const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
   const yRange = getScaledYRangeForLayout({
     chart,
+    descriptor,
     state,
     plot,
     yScaleRef,
     yCenterOffsetRef
   });
-  const xRatio = (point.x - plot.x) / plot.width;
-  const yRatio = (point.y - plot.y) / plot.height;
-  return {
-    x: state.xMin + xRatio * (state.xMax - state.xMin),
-    y: yRange.maxY - yRatio * (yRange.maxY - yRange.minY)
-  };
-};
-var dataPointToScreenPoint = ({ point, state, yRange, plot }) => {
-  const xRatio = (point.x - state.xMin) / (state.xMax - state.xMin);
-  const yRatio = (yRange.maxY - point.y) / (yRange.maxY - yRange.minY);
-  return {
-    x: plot.x + xRatio * plot.width,
-    y: plot.y + yRatio * plot.height
-  };
+  return createCoordinateTransform({
+    orientation: descriptor.orientation,
+    categoryRange: { min: state.xMin, max: state.xMax },
+    valueRange: { min: yRange.minY, max: yRange.maxY },
+    plot
+  }).screenToData(point);
 };
 var createAxisOverlay = ({
   chart,
+  descriptor,
   plot,
   state,
   yRange,
   seriesEndpoints,
-  seriesOrderByChart = {}
+  seriesOrderByChart
 }) => {
-  const { maxX } = getChartXBounds(chart);
+  const horizontal = descriptor.orientation === "horizontal";
+  const transform = createCoordinateTransform({
+    orientation: descriptor.orientation,
+    categoryRange: { min: state.xMin, max: state.xMax },
+    valueRange: { min: yRange.minY, max: yRange.maxY },
+    plot: { x: 0, y: 0, width: plot.width, height: plot.height }
+  });
   const ticks = Array.from({ length: Y_AXIS_TICK_COUNT }, (_, index) => {
-    const ratio = Y_AXIS_TICK_COUNT === 1 ? 0 : index / (Y_AXIS_TICK_COUNT - 1);
+    const ratio = index / (Y_AXIS_TICK_COUNT - 1);
     const value = yRange.maxY - ratio * (yRange.maxY - yRange.minY);
+    const screen = transform.dataToScreen({
+      x: state.xMin,
+      y: value
+    });
     return {
       id: `${chart.id}-tick-${index}`,
       value,
-      top: ratio * plot.height
+      top: horizontal ? void 0 : screen.y,
+      left: horizontal ? screen.x : void 0
     };
   });
-  const xTicks = Array.from({ length: X_AXIS_TICK_COUNT }, (_, index) => {
-    const ratio = X_AXIS_TICK_COUNT === 1 ? 0 : index / (X_AXIS_TICK_COUNT - 1);
+  const categories = getChartCategories(chart);
+  const visibleCategories = categories.filter(
+    (category) => category.value >= state.xMin && category.value <= state.xMax
+  ).sort((left, right) => left.value - right.value);
+  const categoryPixelLength = horizontal ? plot.height : plot.width;
+  const maximumCategoryLabels = Math.max(
+    1,
+    Math.floor(categoryPixelLength / (horizontal ? 22 : 72))
+  );
+  const categoryLabelStride = Math.max(
+    1,
+    Math.ceil(visibleCategories.length / maximumCategoryLabels)
+  );
+  const displayedCategories = visibleCategories.filter(
+    (_, index) => index % categoryLabelStride === 0 || index === visibleCategories.length - 1
+  );
+  const xTicks = categories.length ? displayedCategories.map((category, index) => {
+    const screen = transform.dataToScreen({
+      x: category.value,
+      y: yRange.minY
+    });
+    return {
+      id: `${chart.id}-category-${index}-${category.value}`,
+      categorical: true,
+      label: category.label,
+      value: category.value,
+      left: horizontal ? void 0 : screen.x,
+      top: horizontal ? screen.y : void 0
+    };
+  }) : Array.from({ length: X_AXIS_TICK_COUNT }, (_, index) => {
+    const ratio = index / (X_AXIS_TICK_COUNT - 1);
     return {
       id: `${chart.id}-x-tick-${index}`,
       value: state.xMin + ratio * (state.xMax - state.xMin),
-      left: 18 + ratio * Math.max(1, plot.width - 36)
+      left: horizontal ? void 0 : 18 + ratio * Math.max(1, plot.width - 36),
+      top: horizontal ? 10 + ratio * Math.max(1, plot.height - 20) : void 0
     };
   });
-  const latestValues = getOrderedSeries(chart, seriesOrderByChart).map((series) => {
-    if (series.length === 0) return null;
+  const latestValues = descriptor.capabilities.latestValue ? getOrderedSeries(chart, seriesOrderByChart).map((series) => {
+    if (!series.length) return null;
     const value = series.rawY[series.length - 1];
     const x = series.rawX[series.length - 1];
     const endpoint = seriesEndpoints.get(series.id) || { x, y: value };
-    const ratio = (yRange.maxY - endpoint.y) / (yRange.maxY - yRange.minY);
-    const xRatio = (endpoint.x - state.xMin) / (state.xMax - state.xMin);
+    const screen = transform.dataToScreen(endpoint);
     return {
       id: series.id,
       color: series.color,
@@ -1111,13 +1940,15 @@ var createAxisOverlay = ({
       value: endpoint.y,
       rawValue: value,
       x,
-      left: xRatio * plot.width,
-      top: ratio * plot.height
+      left: screen.x,
+      top: screen.y
     };
   }).filter(
-    (value) => value && Number.isFinite(value.top) && value.top >= -10 && value.top <= plot.height + 10
-  );
+    (item) => item && Number.isFinite(item.top) && item.top >= -10 && item.top <= plot.height + 10
+  ) : [];
+  const { maxX } = getChartXBounds(chart);
   return {
+    orientation: descriptor.orientation,
     ticks,
     xTicks,
     latestValues,
@@ -1130,20 +1961,16 @@ var drawChartLayouts = ({
   width,
   height,
   gl,
-  program,
-  antialiasProgram,
+  rendererRegistry,
   antialiasLines = false,
   layouts,
   viewStateRef,
   yScaleRef,
   yCenterOffsetRef,
-  seriesBufferCache,
-  antialiasSeriesBufferCache,
   initialVisiblePoints,
   getAppendAnimatedPoint,
-  movingAverageByChart = EMPTY_OBJECT,
-  movingAverageCache,
-  seriesOrderByChart = EMPTY_OBJECT
+  movingAverageByChart,
+  seriesOrderByChart
 }) => {
   const dpr = Math.min(2, window.devicePixelRatio || 1);
   const pixelWidth = Math.max(1, Math.floor(width * dpr));
@@ -1157,50 +1984,12 @@ var drawChartLayouts = ({
   gl.viewport(0, 0, pixelWidth, pixelHeight);
   gl.clearColor(0, 0, 0, 0);
   gl.clear(gl.COLOR_BUFFER_BIT);
-  const activeAntialiasLines = antialiasLines && antialiasProgram;
-  const activeProgram = activeAntialiasLines ? antialiasProgram : program;
-  gl.useProgram(activeProgram);
-  const uResolution = gl.getUniformLocation(activeProgram, "u_resolution");
-  const uRect = gl.getUniformLocation(activeProgram, "u_rect");
-  const uXRange = gl.getUniformLocation(activeProgram, "u_xRange");
-  const uYRange = gl.getUniformLocation(activeProgram, "u_yRange");
-  const uColor = gl.getUniformLocation(activeProgram, "u_color");
-  let aXy = -1;
-  let aStart = -1;
-  let aEnd = -1;
-  let aSide = -1;
-  let aAlong = -1;
-  let uLineHalfWidth = null;
-  let uEdgeWidth = null;
-  if (activeAntialiasLines) {
-    aStart = gl.getAttribLocation(activeProgram, "a_start");
-    aEnd = gl.getAttribLocation(activeProgram, "a_end");
-    aSide = gl.getAttribLocation(activeProgram, "a_side");
-    aAlong = gl.getAttribLocation(activeProgram, "a_along");
-    uLineHalfWidth = gl.getUniformLocation(activeProgram, "u_lineHalfWidth");
-    uEdgeWidth = gl.getUniformLocation(activeProgram, "u_edgeWidth");
-    gl.enableVertexAttribArray(aStart);
-    gl.enableVertexAttribArray(aEnd);
-    gl.enableVertexAttribArray(aSide);
-    gl.enableVertexAttribArray(aAlong);
-    gl.uniform1f(uLineHalfWidth, AA_LINE_WIDTH_PX * dpr / 2);
-    gl.uniform1f(uEdgeWidth, AA_EDGE_WIDTH_PX * dpr);
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  } else {
-    aXy = gl.getAttribLocation(activeProgram, "a_xy");
-    gl.enableVertexAttribArray(aXy);
-    gl.disable(gl.BLEND);
-  }
-  gl.uniform2f(uResolution, pixelWidth, pixelHeight);
   const now = performance.now();
   const nextAxisOverlays = {};
-  layouts.forEach(({ chart, plot, visible }) => {
-    if (!visible) return;
-    if (activeAntialiasLines) {
-      gl.useProgram(activeProgram);
-      gl.uniform2f(uResolution, pixelWidth, pixelHeight);
-    }
+  layouts.forEach((layout) => {
+    if (!layout.visible) return;
+    const { chart, plot } = layout;
+    const descriptor = layout.descriptor || getChartDescriptor(chart);
     const state = viewStateRef.current.get(chart.id) || getInitialView(chart, initialVisiblePoints);
     const scaledPlot = {
       x: plot.x * dpr,
@@ -1208,14 +1997,22 @@ var drawChartLayouts = ({
       width: plot.width * dpr,
       height: plot.height * dpr
     };
+    const categoryPixelLength = getCategoryPixelLength(
+      chart,
+      plot,
+      descriptor
+    );
     const yRange = applyYScale(
-      getYRange(chart, state.xMin, state.xMax, plot.width),
+      getYRange(
+        chart,
+        state.xMin,
+        state.xMax,
+        categoryPixelLength,
+        descriptor
+      ),
       yScaleRef.current.get(chart.id) ?? 1,
       yCenterOffsetRef.current.get(chart.id) ?? 0
     );
-    const seriesEndpoints = /* @__PURE__ */ new Map();
-    const chartMovingAverage = movingAverageByChart?.[chart.id];
-    const hideBaseSeries = Boolean(chartMovingAverage?.enabled) && Boolean(chartMovingAverage?.hideBase);
     gl.enable(gl.SCISSOR_TEST);
     gl.scissor(
       Math.floor(scaledPlot.x),
@@ -1223,208 +2020,42 @@ var drawChartLayouts = ({
       Math.ceil(scaledPlot.width),
       Math.ceil(scaledPlot.height)
     );
-    gl.uniform4f(
-      uRect,
-      scaledPlot.x,
-      scaledPlot.y,
-      scaledPlot.width,
-      scaledPlot.height
-    );
-    gl.uniform2f(uXRange, state.xMin, state.xMax);
-    gl.uniform2f(uYRange, yRange.minY, yRange.maxY);
-    if (!hideBaseSeries) getOrderedSeries(chart, seriesOrderByChart).forEach((series) => {
-      let visiblePoints = series.getVisiblePoints(
-        state.xMin,
-        state.xMax,
-        plot.width
-      );
-      let singlePointEndpoint = null;
-      if (visiblePoints.pointCount < 2) {
-        const singlePointSegment = getSinglePointSegment({
-          series,
-          state,
-          yRange,
-          plot
-        });
-        if (!singlePointSegment) return;
-        visiblePoints = singlePointSegment;
-        singlePointEndpoint = singlePointSegment.endpoint;
-      }
-      const animatedPoint = singlePointEndpoint ? null : getAppendAnimatedPoint({
-        seriesId: series.id,
-        visiblePoints,
-        now
-      });
-      const pointCount = animatedPoint?.pointCount ?? visiblePoints.pointCount;
-      if (animatedPoint) {
-        seriesEndpoints.set(series.id, {
-          x: animatedPoint.x,
-          y: animatedPoint.y
-        });
-      } else if (singlePointEndpoint) {
-        seriesEndpoints.set(series.id, singlePointEndpoint);
-      }
-      const [r, g, b] = hexToRgb(series.color);
-      gl.uniform3f(uColor, r, g, b);
-      if (activeAntialiasLines) {
-        const bufferEntry2 = getAntialiasSeriesBuffer(
-          gl,
-          antialiasSeriesBufferCache,
-          series.id,
-          pointCount
-        );
-        const drawVertexCount = fillAntialiasSeriesSegments({
-          vertices: bufferEntry2.vertices,
-          visiblePoints,
-          pointCount,
-          animatedPoint
-        });
-        const stride = AA_VERTEX_FLOAT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
-        gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry2.buffer);
-        gl.vertexAttribPointer(aStart, 2, gl.FLOAT, false, stride, 0);
-        gl.vertexAttribPointer(
-          aEnd,
-          2,
-          gl.FLOAT,
-          false,
-          stride,
-          2 * Float32Array.BYTES_PER_ELEMENT
-        );
-        gl.vertexAttribPointer(
-          aSide,
-          1,
-          gl.FLOAT,
-          false,
-          stride,
-          4 * Float32Array.BYTES_PER_ELEMENT
-        );
-        gl.vertexAttribPointer(
-          aAlong,
-          1,
-          gl.FLOAT,
-          false,
-          stride,
-          5 * Float32Array.BYTES_PER_ELEMENT
-        );
-        gl.bufferSubData(
-          gl.ARRAY_BUFFER,
-          0,
-          bufferEntry2.vertices,
-          0,
-          drawVertexCount * AA_VERTEX_FLOAT_STRIDE
-        );
-        gl.drawArrays(gl.TRIANGLES, 0, drawVertexCount);
-        return;
-      }
-      const bufferEntry = getSeriesBuffer(
-        gl,
-        seriesBufferCache,
-        series.id,
-        pointCount
-      );
-      fillSeriesPoints({
-        vertices: bufferEntry.vertices,
-        visiblePoints,
-        pointCount,
-        animatedPoint
-      });
-      gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
-      gl.vertexAttribPointer(aXy, 2, gl.FLOAT, false, 0, 0);
-      gl.bufferSubData(
-        gl.ARRAY_BUFFER,
-        0,
-        bufferEntry.vertices,
-        0,
-        pointCount * 2
-      );
-      gl.drawArrays(gl.LINE_STRIP, 0, pointCount);
-    });
-    const movingAverageSeries = getMovingAverageSeriesForChart({
+    const result = rendererRegistry.draw(descriptor.rendererType, {
+      antialiasLines,
+      categoryPixelLength,
       chart,
-      movingAverage: chartMovingAverage,
-      cache: movingAverageCache
-    });
-    const orderedMovingAverageSeries = getOrderedSeries(
-      { ...chart, series: movingAverageSeries },
-      seriesOrderByChart
-    );
-    let maAXy = aXy;
-    let maUColor = uColor;
-    if (movingAverageSeries.length > 0 && activeAntialiasLines) {
-      gl.useProgram(program);
-      const maUResolution = gl.getUniformLocation(program, "u_resolution");
-      const maURect = gl.getUniformLocation(program, "u_rect");
-      const maUXRange = gl.getUniformLocation(program, "u_xRange");
-      const maUYRange = gl.getUniformLocation(program, "u_yRange");
-      maUColor = gl.getUniformLocation(program, "u_color");
-      maAXy = gl.getAttribLocation(program, "a_xy");
-      gl.enableVertexAttribArray(maAXy);
-      gl.uniform2f(maUResolution, pixelWidth, pixelHeight);
-      gl.uniform4f(
-        maURect,
-        scaledPlot.x,
-        scaledPlot.y,
-        scaledPlot.width,
-        scaledPlot.height
-      );
-      gl.uniform2f(maUXRange, state.xMin, state.xMax);
-      gl.uniform2f(maUYRange, yRange.minY, yRange.maxY);
-    }
-    orderedMovingAverageSeries.forEach((series) => {
-      const visiblePoints = series.getVisiblePoints(
-        state.xMin,
-        state.xMax,
-        plot.width
-      );
-      if (visiblePoints.pointCount < 2) return;
-      const pointCount = visiblePoints.pointCount;
-      const [r, g, b] = hexToRgb(series.color);
-      gl.uniform3f(maUColor, r, g, b);
-      const bufferEntry = getSeriesBuffer(
-        gl,
-        seriesBufferCache,
-        series.id,
-        pointCount * 8
-      );
-      const drawVertexCount = fillDashedSeriesSegments({
-        vertices: bufferEntry.vertices,
-        visiblePoints,
-        pointCount,
-        state,
-        yRange,
-        plot
-      });
-      if (drawVertexCount < 2) return;
-      gl.bindBuffer(gl.ARRAY_BUFFER, bufferEntry.buffer);
-      gl.vertexAttribPointer(maAXy, 2, gl.FLOAT, false, 0, 0);
-      gl.bufferSubData(
-        gl.ARRAY_BUFFER,
-        0,
-        bufferEntry.vertices,
-        0,
-        drawVertexCount * 2
-      );
-      gl.drawArrays(gl.LINES, 0, drawVertexCount);
+      descriptor,
+      dpr,
+      getAppendAnimatedPoint,
+      movingAverage: movingAverageByChart?.[chart.id],
+      now,
+      pixelHeight,
+      pixelWidth,
+      plot,
+      scaledPlot,
+      seriesOrderByChart,
+      state,
+      yRange
     });
     nextAxisOverlays[chart.id] = createAxisOverlay({
       chart,
+      descriptor,
       plot,
       state,
       yRange,
-      seriesEndpoints,
+      seriesEndpoints: result?.seriesEndpoints || /* @__PURE__ */ new Map(),
       seriesOrderByChart
     });
     gl.disable(gl.SCISSOR_TEST);
   });
-  if (activeAntialiasLines) {
-    gl.disable(gl.BLEND);
-  }
+  gl.disable(gl.BLEND);
   return nextAxisOverlays;
 };
 
 // src/vanilla/createChartGrid.js
 var BASE_ROOT_CLASSES = ["aliencharts-root", "relative", "h-full", "overflow-y-auto"];
-var EMPTY_OBJECT2 = Object.freeze({});
+var EMPTY_OBJECT = Object.freeze({});
+var controllerIdSequence = 0;
 var DEFAULT_OPTIONS = Object.freeze({
   charts: [],
   columns: 2,
@@ -1439,7 +2070,7 @@ var DEFAULT_OPTIONS = Object.freeze({
   followVisibleLatest: true,
   xAxisLabel: "STEP",
   disableDrawings: false,
-  seriesOrderByChart: EMPTY_OBJECT2,
+  seriesOrderByChart: EMPTY_OBJECT,
   topMarkers: [],
   formatXTick: formatCompactNumber,
   formatXValue: formatNumber,
@@ -1450,6 +2081,13 @@ var APPEND_ANIMATION = Object.freeze({
   maxBucketSize: 64,
   maxRevealPoints: 100
 });
+var POINTER_SCALE_SENSITIVITY = 0.01;
+var WHEEL_SCALE_SENSITIVITY = 1e-3;
+var scaleValueRange = (scale, delta, sensitivity) => clamp(
+  scale * Math.exp(delta * sensitivity),
+  Y_SCALE_MIN,
+  Y_SCALE_MAX
+);
 var escapeHtml = (value) => String(value ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
 var withAlpha = (color, alpha) => {
   const value = String(color || DEFAULT_CHART_BACKGROUND).trim();
@@ -1473,7 +2111,12 @@ var toolbarButton = ({ action, title, icon, hotkey = "", active = false, classNa
     ${icon}
     ${hotkey ? `<span class="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 text-[10px] font-semibold leading-none text-foreground/50">${hotkey}</span>` : ""}
   </button>`;
-var chartCellHtml = (chart, index, backgroundColor) => `
+var chartCellHtml = (chart, descriptor, index, backgroundColor) => {
+  const padding = getPlotPadding(chart, descriptor);
+  const horizontal = descriptor.orientation === "horizontal";
+  const valueAxisStyle = horizontal ? `left:${padding.left}px;right:${padding.right}px;bottom:0;height:${padding.bottom}px;cursor:ew-resize` : `right:0;top:${padding.top}px;bottom:${padding.bottom}px;width:${padding.right}px;cursor:ns-resize`;
+  const categoryAxisStyle = horizontal ? `left:0;top:${padding.top}px;bottom:${padding.bottom}px;width:${padding.left}px;cursor:ns-resize` : `left:${padding.left}px;right:${padding.right}px;bottom:0;height:${padding.bottom}px;cursor:ew-resize`;
+  return `
   <div data-chart-index="${index}" class="relative select-none overflow-hidden rounded-sm" style="height:${CHART_HEIGHT}px;background-color:${escapeHtml(backgroundColor)}">
     <div class="pointer-events-none absolute inset-x-0 top-0 z-10 flex h-8 items-center px-2 backdrop-blur" data-header>
       <div class="flex min-w-0 items-center gap-1 rounded-sm px-1 text-sm font-semibold text-foreground" data-title-wrap>
@@ -1483,25 +2126,19 @@ var chartCellHtml = (chart, index, backgroundColor) => `
     </div>
     <div data-grid-lines class="pointer-events-none absolute text-border/40"></div>
     <div data-latest-lines></div>
-    <div data-y-axis class="absolute right-0 z-20" style="top:${PLOT_PADDING.top}px;bottom:${PLOT_PADDING.bottom}px;width:${RIGHT_AXIS_WIDTH}px;cursor:ns-resize"></div>
-    <div data-x-axis class="absolute bottom-0 z-20" style="left:${PLOT_PADDING.left}px;right:${RIGHT_AXIS_WIDTH}px;height:${PLOT_PADDING.bottom}px;cursor:ew-resize"></div>
+    <div data-y-axis class="absolute z-20" style="${valueAxisStyle}"></div>
+    <div data-x-axis class="absolute z-20" style="${categoryAxisStyle}"></div>
     <div data-toolbar></div>
   </div>`;
+};
 var makeSurface = (canvas, gl) => ({
   canvas,
   gl,
-  program: createProgram(gl),
-  antialiasProgram: createAntialiasProgram(gl),
-  seriesBuffers: createSeriesBufferCache(),
-  antialiasBuffers: createSeriesBufferCache(),
-  movingAverageCache: /* @__PURE__ */ new Map()
+  renderers: createRendererRegistry(gl)
 });
 var destroySurface = (surface) => {
   if (!surface) return;
-  deleteSeriesBuffers(surface.gl, surface.seriesBuffers);
-  deleteSeriesBuffers(surface.gl, surface.antialiasBuffers);
-  surface.gl.deleteProgram(surface.program);
-  surface.gl.deleteProgram(surface.antialiasProgram);
+  surface.renderers.destroy();
   surface.gl.getExtension("WEBGL_lose_context")?.loseContext();
 };
 var AppendAnimator = class {
@@ -1511,29 +2148,33 @@ var AppendAnimator = class {
     this.animations = /* @__PURE__ */ new Map();
     this.frame = null;
   }
-  scan(charts) {
+  scan(charts, descriptors) {
     const now = performance.now();
-    charts.forEach((chart) => chart.series.forEach((series) => {
-      if (!series.length) return;
-      const next = {
-        x: series.rawX[series.length - 1],
-        y: series.rawY[series.length - 1],
-        length: series.length
-      };
-      const previous = this.latest.get(series.id);
-      if (previous && next.x > previous.x) {
-        this.animations.set(series.id, {
-          fromX: previous.x,
-          fromY: previous.y,
-          toX: next.x,
-          toY: next.y,
-          appendedCount: next.length - previous.length,
-          startedAt: now,
-          duration: APPEND_ANIMATION.durationMs
-        });
-      }
-      this.latest.set(series.id, next);
-    }));
+    charts.forEach((chart) => {
+      const descriptor = descriptors.get(chart.id);
+      if (!descriptor?.capabilities.appendAnimation) return;
+      chart.series.forEach((series) => {
+        if (!series.length) return;
+        const next = {
+          x: series.rawX[series.length - 1],
+          y: series.rawY[series.length - 1],
+          length: series.length
+        };
+        const previous = this.latest.get(series.id);
+        if (previous && next.x > previous.x) {
+          this.animations.set(series.id, {
+            fromX: previous.x,
+            fromY: previous.y,
+            toX: next.x,
+            toY: next.y,
+            appendedCount: next.length - previous.length,
+            startedAt: now,
+            duration: APPEND_ANIMATION.durationMs
+          });
+        }
+        this.latest.set(series.id, next);
+      });
+    });
     if (this.animations.size) this.start();
   }
   start() {
@@ -1589,8 +2230,10 @@ var ChartGridController = class {
   constructor(container, options) {
     if (!(container instanceof HTMLElement)) throw new TypeError("createChartGrid requires an HTMLElement target");
     this.container = container;
+    this.controllerId = `aliencharts-${controllerIdSequence += 1}`;
     this.options = { ...DEFAULT_OPTIONS, ...options };
     if (!Array.isArray(this.options.charts)) throw new TypeError("charts must be an array");
+    this.chartDescriptors = resolveChartDescriptors(this.options.charts);
     this.destroyed = false;
     this.frame = null;
     this.structureDirty = true;
@@ -1631,7 +2274,7 @@ var ChartGridController = class {
     this.surface = makeSurface(this.canvas, gl);
     this.fullscreenSurface = null;
     this.animator = new AppendAnimator(() => this.requestRender());
-    this.animator.scan(this.options.charts);
+    this.animator.scan(this.options.charts, this.chartDescriptors);
     this.bound = {
       click: (event) => this.handleClick(event),
       input: (event) => this.handleInput(event),
@@ -1685,8 +2328,16 @@ var ChartGridController = class {
     if (!next || typeof next !== "object") return;
     const previousCharts = this.options.charts;
     const previousActiveDrawingTool = this.activeDrawingTool;
-    this.options = { ...this.options, ...next };
-    if (!Array.isArray(this.options.charts)) throw new TypeError("charts must be an array");
+    const nextOptions = { ...this.options, ...next };
+    if (!Array.isArray(nextOptions.charts)) throw new TypeError("charts must be an array");
+    const nextDescriptors = resolveChartDescriptors(nextOptions.charts);
+    const descriptorLayoutChanged = nextOptions.charts.some((chart) => {
+      const previous = this.chartDescriptors.get(chart.id);
+      const current = nextDescriptors.get(chart.id);
+      return previous?.rendererType !== current?.rendererType || previous?.orientation !== current?.orientation || previous?.categorical !== current?.categorical;
+    });
+    this.options = nextOptions;
+    this.chartDescriptors = nextDescriptors;
     if (hasOwn(next, "drawings")) this.drawings = Array.isArray(next.drawings) ? [...next.drawings] : [];
     if (hasOwn(next, "activeDrawingTool")) {
       this.activeDrawingTool = next.activeDrawingTool ?? null;
@@ -1697,7 +2348,7 @@ var ChartGridController = class {
     }
     if (hasOwn(next, "selectedDrawingId")) this.selectedDrawingId = next.selectedDrawingId ?? null;
     if (hasOwn(next, "movingAverageByChart")) this.movingAverageByChart = { ...next.movingAverageByChart || {} };
-    if (previousCharts !== this.options.charts || hasOwn(next, "columns") || hasOwn(next, "backgroundColor") || hasOwn(next, "gridLines")) this.structureDirty = true;
+    if (previousCharts !== this.options.charts || descriptorLayoutChanged || hasOwn(next, "columns") || hasOwn(next, "backgroundColor") || hasOwn(next, "gridLines")) this.structureDirty = true;
     this.initializeChartState();
     this.requestRender();
   }
@@ -1707,7 +2358,7 @@ var ChartGridController = class {
   invalidate() {
     this.assertAlive();
     this.followAppendedData();
-    this.animator.scan(this.options.charts);
+    this.animator.scan(this.options.charts, this.chartDescriptors);
     this.requestRender();
   }
   followAppendedData() {
@@ -1733,7 +2384,10 @@ var ChartGridController = class {
       const maxX = getChartXBounds(chart).maxX;
       if (!Number.isFinite(maxX)) return;
       const state = this.viewStates.get(chart.id) || getInitialView(chart, this.options.initialVisiblePoints);
-      const span = Math.max(10, state.xMax - state.xMin);
+      const span = Math.max(
+        getMinimumCategorySpan(chart),
+        state.xMax - state.xMin
+      );
       const nextMax = maxX + span * 0.1;
       this.viewStates.set(chart.id, { xMin: nextMax - span, xMax: nextMax });
     });
@@ -1745,7 +2399,12 @@ var ChartGridController = class {
   }
   renderStructure() {
     this.grid.style.gridTemplateColumns = `repeat(${Math.max(1, Number(this.options.columns) || 1)}, minmax(18rem, 1fr))`;
-    this.grid.innerHTML = this.options.charts.map((chart, index) => chartCellHtml(chart, index, this.options.backgroundColor)).join("");
+    this.grid.innerHTML = this.options.charts.map((chart, index) => chartCellHtml(
+      chart,
+      this.chartDescriptors.get(chart.id),
+      index,
+      this.options.backgroundColor
+    )).join("");
     this.chartNodes = [...this.grid.querySelectorAll("[data-chart-index]")];
     this.chartNodes.forEach((node) => {
       node.querySelector("[data-header]").style.backgroundColor = withAlpha(this.options.backgroundColor, 0.82);
@@ -1762,14 +2421,17 @@ var ChartGridController = class {
       const x = rect.left - hostRect.left + host.scrollLeft;
       const y = rect.top - hostRect.top + host.scrollTop;
       const chart = charts[index];
+      const descriptor = this.chartDescriptors.get(chart.id);
+      const padding = getPlotPadding(chart, descriptor);
       const layout = {
         chart,
+        descriptor,
         rect: { x, y, width: rect.width, height: rect.height },
         plot: {
-          x: x + PLOT_PADDING.left,
-          y: y + PLOT_PADDING.top,
-          width: Math.max(1, rect.width - PLOT_PADDING.left - PLOT_PADDING.right),
-          height: Math.max(1, rect.height - PLOT_PADDING.top - PLOT_PADDING.bottom)
+          x: x + padding.left,
+          y: y + padding.top,
+          width: Math.max(1, rect.width - padding.left - padding.right),
+          height: Math.max(1, rect.height - padding.top - padding.bottom)
         },
         visible: fullscreen || rect.bottom >= hostRect.top && rect.top <= hostRect.bottom,
         node,
@@ -1823,72 +2485,85 @@ var ChartGridController = class {
       width: Math.max(1, width),
       height: Math.max(1, height),
       gl: surface.gl,
-      program: surface.program,
-      antialiasProgram: surface.antialiasProgram,
+      rendererRegistry: surface.renderers,
       antialiasLines: this.options.antialiasLines,
       layouts,
       viewStateRef: { current: this.viewStates },
       yScaleRef: { current: this.yScales },
       yCenterOffsetRef: { current: this.yOffsets },
-      seriesBufferCache: surface.seriesBuffers,
-      antialiasSeriesBufferCache: surface.antialiasBuffers,
       initialVisiblePoints: this.options.initialVisiblePoints,
       getAppendAnimatedPoint: (payload) => this.animator.getPoint(payload),
       movingAverageByChart: this.movingAverageByChart,
-      movingAverageCache: surface.movingAverageCache,
       seriesOrderByChart: this.options.seriesOrderByChart
     });
   }
   updateCells(layouts, axes, fullscreen) {
-    layouts.forEach(({ chart, node }) => {
+    layouts.forEach(({ chart, descriptor, node }) => {
       const axis = axes[chart.id];
+      const padding = getPlotPadding(chart, descriptor);
+      const horizontal = axis?.orientation === "horizontal";
       node.querySelector("[data-title-wrap]").classList.toggle("ring-1", this.focusedChartId === chart.id);
       node.querySelector("[data-title-wrap]").classList.toggle("ring-primary/70", this.focusedChartId === chart.id);
       const grid = node.querySelector("[data-grid-lines]");
       const gridOptions = this.options.gridLines === true ? {} : this.options.gridLines || {};
       grid.style.display = this.options.gridLines ? "block" : "none";
       Object.assign(grid.style, {
-        left: `${PLOT_PADDING.left}px`,
-        right: `${PLOT_PADDING.right}px`,
-        top: `${PLOT_PADDING.top}px`,
-        bottom: `${PLOT_PADDING.bottom}px`,
+        left: `${padding.left}px`,
+        right: `${padding.right}px`,
+        top: `${padding.top}px`,
+        bottom: `${padding.bottom}px`,
         backgroundImage: "linear-gradient(to right, transparent calc(100% - 1px), currentColor calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), currentColor calc(100% - 1px))",
         backgroundSize: `${Math.max(8, Number(gridOptions.xSpacing) || 80)}px 100%, 100% ${Math.max(8, Number(gridOptions.ySpacing) || 48)}px`
       });
       const yAxis = node.querySelector("[data-y-axis]");
       yAxis.style.backgroundColor = withAlpha(this.options.backgroundColor, 0.78);
-      yAxis.innerHTML = (axis?.ticks || []).map((tick) => `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="top:${tick.top}px">${escapeHtml(this.options.formatYValue(tick.value))}</div>`).join("") + (axis?.latestValues || []).map((latest) => `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-sm px-1.5 py-0.5 text-center text-[10px] font-bold tabular-nums shadow-sm" style="top:${latest.top}px;background:${latest.color};color:${getTextColor(latest.color)}">${escapeHtml(this.options.formatYValue(latest.value))}</div>`).join("");
+      yAxis.innerHTML = (axis?.ticks || []).map((tick) => horizontal ? `<div class="pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="left:${tick.left}px">${escapeHtml(this.options.formatYValue(tick.value))}</div>` : `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="top:${tick.top}px">${escapeHtml(this.options.formatYValue(tick.value))}</div>`).join("") + (axis?.latestValues || []).map((latest) => `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-sm px-1.5 py-0.5 text-center text-[10px] font-bold tabular-nums shadow-sm" style="top:${latest.top}px;background:${latest.color};color:${getTextColor(latest.color)}">${escapeHtml(this.options.formatYValue(latest.value))}</div>`).join("");
       const xAxis = node.querySelector("[data-x-axis]");
       xAxis.style.backgroundColor = withAlpha(this.options.backgroundColor, 0.7);
-      xAxis.innerHTML = (axis?.xTicks || []).map((tick) => `<div class="pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="left:${tick.left}px">${escapeHtml(this.options.formatXTick(tick.value))}</div>`).join("");
+      xAxis.innerHTML = (axis?.xTicks || []).map((tick) => {
+        const label = tick.categorical ? tick.label : this.options.formatXTick(tick.value);
+        if (horizontal && tick.categorical) {
+          return `<div data-category-label title="${escapeHtml(label)}" class="pointer-events-none absolute inset-x-2 -translate-y-1/2 truncate text-right text-[11px] font-medium text-foreground/70" style="top:${tick.top}px">${escapeHtml(label)}</div>`;
+        }
+        if (tick.categorical) {
+          return `<div data-category-label title="${escapeHtml(label)}" class="pointer-events-none absolute top-1/2 w-24 -translate-x-1/2 -translate-y-1/2 truncate text-center text-[11px] font-medium text-foreground/70" style="left:${tick.left}px">${escapeHtml(label)}</div>`;
+        }
+        return horizontal ? `<div class="pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="top:${tick.top}px">${escapeHtml(label)}</div>` : `<div class="pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70" style="left:${tick.left}px">${escapeHtml(label)}</div>`;
+      }).join("");
       const latestLayer = node.querySelector("[data-latest-lines]");
-      latestLayer.innerHTML = this.options.showLatestValueLine ? (axis?.latestValues || []).filter((item) => item.left >= 0 && item.left <= axis.plotWidth).map((item) => `<div class="pointer-events-none absolute z-10 opacity-70" style="left:${PLOT_PADDING.left + item.left}px;top:${PLOT_PADDING.top + item.top}px;height:1px;width:${Math.max(0, axis.plotWidth - item.left)}px;background-image:repeating-linear-gradient(to right,${item.color} 0 4px,transparent 4px 8px)"></div>`).join("") : "";
+      latestLayer.innerHTML = this.options.showLatestValueLine ? (axis?.latestValues || []).filter((item) => item.left >= 0 && item.left <= axis.plotWidth).map((item) => `<div class="pointer-events-none absolute z-10 opacity-70" style="left:${padding.left + item.left}px;top:${padding.top + item.top}px;height:1px;width:${Math.max(0, axis.plotWidth - item.left)}px;background-image:repeating-linear-gradient(to right,${item.color} 0 4px,transparent 4px 8px)"></div>`).join("") : "";
       this.updateToolbar(node, chart, axis, fullscreen);
     });
   }
   updateToolbar(node, chart, axis, fullscreen) {
     const target = node.querySelector("[data-toolbar]");
     const focused = fullscreen || this.focusedChartId === chart.id;
+    const descriptor = this.chartDescriptors.get(chart.id);
+    const drawingsAvailable = descriptor.capabilities.drawings;
+    const movingAverageAvailable = descriptor.capabilities.movingAverage;
+    const padding = getPlotPadding(chart, descriptor);
     let html = "";
-    if (axis?.showJumpLatest) html += `<button type="button" data-action="jump-latest" aria-label="Jump to latest" class="absolute z-30 inline-flex size-7 items-center justify-center rounded-sm text-foreground hover:bg-accent" style="right:${RIGHT_AXIS_WIDTH + 6}px;bottom:${PLOT_PADDING.bottom + 6}px;background:${withAlpha(this.options.backgroundColor, 0.7)}">${iconSvg("arrowLineRight")}</button>`;
+    if (axis?.showJumpLatest) html += `<button type="button" data-action="jump-latest" aria-label="Jump to latest" class="absolute z-30 inline-flex size-7 items-center justify-center rounded-sm text-foreground hover:bg-accent" style="right:${padding.right + 6}px;bottom:${padding.bottom + 6}px;background:${withAlpha(this.options.backgroundColor, 0.7)}">${iconSvg("arrowLineRight", { className: axis.orientation === "horizontal" ? "rotate-90" : "" })}</button>`;
     if (focused && this.options.showToolbar) {
-      const moving = Boolean(this.movingAverageByChart[chart.id]?.enabled);
+      const moving = movingAverageAvailable && Boolean(this.movingAverageByChart[chart.id]?.enabled);
       const hasDrawings = getDrawingsForChart(this.drawings, chart.id).length > 0;
       html += `<div class="absolute left-2 top-12 z-30 flex flex-col gap-0.5 rounded-sm bg-background/80 pr-3 text-foreground shadow-sm backdrop-blur">`;
       html += toolbarButton({ action: "fullscreen", title: fullscreen ? "Exit fullscreen" : "Maximize chart", hotkey: "F", icon: iconSvg(fullscreen ? "arrowsIn" : "arrowsOut") });
       html += toolbarButton({ action: "reset", title: "Reset chart", hotkey: "R", icon: iconSvg("arrowCounterClockwise") });
       html += toolbarButton({ action: "rectangle-zoom", title: "Rectangle zoom", hotkey: "Z", active: this.rectangleZoomChartId === chart.id, icon: iconSvg("magnifyingGlassPlus") });
-      if (!this.options.disableDrawings && hasDrawings) html += toolbarButton({ action: "clear-drawings", title: "Clear drawings", className: "text-orange-500", icon: iconSvg("broom") });
-      if (!this.options.disableDrawings) {
+      if (drawingsAvailable && !this.options.disableDrawings && hasDrawings) html += toolbarButton({ action: "clear-drawings", title: "Clear drawings", className: "text-orange-500", icon: iconSvg("broom") });
+      if ((drawingsAvailable || movingAverageAvailable) && !this.options.disableDrawings) {
         html += '<div class="my-1 h-px w-full"></div>';
-        html += toolbarButton({ action: "tool-trendline", title: "Draw trendline", hotkey: "T", active: this.activeDrawingTool === "trendline", icon: iconSvg("minus", { className: "-rotate-45" }) });
-        html += toolbarButton({ action: "tool-hline", title: "Draw horizontal line", hotkey: "H", active: this.activeDrawingTool === "hline", icon: iconSvg("minus") });
-        html += toolbarButton({ action: "tool-vline", title: "Draw vertical line", hotkey: "V", active: this.activeDrawingTool === "vline", icon: iconSvg("minus", { className: "rotate-90" }) });
-        html += toolbarButton({ action: "tool-pin", title: "Place pin", hotkey: "P", active: this.activeDrawingTool === "pin", icon: iconSvg("mapPin") });
-        html += toolbarButton({ action: "moving-average", title: "Toggle moving average", hotkey: "M", active: moving, icon: iconSvg("waveSine") });
+        if (drawingsAvailable) {
+          html += toolbarButton({ action: "tool-trendline", title: "Draw trendline", hotkey: "T", active: this.activeDrawingTool === "trendline", icon: iconSvg("minus", { className: "-rotate-45" }) });
+          html += toolbarButton({ action: "tool-hline", title: "Draw horizontal line", hotkey: "H", active: this.activeDrawingTool === "hline", icon: iconSvg("minus") });
+          html += toolbarButton({ action: "tool-vline", title: "Draw vertical line", hotkey: "V", active: this.activeDrawingTool === "vline", icon: iconSvg("minus", { className: "rotate-90" }) });
+          html += toolbarButton({ action: "tool-pin", title: "Place pin", hotkey: "P", active: this.activeDrawingTool === "pin", icon: iconSvg("mapPin") });
+        }
+        if (movingAverageAvailable) html += toolbarButton({ action: "moving-average", title: "Toggle moving average", hotkey: "M", active: moving, icon: iconSvg("waveSine") });
       }
       html += "</div>";
-      if (!this.options.disableDrawings && moving) html += this.movingAverageOptionsHtml(chart);
+      if (movingAverageAvailable && !this.options.disableDrawings && moving) html += this.movingAverageOptionsHtml(chart);
     }
     target.innerHTML = html;
   }
@@ -1916,21 +2591,35 @@ var ChartGridController = class {
   drawingOverlayHtml(layouts) {
     const drawings = this.draftDrawing ? [...this.drawings, this.draftDrawing] : this.drawings;
     if (!drawings.length) return "";
-    const body = layouts.flatMap((layout) => getDrawingsForChart(drawings, layout.chart.id).map((drawing) => {
-      const geometry = getDrawingGeometry({ drawing, layout, projectPoint: (point) => this.projectPoint(point, layout) });
-      if (!geometry) return "";
-      const selected = drawing.id === this.selectedDrawingId || drawing.id === "__draft__";
-      if (drawing.type === "pin") {
-        const text = escapeHtml(geometry.style.text?.trim() || "");
-        return `<g opacity="${drawing.id === "__draft__" ? 0.72 : 1}"><g transform="translate(${geometry.start.x} ${geometry.start.y})"><path d="M0 -11 C-6 -11 -10 -6 -10 -1 C-10 6 -2 12 0 15 C2 12 10 6 10 -1 C10 -6 6 -11 0 -11 Z" fill="${geometry.style.color}" stroke="var(--background,#fff)" stroke-width="1.5"/><circle cy="-2" r="3" fill="var(--background,#fff)"/></g>${text ? `<text x="${geometry.start.x + 14}" y="${geometry.start.y}" fill="${geometry.style.color}" stroke="var(--background,#fff)" stroke-width="3" paint-order="stroke" font-size="12" font-weight="600">${text}</text>` : ""}${selected ? `<circle cx="${geometry.start.x}" cy="${geometry.start.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>` : ""}</g>`;
-      }
-      return `<g><line data-drawing-line x1="${geometry.lineStart.x}" y1="${geometry.lineStart.y}" x2="${geometry.lineEnd.x}" y2="${geometry.lineEnd.y}" stroke="${geometry.style.color}" stroke-width="${geometry.style.lineWidth}" stroke-dasharray="${geometry.style.dashPattern.join(" ")}" opacity="${drawing.id === "__draft__" ? 0.72 : 1}"/>${selected ? `<circle data-drawing-anchor="start" cx="${geometry.start.x}" cy="${geometry.start.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>${drawing.type === "trendline" ? `<circle data-drawing-anchor="end" cx="${geometry.end.x}" cy="${geometry.end.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>` : ""}` : ""}</g>`;
-    })).join("");
-    return `<svg class="pointer-events-none absolute left-0 top-0 z-20 block overflow-visible" style="width:100%;height:100%">${body}</svg>`;
+    const drawableLayouts = layouts.map((layout, index) => ({
+      layout,
+      index,
+      drawings: layout.descriptor.capabilities.drawings ? getDrawingsForChart(drawings, layout.chart.id) : []
+    })).filter((entry) => entry.drawings.length > 0);
+    if (!drawableLayouts.length) return "";
+    const definitions = drawableLayouts.map(({ layout, index }) => {
+      const clipId = `${this.controllerId}-drawing-clip-${layout.fullscreen ? "fullscreen" : "grid"}-${index}`;
+      return `<clipPath id="${clipId}"><rect data-drawing-clip="${escapeHtml(layout.chart.id)}" x="${layout.plot.x}" y="${layout.plot.y}" width="${layout.plot.width}" height="${layout.plot.height}"/></clipPath>`;
+    }).join("");
+    const body = drawableLayouts.map(({ layout, index, drawings: chartDrawings }) => {
+      const clipId = `${this.controllerId}-drawing-clip-${layout.fullscreen ? "fullscreen" : "grid"}-${index}`;
+      const chartBody = chartDrawings.map((drawing) => {
+        const geometry = getDrawingGeometry({ drawing, layout, projectPoint: (point) => this.projectPoint(point, layout) });
+        if (!geometry) return "";
+        const selected = drawing.id === this.selectedDrawingId || drawing.id === "__draft__";
+        if (drawing.type === "pin") {
+          const text = escapeHtml(geometry.style.text?.trim() || "");
+          return `<g opacity="${drawing.id === "__draft__" ? 0.72 : 1}"><g transform="translate(${geometry.start.x} ${geometry.start.y})"><path d="M0 -11 C-6 -11 -10 -6 -10 -1 C-10 6 -2 12 0 15 C2 12 10 6 10 -1 C10 -6 6 -11 0 -11 Z" fill="${geometry.style.color}" stroke="var(--background,#fff)" stroke-width="1.5"/><circle cy="-2" r="3" fill="var(--background,#fff)"/></g>${text ? `<text x="${geometry.start.x + 14}" y="${geometry.start.y}" fill="${geometry.style.color}" stroke="var(--background,#fff)" stroke-width="3" paint-order="stroke" font-size="12" font-weight="600">${text}</text>` : ""}${selected ? `<circle cx="${geometry.start.x}" cy="${geometry.start.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>` : ""}</g>`;
+        }
+        return `<g><line data-drawing-line x1="${geometry.lineStart.x}" y1="${geometry.lineStart.y}" x2="${geometry.lineEnd.x}" y2="${geometry.lineEnd.y}" stroke="${geometry.style.color}" stroke-width="${geometry.style.lineWidth}" stroke-dasharray="${geometry.style.dashPattern.join(" ")}" opacity="${drawing.id === "__draft__" ? 0.72 : 1}"/>${selected ? `<circle data-drawing-anchor="start" cx="${geometry.start.x}" cy="${geometry.start.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>${drawing.type === "trendline" ? `<circle data-drawing-anchor="end" cx="${geometry.end.x}" cy="${geometry.end.y}" r="4" fill="${geometry.style.color}" stroke="var(--background,#fff)"/>` : ""}` : ""}</g>`;
+      }).join("");
+      return `<g data-drawing-chart="${escapeHtml(layout.chart.id)}" clip-path="url(#${clipId})">${chartBody}</g>`;
+    }).join("");
+    return `<svg class="pointer-events-none absolute left-0 top-0 z-20 block overflow-visible" style="width:100%;height:100%"><defs>${definitions}</defs>${body}</svg>`;
   }
   topMarkersHtml(layouts) {
     if (!this.options.topMarkers?.length) return "";
-    return layouts.flatMap((layout) => this.options.topMarkers.map((marker, markerIndex) => {
+    return layouts.flatMap((layout) => !layout.descriptor.capabilities.markers ? [] : this.options.topMarkers.map((marker, markerIndex) => {
       const value = Number(marker.x ?? marker.step);
       const state = this.viewStates.get(layout.chart.id);
       const ratio = (value - state.xMin) / (state.xMax - state.xMin);
@@ -1941,9 +2630,13 @@ var ChartGridController = class {
   crosshairHtml() {
     const crosshair = this.options.showTooltips ? this.crosshair : null;
     if (!crosshair) return "";
+    const chart = this.options.charts.find(
+      (item) => item.id === crosshair.chartId
+    );
+    const xAxisLabel = chart?.xAxisLabel ?? this.options.xAxisLabel;
     return `<div class="pointer-events-none absolute z-20 border-l border-foreground/40" style="left:${crosshair.x}px;top:0;height:100%"></div><div class="pointer-events-none absolute z-20 border-t border-foreground/40" style="top:${crosshair.y}px;left:0;width:100%"></div>
       ${crosshair.points.map((point) => `<div class="pointer-events-none absolute z-30 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background" style="left:${point.x}px;top:${point.y}px;background:${point.color}"></div>`).join("")}
-      <div data-crosshair-tooltip class="pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border/70 bg-popover/80 px-2 py-1.5 text-xs text-popover-foreground shadow-sm backdrop-blur-sm" style="left:${crosshair.tooltipX}px;top:${crosshair.tooltipY}px"><div class="mb-1 font-medium">${escapeHtml(this.options.xAxisLabel)}: ${escapeHtml(this.options.formatXValue(crosshair.xValue))}</div>${crosshair.points.map((point) => `<div class="grid grid-cols-[auto_1fr] gap-x-2"><span class="mt-1 size-2 rounded-full" style="background:${point.color}"></span><div class="min-w-0"><div class="truncate text-muted-foreground">${escapeHtml(point.name)}</div><div class="tabular-nums">${escapeHtml(this.options.formatYValue(point.yValue))}</div></div></div>`).join("")}</div>`;
+      <div data-crosshair-tooltip class="pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border/70 bg-popover/80 px-2 py-1.5 text-xs text-popover-foreground shadow-sm backdrop-blur-sm" style="left:${crosshair.tooltipX}px;top:${crosshair.tooltipY}px"><div class="mb-1 font-medium">${escapeHtml(xAxisLabel)}: ${escapeHtml(crosshair.categoryLabel ?? this.options.formatXValue(crosshair.xValue))}</div>${crosshair.points.map((point) => `<div class="grid grid-cols-[auto_1fr] gap-x-2"><span class="mt-1 size-2 rounded-full" style="background:${point.color}"></span><div class="min-w-0"><div class="truncate text-muted-foreground">${escapeHtml(point.name)}</div><div class="tabular-nums">${escapeHtml(this.options.formatYValue(point.yValue))}</div></div></div>`).join("")}</div>`;
   }
   rectangleOverlayHtml() {
     const rect = this.rectangleZoomRect && normalizeRect(this.rectangleZoomRect.start, this.rectangleZoomRect.end);
@@ -1953,7 +2646,7 @@ var ChartGridController = class {
     const drawing = this.drawings.find((item) => item.id === this.selectedDrawingId);
     if (!drawing) return "";
     const layout = layouts.find((item) => item.chart.id === drawing.chartId);
-    if (!layout) return "";
+    if (!layout || !layout.descriptor.capabilities.drawings) return "";
     const style = drawing.style || {};
     const canExtend = drawing.type === "trendline" || drawing.type === "hline";
     const canText = drawing.type === "pin";
@@ -1969,8 +2662,33 @@ var ChartGridController = class {
   }
   projectPoint(point, layout) {
     const state = this.viewStates.get(layout.chart.id);
-    const range = applyYScale(getYRange(layout.chart, state.xMin, state.xMax, layout.plot.width), this.yScales.get(layout.chart.id), this.yOffsets.get(layout.chart.id));
-    return dataPointToScreenPoint({ point, state, yRange: range, plot: layout.plot });
+    const range = this.getRange(layout, state);
+    return this.getTransform(layout, state, range).dataToScreen(point);
+  }
+  getRange(layout, state = this.viewStates.get(layout.chart.id)) {
+    return applyYScale(
+      getYRange(
+        layout.chart,
+        state.xMin,
+        state.xMax,
+        getCategoryPixelLength(
+          layout.chart,
+          layout.plot,
+          layout.descriptor
+        ),
+        layout.descriptor
+      ),
+      this.yScales.get(layout.chart.id),
+      this.yOffsets.get(layout.chart.id)
+    );
+  }
+  getTransform(layout, state, range) {
+    return createCoordinateTransform({
+      orientation: layout.descriptor.orientation,
+      categoryRange: { min: state.xMin, max: state.xMax },
+      valueRange: { min: range.minY, max: range.maxY },
+      plot: layout.plot
+    });
   }
   pointForEvent(event, host) {
     const rect = host.getBoundingClientRect();
@@ -2065,8 +2783,8 @@ var ChartGridController = class {
     this.activePointerContext = context;
     this.focusedChartId = layout.chart.id;
     const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
-    if (inPlot && this.activeDrawingTool && !this.options.disableDrawings) {
-      const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+    if (inPlot && this.activeDrawingTool && !this.options.disableDrawings && layout.descriptor.capabilities.drawings) {
+      const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
       if (["hline", "vline", "pin"].includes(this.activeDrawingTool)) {
         this.commitDrawing(layout.chart.id, this.activeDrawingTool, dataPoint, dataPoint);
       } else if (this.drawingSession?.chartId === layout.chart.id) {
@@ -2079,7 +2797,7 @@ var ChartGridController = class {
       this.drag = { type: "rectangle", layout, start: point };
       this.rectangleZoomRect = { start: point, end: point };
     } else if (inPlot) {
-      const hit = this.hitDrawing(point, layout);
+      const hit = layout.descriptor.capabilities.drawings ? this.hitDrawing(point, layout) : null;
       if (hit) {
         this.selectedDrawingId = hit.drawing.id;
         this.emit("onSelectedDrawingIdChange", hit.drawing.id);
@@ -2091,9 +2809,13 @@ var ChartGridController = class {
         this.emit("onSelectedDrawingIdChange", null);
         this.drag = { type: "pan", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) }, yOffset: this.yOffsets.get(layout.chart.id) || 0 };
       }
-    } else if (point.x >= layout.plot.x + layout.plot.width) {
+    } else if (layout.descriptor.orientation === "vertical" && point.x >= layout.plot.x + layout.plot.width) {
+      this.drag = { type: "y-scale", layout, start: point, scale: this.yScales.get(layout.chart.id) || 1 };
+    } else if (layout.descriptor.orientation === "horizontal" && point.y >= layout.plot.y + layout.plot.height) {
       this.drag = { type: "y-scale", layout, start: point, scale: this.yScales.get(layout.chart.id) || 1 };
-    } else if (point.y >= layout.plot.y + layout.plot.height) {
+    } else if (layout.descriptor.orientation === "vertical" && point.y >= layout.plot.y + layout.plot.height) {
+      this.drag = { type: "x-scale", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) } };
+    } else if (layout.descriptor.orientation === "horizontal" && point.x <= layout.plot.x) {
       this.drag = { type: "x-scale", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) } };
     }
     context.host.setPointerCapture?.(event.pointerId);
@@ -2107,15 +2829,15 @@ var ChartGridController = class {
     const { layout, point } = context;
     if (this.drawingSession) {
       if (layout.chart.id !== this.drawingSession.chartId) return;
-      const end = screenPointToDataPoint({ point, chart: layout.chart, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+      const end = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
       this.draftDrawing = createDraftDrawing({ ...this.drawingSession, end });
       this.requestRender();
       return;
     }
     if (this.drag) {
-      const { chart, plot } = this.drag.layout;
+      const { chart, descriptor, plot } = this.drag.layout;
       if (this.drag.type === "drawing-edit") {
-        const dataPoint = screenPointToDataPoint({ point, chart, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+        const dataPoint = screenPointToDataPoint({ point, chart, descriptor, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
         const next = updateDrawingById(this.drawings, this.drag.drawingId, (drawing) => {
           if (drawing.type === "hline") {
             const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
@@ -2134,21 +2856,73 @@ var ChartGridController = class {
       if (this.drag.type === "rectangle") this.rectangleZoomRect = { start: this.drag.start, end: point };
       if (this.drag.type === "pan") {
         const span = this.drag.state.xMax - this.drag.state.xMin;
-        const deltaX = (point.x - this.drag.start.x) / plot.width * span;
-        const baseRange = getYRange(chart, this.drag.state.xMin, this.drag.state.xMax, plot.width);
+        const baseRange = getYRange(
+          chart,
+          this.drag.state.xMin,
+          this.drag.state.xMax,
+          getCategoryPixelLength(chart, plot, descriptor),
+          descriptor
+        );
         const rangeSpan = (baseRange.maxY - baseRange.minY) * (this.yScales.get(chart.id) || 1);
-        const deltaY = (point.y - this.drag.start.y) / plot.height * rangeSpan;
-        this.viewStates.set(chart.id, { xMin: this.drag.state.xMin - deltaX, xMax: this.drag.state.xMax - deltaX });
-        this.yOffsets.set(chart.id, this.drag.yOffset + deltaY);
+        const transform = createCoordinateTransform({
+          orientation: descriptor.orientation,
+          categoryRange: {
+            min: this.drag.state.xMin,
+            max: this.drag.state.xMax
+          },
+          valueRange: { min: 0, max: rangeSpan },
+          plot
+        });
+        const categoryDelta = transform.categoryDragDelta(
+          this.drag.start,
+          point
+        );
+        const valueDelta = transform.valueOffsetDelta(
+          this.drag.start,
+          point
+        );
+        this.viewStates.set(chart.id, { xMin: this.drag.state.xMin - categoryDelta, xMax: this.drag.state.xMax - categoryDelta });
+        this.yOffsets.set(chart.id, this.drag.yOffset + valueDelta);
+      }
+      if (this.drag.type === "y-scale") {
+        const transform = createCoordinateTransform({
+          orientation: descriptor.orientation,
+          categoryRange: { min: 0, max: 1 },
+          valueRange: { min: 0, max: 1 },
+          plot
+        });
+        const delta = transform.valueScaleDelta(this.drag.start, point);
+        this.yScales.set(
+          chart.id,
+          scaleValueRange(
+            this.drag.scale,
+            delta,
+            POINTER_SCALE_SENSITIVITY
+          )
+        );
       }
-      if (this.drag.type === "y-scale") this.yScales.set(chart.id, clamp(this.drag.scale * Math.exp((point.y - this.drag.start.y) * 0.01), Y_SCALE_MIN, Y_SCALE_MAX));
       if (this.drag.type === "x-scale") {
         const center = (this.drag.state.xMin + this.drag.state.xMax) / 2;
-        const span = clamp((this.drag.state.xMax - this.drag.state.xMin) * Math.exp((point.x - this.drag.start.x) * 0.01), X_SCALE_MIN_SPAN, X_SCALE_MAX_SPAN);
+        const transform = createCoordinateTransform({
+          orientation: descriptor.orientation,
+          categoryRange: { min: 0, max: 1 },
+          valueRange: { min: 0, max: 1 },
+          plot
+        });
+        const delta = transform.categoryScaleDelta(this.drag.start, point);
+        const span = clamp(
+          (this.drag.state.xMax - this.drag.state.xMin) * Math.exp(delta * 0.01),
+          getMinimumCategorySpan(chart),
+          X_SCALE_MAX_SPAN
+        );
         this.viewStates.set(chart.id, { xMin: center - span / 2, xMax: center + span / 2 });
       }
-      if (this.drag.type === "pan") this.updateCrosshair(point, layout);
-      else this.requestRender();
+      if (this.drag.type === "pan") {
+        this.updateCrosshair(point, layout);
+        this.requestRender();
+      } else {
+        this.requestRender();
+      }
       return;
     }
     this.updateCrosshair(point, layout, context.fullscreen);
@@ -2162,6 +2936,7 @@ var ChartGridController = class {
         const layout = this.drag.layout;
         applyRectangleZoom({
           chart: layout.chart,
+          descriptor: layout.descriptor,
           plot: layout.plot,
           start: this.rectangleZoomRect.start,
           end: this.rectangleZoomRect.end,
@@ -2188,11 +2963,34 @@ var ChartGridController = class {
     const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
     if (!inPlot) return;
     event.preventDefault();
+    if (event.shiftKey) {
+      const wheelDelta = event.deltaY || event.deltaX;
+      const currentScale = this.yScales.get(layout.chart.id) || 1;
+      this.yScales.set(
+        layout.chart.id,
+        scaleValueRange(
+          currentScale,
+          wheelDelta,
+          WHEEL_SCALE_SENSITIVITY
+        )
+      );
+      this.requestRender();
+      return;
+    }
     const state = this.viewStates.get(layout.chart.id);
-    const ratio = clamp((point.x - layout.plot.x) / layout.plot.width, 0, 1);
+    const range = this.getRange(layout, state);
+    const ratio = clamp(
+      this.getTransform(layout, state, range).categoryRatio(point),
+      0,
+      1
+    );
     const anchor = state.xMin + ratio * (state.xMax - state.xMin);
     const zoom = Math.exp(event.deltaY * 1e-3);
-    const span = clamp((state.xMax - state.xMin) * zoom, X_SCALE_MIN_SPAN, X_SCALE_MAX_SPAN);
+    const span = clamp(
+      (state.xMax - state.xMin) * zoom,
+      getMinimumCategorySpan(layout.chart),
+      X_SCALE_MAX_SPAN
+    );
     this.viewStates.set(layout.chart.id, { xMin: anchor - ratio * span, xMax: anchor + (1 - ratio) * span });
     this.requestRender();
   }
@@ -2202,32 +3000,55 @@ var ChartGridController = class {
     event.preventDefault();
     const { layout, point } = context;
     const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
-    const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
+    const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
     this.options.onChartContextMenu({ chart: layout.chart, event, point: data });
   }
   updateCrosshair(point, layout) {
     const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
     if (!inPlot || !this.options.showTooltips) return this.clearCrosshair();
     const state = this.viewStates.get(layout.chart.id);
-    const xValue = state.xMin + (point.x - layout.plot.x) / layout.plot.width * (state.xMax - state.xMin);
-    const range = applyYScale(getYRange(layout.chart, state.xMin, state.xMax, layout.plot.width), this.yScales.get(layout.chart.id), this.yOffsets.get(layout.chart.id));
-    const points = layout.chart.series.map((series) => {
-      const visible = series.getVisiblePoints(state.xMin, state.xMax, layout.plot.width);
+    const orientation = layout.descriptor.orientation;
+    const range = this.getRange(layout, state);
+    const transform = this.getTransform(layout, state, range);
+    const xValue = transform.screenToData(point).x;
+    const tooltipSeries = getOrderedSeries(
+      layout.chart,
+      this.options.seriesOrderByChart
+    );
+    const points = tooltipSeries.map((series, seriesIndex) => {
+      const visible = series.getVisiblePoints(state.xMin, state.xMax, transform.categoryPixelLength);
       if (!visible.pointCount) return null;
       const index = getNearestPointIndex(visible.x, xValue);
-      const data = { x: visible.x[index], y: visible.y[index] };
-      const screen = dataPointToScreenPoint({ point: data, state, yRange: range, plot: layout.plot });
-      return { id: series.id, name: series.name, color: series.color, x: screen.x, y: screen.y, xValue: data.x, yValue: data.y };
+      const category = this.surface.renderers.getTooltipCategory(
+        layout.descriptor.rendererType,
+        {
+          visiblePoints: visible,
+          pointIndex: index,
+          seriesIndex,
+          seriesCount: tooltipSeries.length,
+          categoryMin: state.xMin,
+          categoryMax: state.xMax
+        }
+      );
+      const data = { x: category, y: visible.y[index] };
+      const screen = transform.dataToScreen(data);
+      return { id: series.id, name: series.name, color: series.color, x: screen.x, y: screen.y, xValue: visible.x[index], yValue: data.y };
     }).filter(Boolean);
     if (!points.length) return this.clearCrosshair();
-    const nearest = points.reduce((best, item) => Math.abs(item.x - point.x) < Math.abs(best.x - point.x) ? item : best);
+    const nearest = points.reduce((best, item) => {
+      const itemDistance = orientation === "horizontal" ? Math.abs(item.y - point.y) : Math.abs(item.x - point.x);
+      const bestDistance = orientation === "horizontal" ? Math.abs(best.y - point.y) : Math.abs(best.x - point.x);
+      return itemDistance < bestDistance ? item : best;
+    });
     this.crosshair = {
+      chartId: layout.chart.id,
       x: point.x,
       y: point.y,
       xValue: nearest.xValue,
+      categoryLabel: getCategoryLabel(layout.chart, nearest.xValue),
       points,
       tooltipX: point.x + 232 > layout.rect.x + layout.rect.width ? point.x - 232 : point.x + 12,
-      tooltipY: clamp(point.y + 12, layout.rect.y + PLOT_PADDING.top, layout.rect.y + layout.rect.height - 96)
+      tooltipY: clamp(point.y + 12, layout.plot.y, layout.rect.y + layout.rect.height - 96)
     };
     this.requestRender();
   }
@@ -2273,6 +3094,8 @@ var ChartGridController = class {
   }
   toggleMovingAverage(chartId) {
     if (!chartId || this.options.disableDrawings) return;
+    const chart = this.options.charts.find((item) => item.id === chartId);
+    if (!chart || !this.chartDescriptors.get(chartId)?.capabilities.movingAverage) return;
     const current = this.movingAverageByChart[chartId] || { period: 21, type: "ema", hideBase: false };
     this.movingAverageByChart = { ...this.movingAverageByChart, [chartId]: { ...current, enabled: !current.enabled } };
     this.emit("onMovingAverageToggle", chartId);
@@ -2300,7 +3123,7 @@ var ChartGridController = class {
     const overlay = document.createElement("div");
     overlay.dataset.alienchartsFullscreen = "";
     overlay.className = "aliencharts-root fixed inset-0 z-[60] bg-background p-2";
-    overlay.innerHTML = `<canvas class="pointer-events-none absolute left-0 top-0 z-10 block"></canvas><div data-fullscreen-cell>${chartCellHtml(chart, 0, this.options.backgroundColor)}</div><div data-fullscreen-overlays class="pointer-events-none absolute left-0 top-0 z-20" style="width:100%;height:100%"></div>`;
+    overlay.innerHTML = `<canvas class="pointer-events-none absolute left-0 top-0 z-10 block"></canvas><div data-fullscreen-cell>${chartCellHtml(chart, this.chartDescriptors.get(chart.id), 0, this.options.backgroundColor)}</div><div data-fullscreen-overlays class="pointer-events-none absolute left-0 top-0 z-20" style="width:100%;height:100%"></div>`;
     document.body.append(overlay);
     this.fullscreenOverlay = overlay;
     this.fullscreenNode = overlay.querySelector("[data-chart-index]");
@@ -2338,6 +3161,8 @@ var ChartGridController = class {
     const editable = event.target instanceof HTMLElement && (event.target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(event.target.tagName));
     if (editable) return;
     const chartId = this.fullscreenChartId || this.focusedChartId;
+    const chart = this.options.charts.find((item) => item.id === chartId);
+    const capabilities = chart && this.chartDescriptors.get(chartId)?.capabilities;
     const key = event.key.toLowerCase();
     if (["arrowleft", "arrowright", "arrowup", "arrowdown"].includes(key) && !this.fullscreenChartId) {
       this.moveFocus(key.replace("arrow", ""));
@@ -2351,10 +3176,10 @@ var ChartGridController = class {
       this.rectangleZoomChartId = this.rectangleZoomChartId === chartId ? null : chartId;
       event.preventDefault();
       this.requestRender();
-    } else if (key === "m") {
+    } else if (key === "m" && capabilities?.movingAverage) {
       this.toggleMovingAverage(chartId);
       event.preventDefault();
-    } else if (["t", "h", "v", "p"].includes(key)) {
+    } else if (["t", "h", "v", "p"].includes(key) && capabilities?.drawings) {
       this.toggleDrawingTool({ t: "trendline", h: "hline", v: "vline", p: "pin" }[key]);
       event.preventDefault();
     } else if ((key === "delete" || key === "backspace") && this.selectedDrawingId) {
@@ -2502,7 +3327,7 @@ var makeSeries = ({ chartIndex, seriesIndex, pointCount }) => {
     value += Math.sin(i * waveA + chartIndex) * amplitudeA + Math.cos(i * waveB + seriesIndex) * amplitudeB + Math.sin(i * waveC) * amplitudeA * 0.35 + trend + (random() - 0.5) * noise + spike;
     y[i] = value;
   }
-  return createSeries({
+  return createLineSeries({
     id: `chart-${chartIndex}-series-${seriesIndex}`,
     name: `Run ${seriesIndex + 1}`,
     color: palette[(chartIndex + seriesIndex) % palette.length],
@@ -2525,8 +3350,11 @@ var createMockCharts = ({
   }));
 };
 export {
+  BarSeries,
   ChartGrid,
   LineSeries,
+  createBarSeries,
+  createLineSeries,
   createMockCharts,
   createSeries
 };