hyperprop-charting-library 0.1.127 → 0.1.128

package/dist/hyperprop-charting-library.js

@@ -189,6 +189,11 @@ var DEFAULT_OPTIONS = {
   tickSize: 0,
   candleColorMode: "openClose",
   candleColorEpsilon: -1,
+  chartType: "candles",
+  lineColor: "#2962ff",
+  lineWidth: 2,
+  areaFillOpacity: 0.12,
+  baselinePrice: null,
   // 0 = deterministic scale (lightweight-charts behavior): the y-range is a
   // pure function of the visible data, so it can never drift or "breathe".
   // Values > 0 re-enable eased contraction for hosts that prefer it.
@@ -597,6 +602,79 @@ var withCachedSeries = (key, data, compute) => {
   builtInSeriesCache.set(key, { fingerprint, values });
   return values;
 };
+var builtInComputationCache = /* @__PURE__ */ new Map();
+var withCachedComputation = (key, data, compute) => {
+  const fingerprint = getSeriesFingerprint(data);
+  const existing = builtInComputationCache.get(key);
+  if (existing && existing.fingerprint === fingerprint) {
+    return existing.value;
+  }
+  const value = compute();
+  builtInComputationCache.set(key, { fingerprint, value });
+  return value;
+};
+var rollingExtremeSeries = (values, length, mode) => {
+  const count = values.length;
+  const result = new Array(count).fill(null);
+  const deque = [];
+  const better = (a, b) => mode === "max" ? a >= b : a <= b;
+  for (let i = 0; i < count; i += 1) {
+    const value = values[i];
+    while (deque.length > 0 && better(value, values[deque[deque.length - 1]])) {
+      deque.pop();
+    }
+    deque.push(i);
+    if (deque[0] <= i - length) {
+      deque.shift();
+    }
+    if (i >= length - 1) {
+      result[i] = values[deque[0]];
+    }
+  }
+  return result;
+};
+var smaFromValues = (values, length) => {
+  const result = new Array(values.length).fill(null);
+  let sum = 0;
+  let valid = 0;
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    if (value != null && Number.isFinite(value)) {
+      sum += value;
+      valid += 1;
+    } else {
+      sum = 0;
+      valid = 0;
+      continue;
+    }
+    if (valid > length) {
+      sum -= values[i - length];
+      valid = length;
+    }
+    if (valid === length) {
+      result[i] = sum / length;
+    }
+  }
+  return result;
+};
+var emaFromValues = (values, length) => {
+  const result = new Array(values.length).fill(null);
+  const alpha = 2 / (length + 1);
+  let prev = null;
+  let seen = 0;
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    if (value == null || !Number.isFinite(value)) {
+      continue;
+    }
+    prev = prev === null ? value : alpha * value + (1 - alpha) * prev;
+    seen += 1;
+    if (seen >= length) {
+      result[i] = prev;
+    }
+  }
+  return result;
+};
 var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   if (!renderContext.yFromPrice) return;
   const yFromPrice = renderContext.yFromPrice;
@@ -1142,6 +1220,960 @@ var BUILTIN_RSI_INDICATOR = {
     );
   }
 };
+var rmaFromValues = (values, length) => {
+  const result = new Array(values.length).fill(null);
+  let prev = null;
+  let seedSum = 0;
+  let seedCount = 0;
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    if (value == null || !Number.isFinite(value)) continue;
+    if (prev === null) {
+      seedSum += value;
+      seedCount += 1;
+      if (seedCount === length) {
+        prev = seedSum / length;
+        result[i] = prev;
+      }
+      continue;
+    }
+    prev = (prev * (length - 1) + value) / length;
+    result[i] = prev;
+  }
+  return result;
+};
+var formatCompactNumber = (value) => {
+  const abs = Math.abs(value);
+  if (abs >= 1e9) return `${(value / 1e9).toFixed(2)}B`;
+  if (abs >= 1e6) return `${(value / 1e6).toFixed(2)}M`;
+  if (abs >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+  return value.toFixed(0);
+};
+var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) => {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const spec of seriesList) {
+    for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+      const value = spec.values[index];
+      if (value == null || !Number.isFinite(value)) continue;
+      if (value < min) min = value;
+      if (value > max) max = value;
+    }
+  }
+  if (min > max) return void 0;
+  if (options.includeZero || seriesList.some((spec) => spec.histogram)) {
+    min = Math.min(min, 0);
+    max = Math.max(max, 0);
+  }
+  const minValue = options.minOverride ?? min;
+  const maxValue = options.maxOverride ?? max;
+  const range = maxValue - minValue || 1;
+  const yFromValue = (value) => {
+    const ratio = (value - minValue) / range;
+    return renderContext.chartBottom - ratio * renderContext.chartHeight;
+  };
+  if (options.guideLines && options.guideLines.length > 0) {
+    ctx.save();
+    ctx.strokeStyle = "rgba(148,163,184,0.35)";
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    for (const guide of options.guideLines) {
+      const y = yFromValue(guide);
+      ctx.beginPath();
+      ctx.moveTo(renderContext.chartLeft, y);
+      ctx.lineTo(renderContext.chartRight, y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  for (const spec of seriesList) {
+    if (!spec.histogram) continue;
+    const zeroY = yFromValue(0);
+    const barWidth = Math.max(
+      1,
+      Math.min(Math.max(1, renderContext.candleSpacing - 1), Math.floor(renderContext.candleSpacing * 0.7))
+    );
+    const positive = new Path2D();
+    const negative = new Path2D();
+    for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+      const value = spec.values[index];
+      if (value == null || !Number.isFinite(value)) continue;
+      const x = Math.round(renderContext.xFromIndex(index) - barWidth / 2);
+      const y = yFromValue(value);
+      const top = Math.min(y, zeroY);
+      const height = Math.max(1, Math.abs(y - zeroY));
+      (value >= 0 ? positive : negative).rect(x, top, barWidth, height);
+    }
+    ctx.save();
+    ctx.globalAlpha = 0.85;
+    ctx.fillStyle = spec.color;
+    ctx.fill(positive);
+    ctx.fillStyle = spec.negativeColor ?? spec.color;
+    ctx.fill(negative);
+    ctx.restore();
+  }
+  for (const spec of seriesList) {
+    if (spec.histogram) continue;
+    ctx.save();
+    ctx.strokeStyle = spec.color;
+    ctx.lineWidth = Math.max(1, spec.width ?? 2);
+    ctx.setLineDash([]);
+    let drawing = false;
+    for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+      const value = spec.values[index];
+      if (!Number.isFinite(value ?? Number.NaN)) {
+        drawing = false;
+        continue;
+      }
+      const x = renderContext.xFromIndex(index);
+      const y = yFromValue(value);
+      if (!drawing) {
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        drawing = true;
+      } else {
+        ctx.lineTo(x, y);
+      }
+      const nextValue = spec.values[index + 1];
+      if (!Number.isFinite(nextValue ?? Number.NaN) || index === renderContext.endIndex) {
+        ctx.stroke();
+        drawing = false;
+      }
+    }
+    ctx.restore();
+  }
+  const decimals = options.decimals ?? 2;
+  const formatValue = options.format ?? ((value) => value.toFixed(decimals));
+  const latestOf = (values) => {
+    for (let index = values.length - 1; index >= 0; index -= 1) {
+      const value = values[index];
+      if (Number.isFinite(value ?? Number.NaN)) return value;
+    }
+    return null;
+  };
+  const paneInfo = {
+    ...options.title ? { title: options.title } : {},
+    axis: {
+      min: minValue,
+      max: maxValue,
+      ...options.axisTicks ? { ticks: options.axisTicks } : options.guideLines ? { ticks: options.guideLines } : {},
+      decimals,
+      format: formatValue
+    }
+  };
+  if (options.guideLines) {
+    paneInfo.guideLines = options.guideLines.map((value) => ({
+      value,
+      label: formatValue(value),
+      style: "dotted"
+    }));
+  }
+  const legendValues = [];
+  for (const spec of seriesList) {
+    const latest = latestOf(spec.values);
+    if (latest === null) continue;
+    legendValues.push({
+      ...spec.label ? { label: spec.label } : {},
+      value: latest,
+      text: formatValue(latest),
+      color: spec.color
+    });
+  }
+  if (legendValues.length > 0) {
+    paneInfo.legendValues = legendValues;
+  }
+  const labelSpec = seriesList[options.valueLabelSeriesIndex ?? 0];
+  const labelLatest = labelSpec ? latestOf(labelSpec.values) : null;
+  if (labelSpec && labelLatest !== null) {
+    paneInfo.valueLabels = [
+      {
+        value: labelLatest,
+        text: formatValue(labelLatest),
+        color: labelSpec.color,
+        backgroundColor: labelSpec.color,
+        textColor: "#0f172a"
+      }
+    ];
+  }
+  return paneInfo;
+};
+var computeMacd = (data, fast, slow, signalLength) => {
+  const fastEma = computeEmaSeries(data, fast, "close");
+  const slowEma = computeEmaSeries(data, slow, "close");
+  const macd = fastEma.map((value, idx) => {
+    const slowValue = slowEma[idx];
+    return value == null || slowValue == null ? null : value - slowValue;
+  });
+  const signal = emaFromValues(macd, signalLength);
+  const hist = macd.map((value, idx) => {
+    const signalValue = signal[idx];
+    return value == null || signalValue == null ? null : value - signalValue;
+  });
+  return { macd, signal, hist };
+};
+var computeStochastic = (data, kLength, kSmoothing, dLength) => {
+  const highestHigh = rollingExtremeSeries(data.map((point) => point.h), kLength, "max");
+  const lowestLow = rollingExtremeSeries(data.map((point) => point.l), kLength, "min");
+  const rawK = data.map((point, idx) => {
+    const hh = highestHigh[idx];
+    const ll = lowestLow[idx];
+    if (hh == null || ll == null) return null;
+    const range = hh - ll;
+    return range === 0 ? 50 : (point.c - ll) / range * 100;
+  });
+  const k = kSmoothing > 1 ? smaFromValues(rawK, kSmoothing) : rawK;
+  const d = smaFromValues(k, dLength);
+  return { k, d };
+};
+var computeStochRsi = (data, rsiLength, stochLength, kSmoothing, dSmoothing) => {
+  const rsi = computeRsiSeries(data, rsiLength);
+  const finiteRsi = rsi.map((value) => value == null ? Number.NaN : value);
+  const highest = rollingExtremeSeries(finiteRsi, stochLength, "max");
+  const lowest = rollingExtremeSeries(finiteRsi, stochLength, "min");
+  const rawK = rsi.map((value, idx) => {
+    const hh = highest[idx];
+    const ll = lowest[idx];
+    if (value == null || hh == null || ll == null || !Number.isFinite(hh) || !Number.isFinite(ll)) return null;
+    const range = hh - ll;
+    return range === 0 ? 50 : (value - ll) / range * 100;
+  });
+  const k = smaFromValues(rawK, Math.max(1, kSmoothing));
+  const d = smaFromValues(k, Math.max(1, dSmoothing));
+  return { k, d };
+};
+var computeDmi = (data, length) => {
+  const count = data.length;
+  const plusDm = new Array(count).fill(null);
+  const minusDm = new Array(count).fill(null);
+  const trueRange = new Array(count).fill(null);
+  for (let i = 1; i < count; i += 1) {
+    const point = data[i];
+    const prev = data[i - 1];
+    const upMove = point.h - prev.h;
+    const downMove = prev.l - point.l;
+    plusDm[i] = upMove > downMove && upMove > 0 ? upMove : 0;
+    minusDm[i] = downMove > upMove && downMove > 0 ? downMove : 0;
+    trueRange[i] = Math.max(point.h - point.l, Math.abs(point.h - prev.c), Math.abs(point.l - prev.c));
+  }
+  const smoothPlus = rmaFromValues(plusDm, length);
+  const smoothMinus = rmaFromValues(minusDm, length);
+  const smoothTr = rmaFromValues(trueRange, length);
+  const plusDi = smoothPlus.map((value, idx) => {
+    const tr = smoothTr[idx];
+    return value == null || tr == null || tr === 0 ? null : 100 * value / tr;
+  });
+  const minusDi = smoothMinus.map((value, idx) => {
+    const tr = smoothTr[idx];
+    return value == null || tr == null || tr === 0 ? null : 100 * value / tr;
+  });
+  const dx = plusDi.map((value, idx) => {
+    const minus = minusDi[idx];
+    if (value == null || minus == null) return null;
+    const sum = value + minus;
+    return sum === 0 ? 0 : 100 * Math.abs(value - minus) / sum;
+  });
+  const adx = rmaFromValues(dx, length);
+  return { adx, plusDi, minusDi };
+};
+var computeObvSeries = (data) => {
+  const result = new Array(data.length).fill(null);
+  let obv = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    if (i > 0) {
+      const prev = data[i - 1];
+      const volume = Math.max(0, point.v ?? 0);
+      if (point.c > prev.c) obv += volume;
+      else if (point.c < prev.c) obv -= volume;
+    }
+    result[i] = obv;
+  }
+  return result;
+};
+var computeMfiSeries = (data, length) => {
+  const result = new Array(data.length).fill(null);
+  const positiveFlow = new Array(data.length).fill(0);
+  const negativeFlow = new Array(data.length).fill(0);
+  let prevTypical = null;
+  for (let i = 0; i < data.length; i += 1) {
+    const point = data[i];
+    const typical = (point.h + point.l + point.c) / 3;
+    const flow = typical * Math.max(0, point.v ?? 0);
+    if (prevTypical !== null) {
+      if (typical > prevTypical) positiveFlow[i] = flow;
+      else if (typical < prevTypical) negativeFlow[i] = flow;
+    }
+    prevTypical = typical;
+  }
+  let posSum = 0;
+  let negSum = 0;
+  for (let i = 0; i < data.length; i += 1) {
+    posSum += positiveFlow[i];
+    negSum += negativeFlow[i];
+    if (i >= length) {
+      posSum -= positiveFlow[i - length];
+      negSum -= negativeFlow[i - length];
+    }
+    if (i >= length) {
+      result[i] = negSum === 0 ? 100 : 100 - 100 / (1 + posSum / negSum);
+    }
+  }
+  return result;
+};
+var computeCciSeries = (data, length) => {
+  const result = new Array(data.length).fill(null);
+  const typical = data.map((point) => (point.h + point.l + point.c) / 3);
+  const smaTypical = smaFromValues(typical, length);
+  for (let i = length - 1; i < data.length; i += 1) {
+    const mean = smaTypical[i];
+    if (mean == null) continue;
+    let meanDeviation = 0;
+    for (let j = 0; j < length; j += 1) {
+      meanDeviation += Math.abs(typical[i - j] - mean);
+    }
+    meanDeviation /= length;
+    result[i] = meanDeviation === 0 ? 0 : (typical[i] - mean) / (0.015 * meanDeviation);
+  }
+  return result;
+};
+var computeWilliamsRSeries = (data, length) => {
+  const highest = rollingExtremeSeries(data.map((point) => point.h), length, "max");
+  const lowest = rollingExtremeSeries(data.map((point) => point.l), length, "min");
+  return data.map((point, idx) => {
+    const hh = highest[idx];
+    const ll = lowest[idx];
+    if (hh == null || ll == null) return null;
+    const range = hh - ll;
+    return range === 0 ? -50 : (hh - point.c) / range * -100;
+  });
+};
+var computeRocSeries = (data, length) => {
+  return data.map((point, idx) => {
+    if (idx < length) return null;
+    const past = data[idx - length].c;
+    return past === 0 ? null : 100 * (point.c - past) / past;
+  });
+};
+var computeMomentumSeries = (data, length) => {
+  return data.map((point, idx) => idx < length ? null : point.c - data[idx - length].c);
+};
+var computePsarSeries = (data, start, increment, maximum) => {
+  const count = data.length;
+  const result = new Array(count).fill(null);
+  if (count < 2) return result;
+  let isUp = data[1].c >= data[0].c;
+  let sar = isUp ? data[0].l : data[0].h;
+  let extremePoint = isUp ? data[0].h : data[0].l;
+  let accelerationFactor = start;
+  for (let i = 1; i < count; i += 1) {
+    const point = data[i];
+    sar += accelerationFactor * (extremePoint - sar);
+    if (isUp) {
+      sar = Math.min(sar, data[i - 1].l, data[Math.max(0, i - 2)].l);
+      if (point.l < sar) {
+        isUp = false;
+        sar = extremePoint;
+        extremePoint = point.l;
+        accelerationFactor = start;
+      } else if (point.h > extremePoint) {
+        extremePoint = point.h;
+        accelerationFactor = Math.min(maximum, accelerationFactor + increment);
+      }
+    } else {
+      sar = Math.max(sar, data[i - 1].h, data[Math.max(0, i - 2)].h);
+      if (point.h > sar) {
+        isUp = true;
+        sar = extremePoint;
+        extremePoint = point.h;
+        accelerationFactor = start;
+      } else if (point.l < extremePoint) {
+        extremePoint = point.l;
+        accelerationFactor = Math.min(maximum, accelerationFactor + increment);
+      }
+    }
+    result[i] = sar;
+  }
+  return result;
+};
+var computeSuperTrend = (data, atrLength, multiplier) => {
+  const count = data.length;
+  const up = new Array(count).fill(null);
+  const down = new Array(count).fill(null);
+  const atr = computeAtrSeries(data, atrLength);
+  let prevUpper = Number.NaN;
+  let prevLower = Number.NaN;
+  let trend = 1;
+  let prevClose = 0;
+  for (let i = 0; i < count; i += 1) {
+    const point = data[i];
+    const atrValue = atr[i];
+    if (atrValue == null) {
+      prevClose = point.c;
+      continue;
+    }
+    const mid = (point.h + point.l) / 2;
+    const basicUpper = mid + multiplier * atrValue;
+    const basicLower = mid - multiplier * atrValue;
+    if (!Number.isFinite(prevUpper)) {
+      prevUpper = basicUpper;
+      prevLower = basicLower;
+      trend = point.c >= mid ? 1 : -1;
+    } else {
+      const finalUpper = basicUpper < prevUpper || prevClose > prevUpper ? basicUpper : prevUpper;
+      const finalLower = basicLower > prevLower || prevClose < prevLower ? basicLower : prevLower;
+      if (trend === 1) {
+        trend = point.c < finalLower ? -1 : 1;
+      } else {
+        trend = point.c > finalUpper ? 1 : -1;
+      }
+      prevUpper = finalUpper;
+      prevLower = finalLower;
+    }
+    if (trend === 1) up[i] = prevLower;
+    else down[i] = prevUpper;
+    prevClose = point.c;
+  }
+  return { up, down };
+};
+var computeIchimoku = (data, conversionLength, baseLength, spanBLength, displacement) => {
+  const count = data.length;
+  const highs = data.map((point) => point.h);
+  const lows = data.map((point) => point.l);
+  const midlineOf = (length) => {
+    const highest = rollingExtremeSeries(highs, length, "max");
+    const lowest = rollingExtremeSeries(lows, length, "min");
+    return highest.map((value, idx) => {
+      const low = lowest[idx];
+      return value == null || low == null ? null : (value + low) / 2;
+    });
+  };
+  const tenkan = midlineOf(conversionLength);
+  const kijun = midlineOf(baseLength);
+  const spanARaw = tenkan.map((value, idx) => {
+    const base = kijun[idx];
+    return value == null || base == null ? null : (value + base) / 2;
+  });
+  const spanBRaw = midlineOf(spanBLength);
+  const spanA = new Array(count).fill(null);
+  const spanB = new Array(count).fill(null);
+  const chikou = new Array(count).fill(null);
+  for (let i = 0; i < count; i += 1) {
+    const shifted = i - displacement;
+    if (shifted >= 0) {
+      spanA[i] = spanARaw[shifted] ?? null;
+      spanB[i] = spanBRaw[shifted] ?? null;
+    }
+    const forward = i + displacement;
+    if (forward < count) {
+      chikou[i] = data[forward].c;
+    }
+  }
+  return { tenkan, kijun, spanA, spanB, chikou };
+};
+var computeKeltner = (data, emaLength, atrLength, multiplier) => {
+  const basis = computeEmaSeries(data, emaLength, "close");
+  const atr = computeAtrSeries(data, atrLength);
+  const upper = basis.map((value, idx) => {
+    const atrValue = atr[idx];
+    return value == null || atrValue == null ? null : value + multiplier * atrValue;
+  });
+  const lower = basis.map((value, idx) => {
+    const atrValue = atr[idx];
+    return value == null || atrValue == null ? null : value - multiplier * atrValue;
+  });
+  return { basis, upper, lower };
+};
+var computeDonchian = (data, length) => {
+  const upper = rollingExtremeSeries(data.map((point) => point.h), length, "max");
+  const lower = rollingExtremeSeries(data.map((point) => point.l), length, "min");
+  const basis = upper.map((value, idx) => {
+    const low = lower[idx];
+    return value == null || low == null ? null : (value + low) / 2;
+  });
+  return { upper, lower, basis };
+};
+var BUILTIN_MACD_INDICATOR = {
+  id: "macd",
+  name: "MACD",
+  pane: "separate",
+  paneHeightRatio: 0.2,
+  defaultInputs: {
+    fast: 12,
+    slow: 26,
+    signal: 9,
+    macdColor: "#2962ff",
+    signalColor: "#ff6d00",
+    histUpColor: "#26a69a",
+    histDownColor: "#ef5350"
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const fast = clampIndicatorLength(inputs.fast, 12);
+    const slow = clampIndicatorLength(inputs.slow, 26);
+    const signalLength = clampIndicatorLength(inputs.signal, 9);
+    const { macd, signal, hist } = withCachedComputation(
+      `macd|${fast}|${slow}|${signalLength}`,
+      renderContext.data,
+      () => computeMacd(renderContext.data, fast, slow, signalLength)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [
+        {
+          values: hist,
+          color: inputs.histUpColor ?? "#26a69a",
+          negativeColor: inputs.histDownColor ?? "#ef5350",
+          histogram: true
+        },
+        { values: macd, color: inputs.macdColor ?? "#2962ff", label: "MACD" },
+        { values: signal, color: inputs.signalColor ?? "#ff6d00", label: "Signal" }
+      ],
+      {
+        title: `MACD ${fast} ${slow} ${signalLength}`,
+        includeZero: true,
+        guideLines: [0],
+        decimals: 2,
+        valueLabelSeriesIndex: 1
+      }
+    );
+  }
+};
+var BUILTIN_STOCHASTIC_INDICATOR = {
+  id: "stochastic",
+  name: "Stoch",
+  pane: "separate",
+  paneHeightRatio: 0.18,
+  defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00" },
+  draw: (ctx, renderContext, inputs) => {
+    const kLength = clampIndicatorLength(inputs.kLength, 14);
+    const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 1);
+    const dLength = clampIndicatorLength(inputs.dLength, 3);
+    const { k, d } = withCachedComputation(
+      `stochastic|${kLength}|${kSmoothing}|${dLength}`,
+      renderContext.data,
+      () => computeStochastic(renderContext.data, kLength, kSmoothing, dLength)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [
+        { values: k, color: inputs.kColor ?? "#2962ff", label: "%K" },
+        { values: d, color: inputs.dColor ?? "#ff6d00", label: "%D" }
+      ],
+      {
+        title: `Stoch ${kLength} ${kSmoothing} ${dLength}`,
+        minOverride: 0,
+        maxOverride: 100,
+        guideLines: [20, 80],
+        axisTicks: [0, 20, 50, 80, 100],
+        decimals: 2
+      }
+    );
+  }
+};
+var BUILTIN_STOCHRSI_INDICATOR = {
+  id: "stochrsi",
+  name: "Stoch RSI",
+  pane: "separate",
+  paneHeightRatio: 0.18,
+  defaultInputs: { rsiLength: 14, stochLength: 14, kSmoothing: 3, dSmoothing: 3, kColor: "#2962ff", dColor: "#ff6d00" },
+  draw: (ctx, renderContext, inputs) => {
+    const rsiLength = clampIndicatorLength(inputs.rsiLength, 14);
+    const stochLength = clampIndicatorLength(inputs.stochLength, 14);
+    const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 3);
+    const dSmoothing = clampIndicatorLength(inputs.dSmoothing, 3);
+    const { k, d } = withCachedComputation(
+      `stochrsi|${rsiLength}|${stochLength}|${kSmoothing}|${dSmoothing}`,
+      renderContext.data,
+      () => computeStochRsi(renderContext.data, rsiLength, stochLength, kSmoothing, dSmoothing)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [
+        { values: k, color: inputs.kColor ?? "#2962ff", label: "%K" },
+        { values: d, color: inputs.dColor ?? "#ff6d00", label: "%D" }
+      ],
+      {
+        title: `Stoch RSI ${rsiLength} ${stochLength}`,
+        minOverride: 0,
+        maxOverride: 100,
+        guideLines: [20, 80],
+        axisTicks: [0, 20, 50, 80, 100],
+        decimals: 2
+      }
+    );
+  }
+};
+var BUILTIN_ADX_INDICATOR = {
+  id: "adx",
+  name: "ADX/DMI",
+  pane: "separate",
+  paneHeightRatio: 0.18,
+  defaultInputs: { length: 14, adxColor: "#ff6d00", plusDiColor: "#26a69a", minusDiColor: "#ef5350", showDi: true },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 14);
+    const { adx, plusDi, minusDi } = withCachedComputation(
+      `adx|${length}`,
+      renderContext.data,
+      () => computeDmi(renderContext.data, length)
+    );
+    const seriesList = [
+      { values: adx, color: inputs.adxColor ?? "#ff6d00", label: "ADX" }
+    ];
+    if (inputs.showDi !== false) {
+      seriesList.push(
+        { values: plusDi, color: inputs.plusDiColor ?? "#26a69a", label: "+DI", width: 1 },
+        { values: minusDi, color: inputs.minusDiColor ?? "#ef5350", label: "-DI", width: 1 }
+      );
+    }
+    return drawSeparateMultiSeries(ctx, renderContext, seriesList, {
+      title: `ADX ${length}`,
+      minOverride: 0,
+      guideLines: [20],
+      decimals: 2
+    });
+  }
+};
+var BUILTIN_OBV_INDICATOR = {
+  id: "obv",
+  name: "OBV",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { color: "#2962ff", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const values = withCachedSeries("obv", renderContext.data, () => computeObvSeries(renderContext.data));
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2, label: "OBV" }],
+      { title: "OBV", format: formatCompactNumber }
+    );
+  }
+};
+var BUILTIN_MFI_INDICATOR = {
+  id: "mfi",
+  name: "MFI",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 14);
+    const values = withCachedSeries(
+      `mfi|${length}`,
+      renderContext.data,
+      () => computeMfiSeries(renderContext.data, length)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [{ values, color: inputs.color ?? "#7e57c2", width: Number(inputs.width) || 2 }],
+      {
+        title: `MFI ${length}`,
+        minOverride: 0,
+        maxOverride: 100,
+        guideLines: [20, 80],
+        axisTicks: [0, 20, 50, 80, 100],
+        decimals: 2
+      }
+    );
+  }
+};
+var BUILTIN_CCI_INDICATOR = {
+  id: "cci",
+  name: "CCI",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 20, color: "#2962ff", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const values = withCachedSeries(
+      `cci|${length}`,
+      renderContext.data,
+      () => computeCciSeries(renderContext.data, length)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
+      { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2 }
+    );
+  }
+};
+var BUILTIN_WILLIAMSR_INDICATOR = {
+  id: "williamsr",
+  name: "Williams %R",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 14);
+    const values = withCachedSeries(
+      `williamsr|${length}`,
+      renderContext.data,
+      () => computeWilliamsRSeries(renderContext.data, length)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [{ values, color: inputs.color ?? "#7e57c2", width: Number(inputs.width) || 2 }],
+      {
+        title: `%R ${length}`,
+        minOverride: -100,
+        maxOverride: 0,
+        guideLines: [-80, -20],
+        axisTicks: [-100, -80, -50, -20, 0],
+        decimals: 2
+      }
+    );
+  }
+};
+var BUILTIN_ROC_INDICATOR = {
+  id: "roc",
+  name: "ROC",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 9, color: "#2962ff", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 9);
+    const values = withCachedSeries(
+      `roc|${length}`,
+      renderContext.data,
+      () => computeRocSeries(renderContext.data, length)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
+      { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
+    );
+  }
+};
+var BUILTIN_MOMENTUM_INDICATOR = {
+  id: "momentum",
+  name: "Momentum",
+  pane: "separate",
+  paneHeightRatio: 0.16,
+  defaultInputs: { length: 10, color: "#2962ff", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 10);
+    const values = withCachedSeries(
+      `momentum|${length}`,
+      renderContext.data,
+      () => computeMomentumSeries(renderContext.data, length)
+    );
+    return drawSeparateMultiSeries(
+      ctx,
+      renderContext,
+      [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
+      { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
+    );
+  }
+};
+var BUILTIN_PSAR_INDICATOR = {
+  id: "psar",
+  name: "PSAR",
+  pane: "overlay",
+  defaultInputs: { start: 0.02, increment: 0.02, maximum: 0.2, color: "#2962ff" },
+  draw: (ctx, renderContext, inputs) => {
+    if (!renderContext.yFromPrice) return;
+    const yFromPrice = renderContext.yFromPrice;
+    const start = Math.max(1e-3, Number(inputs.start) || 0.02);
+    const increment = Math.max(1e-3, Number(inputs.increment) || 0.02);
+    const maximum = Math.max(increment, Number(inputs.maximum) || 0.2);
+    const values = withCachedSeries(
+      `psar|${start}|${increment}|${maximum}`,
+      renderContext.data,
+      () => computePsarSeries(renderContext.data, start, increment, maximum)
+    );
+    const radius = Math.max(1, Math.min(2.5, renderContext.candleSpacing * 0.15));
+    const dots = new Path2D();
+    for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
+      const value = values[index];
+      if (!Number.isFinite(value ?? Number.NaN)) continue;
+      const x = renderContext.xFromIndex(index);
+      const y = yFromPrice(value);
+      dots.moveTo(x + radius, y);
+      dots.arc(x, y, radius, 0, Math.PI * 2);
+    }
+    ctx.save();
+    ctx.fillStyle = inputs.color ?? "#2962ff";
+    ctx.fill(dots);
+    ctx.restore();
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const start = Math.max(1e-3, Number(inputs.start) || 0.02);
+    const increment = Math.max(1e-3, Number(inputs.increment) || 0.02);
+    const maximum = Math.max(increment, Number(inputs.maximum) || 0.2);
+    const values = withCachedSeries(
+      `psar|${start}|${increment}|${maximum}`,
+      data,
+      () => computePsarSeries(data, start, increment, maximum)
+    );
+    return rangeOfSeries([values], startIndex, endIndex, skipIndex);
+  }
+};
+var BUILTIN_SUPERTREND_INDICATOR = {
+  id: "supertrend",
+  name: "SuperTrend",
+  pane: "overlay",
+  defaultInputs: { atrLength: 10, multiplier: 3, upColor: "#26a69a", downColor: "#ef5350", width: 2 },
+  draw: (ctx, renderContext, inputs) => {
+    const atrLength = clampIndicatorLength(inputs.atrLength, 10);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 3);
+    const { up, down } = withCachedComputation(
+      `supertrend|${atrLength}|${multiplier}`,
+      renderContext.data,
+      () => computeSuperTrend(renderContext.data, atrLength, multiplier)
+    );
+    const width = Number(inputs.width) || 2;
+    drawOverlaySeries(ctx, renderContext, up, inputs.upColor ?? "#26a69a", width);
+    drawOverlaySeries(ctx, renderContext, down, inputs.downColor ?? "#ef5350", width);
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const atrLength = clampIndicatorLength(inputs.atrLength, 10);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 3);
+    const { up, down } = withCachedComputation(
+      `supertrend|${atrLength}|${multiplier}`,
+      data,
+      () => computeSuperTrend(data, atrLength, multiplier)
+    );
+    return rangeOfSeries([up, down], startIndex, endIndex, skipIndex);
+  }
+};
+var BUILTIN_ICHIMOKU_INDICATOR = {
+  id: "ichimoku",
+  name: "Ichimoku",
+  pane: "overlay",
+  defaultInputs: {
+    conversionLength: 9,
+    baseLength: 26,
+    spanBLength: 52,
+    displacement: 26,
+    tenkanColor: "#2962ff",
+    kijunColor: "#b71c1c",
+    spanAColor: "#26a69a",
+    spanBColor: "#ef5350",
+    chikouColor: "#43a047",
+    cloudOpacity: 0.08,
+    showChikou: true
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const conversionLength = clampIndicatorLength(inputs.conversionLength, 9);
+    const baseLength = clampIndicatorLength(inputs.baseLength, 26);
+    const spanBLength = clampIndicatorLength(inputs.spanBLength, 52);
+    const displacement = clampIndicatorLength(inputs.displacement, 26);
+    const { tenkan, kijun, spanA, spanB, chikou } = withCachedComputation(
+      `ichimoku|${conversionLength}|${baseLength}|${spanBLength}|${displacement}`,
+      renderContext.data,
+      () => computeIchimoku(renderContext.data, conversionLength, baseLength, spanBLength, displacement)
+    );
+    const cloudOpacity = Math.min(0.5, Math.max(0, Number(inputs.cloudOpacity) || 0.08));
+    const bullishA = spanA.map((value, idx) => {
+      const other = spanB[idx];
+      return value != null && other != null && value >= other ? value : null;
+    });
+    const bullishB = spanB.map((value, idx) => {
+      const other = spanA[idx];
+      return value != null && other != null && other >= value ? value : null;
+    });
+    const bearishA = spanA.map((value, idx) => {
+      const other = spanB[idx];
+      return value != null && other != null && value < other ? value : null;
+    });
+    const bearishB = spanB.map((value, idx) => {
+      const other = spanA[idx];
+      return value != null && other != null && other < value ? value : null;
+    });
+    fillBetweenSeries(ctx, renderContext, bullishA, bullishB, inputs.spanAColor ?? "#26a69a", cloudOpacity);
+    fillBetweenSeries(ctx, renderContext, bearishB, bearishA, inputs.spanBColor ?? "#ef5350", cloudOpacity);
+    drawOverlaySeries(ctx, renderContext, spanA, inputs.spanAColor ?? "#26a69a", 1);
+    drawOverlaySeries(ctx, renderContext, spanB, inputs.spanBColor ?? "#ef5350", 1);
+    drawOverlaySeries(ctx, renderContext, tenkan, inputs.tenkanColor ?? "#2962ff", 1.5);
+    drawOverlaySeries(ctx, renderContext, kijun, inputs.kijunColor ?? "#b71c1c", 1.5);
+    if (inputs.showChikou !== false) {
+      drawOverlaySeries(ctx, renderContext, chikou, inputs.chikouColor ?? "#43a047", 1);
+    }
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const conversionLength = clampIndicatorLength(inputs.conversionLength, 9);
+    const baseLength = clampIndicatorLength(inputs.baseLength, 26);
+    const spanBLength = clampIndicatorLength(inputs.spanBLength, 52);
+    const displacement = clampIndicatorLength(inputs.displacement, 26);
+    const { tenkan, kijun, spanA, spanB } = withCachedComputation(
+      `ichimoku|${conversionLength}|${baseLength}|${spanBLength}|${displacement}`,
+      data,
+      () => computeIchimoku(data, conversionLength, baseLength, spanBLength, displacement)
+    );
+    return rangeOfSeries([tenkan, kijun, spanA, spanB], startIndex, endIndex, skipIndex);
+  }
+};
+var BUILTIN_KELTNER_INDICATOR = {
+  id: "keltner",
+  name: "KC",
+  pane: "overlay",
+  defaultInputs: {
+    emaLength: 20,
+    atrLength: 10,
+    multiplier: 2,
+    basisColor: "#2962ff",
+    bandColor: "#2962ff",
+    width: 1.5,
+    fillOpacity: 0.04
+  },
+  draw: (ctx, renderContext, inputs) => {
+    const emaLength = clampIndicatorLength(inputs.emaLength, 20);
+    const atrLength = clampIndicatorLength(inputs.atrLength, 10);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const { basis, upper, lower } = withCachedComputation(
+      `keltner|${emaLength}|${atrLength}|${multiplier}`,
+      renderContext.data,
+      () => computeKeltner(renderContext.data, emaLength, atrLength, multiplier)
+    );
+    const bandColor = inputs.bandColor ?? "#2962ff";
+    const width = Number(inputs.width) || 1.5;
+    fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.04);
+    drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#2962ff", width);
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const emaLength = clampIndicatorLength(inputs.emaLength, 20);
+    const atrLength = clampIndicatorLength(inputs.atrLength, 10);
+    const multiplier = Math.max(0.1, Number(inputs.multiplier) || 2);
+    const { upper, lower } = withCachedComputation(
+      `keltner|${emaLength}|${atrLength}|${multiplier}`,
+      data,
+      () => computeKeltner(data, emaLength, atrLength, multiplier)
+    );
+    return rangeOfSeries([upper, lower], startIndex, endIndex, skipIndex);
+  }
+};
+var BUILTIN_DONCHIAN_INDICATOR = {
+  id: "donchian",
+  name: "DC",
+  pane: "overlay",
+  defaultInputs: { length: 20, bandColor: "#2962ff", basisColor: "#ff6d00", width: 1.5, fillOpacity: 0.04 },
+  draw: (ctx, renderContext, inputs) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const { upper, lower, basis } = withCachedComputation(
+      `donchian|${length}`,
+      renderContext.data,
+      () => computeDonchian(renderContext.data, length)
+    );
+    const bandColor = inputs.bandColor ?? "#2962ff";
+    const width = Number(inputs.width) || 1.5;
+    fillBetweenSeries(ctx, renderContext, upper, lower, bandColor, Number(inputs.fillOpacity) || 0.04);
+    drawOverlaySeries(ctx, renderContext, upper, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, lower, bandColor, width);
+    drawOverlaySeries(ctx, renderContext, basis, inputs.basisColor ?? "#ff6d00", width);
+  },
+  getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+    const length = clampIndicatorLength(inputs.length, 20);
+    const { upper, lower } = withCachedComputation(`donchian|${length}`, data, () => computeDonchian(data, length));
+    return rangeOfSeries([upper, lower], startIndex, endIndex, skipIndex);
+  }
+};
 var BUILTIN_INDICATORS = [
   BUILTIN_VOLUME_INDICATOR,
   BUILTIN_SMA_INDICATOR,
@@ -1154,7 +2186,22 @@ var BUILTIN_INDICATORS = [
   BUILTIN_VWAP_INDICATOR,
   BUILTIN_BOLLINGER_INDICATOR,
   BUILTIN_STDDEV_INDICATOR,
-  BUILTIN_ATR_INDICATOR
+  BUILTIN_ATR_INDICATOR,
+  BUILTIN_MACD_INDICATOR,
+  BUILTIN_STOCHASTIC_INDICATOR,
+  BUILTIN_STOCHRSI_INDICATOR,
+  BUILTIN_ADX_INDICATOR,
+  BUILTIN_OBV_INDICATOR,
+  BUILTIN_MFI_INDICATOR,
+  BUILTIN_CCI_INDICATOR,
+  BUILTIN_WILLIAMSR_INDICATOR,
+  BUILTIN_ROC_INDICATOR,
+  BUILTIN_MOMENTUM_INDICATOR,
+  BUILTIN_PSAR_INDICATOR,
+  BUILTIN_SUPERTREND_INDICATOR,
+  BUILTIN_ICHIMOKU_INDICATOR,
+  BUILTIN_KELTNER_INDICATOR,
+  BUILTIN_DONCHIAN_INDICATOR
 ];
 function createChart(element, options = {}) {
   let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
@@ -1878,6 +2925,36 @@ function createChart(element, options = {}) {
     }
     return direction > 0 ? "up" : "down";
   };
+  let heikinAshiCache = null;
+  let heikinAshiFingerprint = "";
+  const getHeikinAshiData = () => {
+    const last = data[data.length - 1];
+    const fingerprint = !last ? "empty" : `${data.length}|${last.time.getTime()}|${last.o}|${last.h}|${last.l}|${last.c}`;
+    if (heikinAshiCache && heikinAshiFingerprint === fingerprint) {
+      return heikinAshiCache;
+    }
+    const result = new Array(data.length);
+    let prevOpen = 0;
+    let prevClose = 0;
+    for (let i = 0; i < data.length; i += 1) {
+      const point = data[i];
+      const haClose = (point.o + point.h + point.l + point.c) / 4;
+      const haOpen = i === 0 ? (point.o + point.c) / 2 : (prevOpen + prevClose) / 2;
+      result[i] = {
+        time: point.time,
+        o: haOpen,
+        h: Math.max(point.h, haOpen, haClose),
+        l: Math.min(point.l, haOpen, haClose),
+        c: haClose,
+        ...point.v === void 0 ? {} : { v: point.v }
+      };
+      prevOpen = haOpen;
+      prevClose = haClose;
+    }
+    heikinAshiCache = result;
+    heikinAshiFingerprint = fingerprint;
+    return result;
+  };
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -2455,23 +3532,34 @@ function createChart(element, options = {}) {
     const xEnd = xStart + xSpan;
     const startIndex = Math.max(0, Math.floor(xStart));
     const endIndex = Math.min(data.length - 1, Math.ceil(xEnd) - 1);
+    const chartType = mergedOptions.chartType;
+    const seriesData = chartType === "heikin-ashi" ? getHeikinAshiData() : data;
+    const isLineStyleChart = chartType === "line" || chartType === "area" || chartType === "baseline";
     const skipLatestIndex = mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 ? data.length - 1 : -1;
     const scanCandleRange = (from, to) => {
       let min = Number.POSITIVE_INFINITY;
       let max = Number.NEGATIVE_INFINITY;
       for (let idx = from; idx <= to; idx += 1) {
         if (idx === skipLatestIndex) continue;
-        const point = data[idx];
+        const point = seriesData[idx];
         if (!point) continue;
-        if (point.l < min) min = point.l;
-        if (point.h > max) max = point.h;
+        if (isLineStyleChart) {
+          if (point.c < min) min = point.c;
+          if (point.c > max) max = point.c;
+        } else {
+          if (point.l < min) min = point.l;
+          if (point.h > max) max = point.h;
+        }
       }
       return min <= max ? { min, max } : null;
     };
     let candleRange = scanCandleRange(startIndex, endIndex);
     if (!candleRange) {
       const latestIndex = data.length - 1;
-      candleRange = scanCandleRange(Math.max(0, latestIndex - 120), latestIndex - 1) ?? scanCandleRange(0, latestIndex) ?? { min: data[latestIndex].l, max: data[latestIndex].h };
+      candleRange = scanCandleRange(Math.max(0, latestIndex - 120), latestIndex - 1) ?? scanCandleRange(0, latestIndex) ?? {
+        min: isLineStyleChart ? seriesData[latestIndex].c : seriesData[latestIndex].l,
+        max: isLineStyleChart ? seriesData[latestIndex].c : seriesData[latestIndex].h
+      };
     }
     let minPrice = candleRange.min;
     let maxPrice = candleRange.max;
@@ -3367,23 +4455,137 @@ function createChart(element, options = {}) {
       }
       return data[index]?.v;
     };
-    {
+    if (isLineStyleChart) {
+      const seriesLineWidth = Math.max(1, mergedOptions.lineWidth);
+      const linePath = new Path2D();
+      let started = false;
+      let firstX = 0;
+      let lastX = 0;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const point = seriesData[index];
+        if (!point) continue;
+        const close = useSmoothedCandle && index === lastDataIndex ? smoothedTickerPrice : point.c;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        const y = yFromPrice(close);
+        if (!started) {
+          linePath.moveTo(x, y);
+          firstX = x;
+          started = true;
+        } else {
+          linePath.lineTo(x, y);
+        }
+        lastX = x;
+      }
+      if (started) {
+        if (chartType === "baseline") {
+          const baselinePrice = mergedOptions.baselinePrice ?? (yMin + yMax) / 2;
+          const baselineY = yFromPrice(baselinePrice);
+          const fillPath = new Path2D(linePath);
+          fillPath.lineTo(lastX, baselineY);
+          fillPath.lineTo(firstX, baselineY);
+          fillPath.closePath();
+          const halves = [
+            { clipTop: chartTop, clipBottom: baselineY, color: mergedOptions.upColor },
+            { clipTop: baselineY, clipBottom: chartBottom, color: mergedOptions.downColor }
+          ];
+          for (const half of halves) {
+            const clipHeight = half.clipBottom - half.clipTop;
+            if (clipHeight <= 0) continue;
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(chartLeft, half.clipTop, chartWidth, clipHeight);
+            ctx.clip();
+            ctx.globalAlpha = Math.max(0, Math.min(1, mergedOptions.areaFillOpacity));
+            ctx.fillStyle = half.color;
+            ctx.fill(fillPath);
+            ctx.globalAlpha = 1;
+            ctx.strokeStyle = half.color;
+            ctx.lineWidth = seriesLineWidth;
+            ctx.lineJoin = "round";
+            ctx.stroke(linePath);
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.strokeStyle = "rgba(148,163,184,0.5)";
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 4]);
+          ctx.beginPath();
+          ctx.moveTo(chartLeft, crisp(baselineY));
+          ctx.lineTo(chartRight, crisp(baselineY));
+          ctx.stroke();
+          ctx.restore();
+        } else {
+          if (chartType === "area") {
+            const fillPath = new Path2D(linePath);
+            fillPath.lineTo(lastX, chartBottom);
+            fillPath.lineTo(firstX, chartBottom);
+            fillPath.closePath();
+            ctx.save();
+            ctx.globalAlpha = Math.max(0, Math.min(1, mergedOptions.areaFillOpacity));
+            ctx.fillStyle = mergedOptions.lineColor;
+            ctx.fill(fillPath);
+            ctx.restore();
+          }
+          ctx.save();
+          ctx.strokeStyle = mergedOptions.lineColor;
+          ctx.lineWidth = seriesLineWidth;
+          ctx.lineJoin = "round";
+          ctx.stroke(linePath);
+          ctx.restore();
+        }
+      }
+    } else if (chartType === "bars") {
+      const upBars = new Path2D();
+      const downBars = new Path2D();
+      const tickLength = Math.max(2, Math.floor(bodyWidth / 2));
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const point = seriesData[index];
+        if (!point) continue;
+        const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+        const actualDirection = point.c >= point.o ? "up" : "down";
+        const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
+        const displayHigh = isLastCandle && actualDirection === "up" ? Math.max(point.h, displayClose) : point.h;
+        const displayLow = isLastCandle && actualDirection === "down" ? Math.min(point.l, displayClose) : point.l;
+        const roundedCenterX = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
+        const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
+        const path = direction === "up" ? upBars : downBars;
+        const centerX = roundedCenterX + 0.5;
+        path.moveTo(centerX, crisp(yFromPrice(displayHigh)));
+        path.lineTo(centerX, crisp(yFromPrice(displayLow)));
+        const openY = crisp(yFromPrice(point.o));
+        const closeY = crisp(yFromPrice(displayClose));
+        path.moveTo(centerX - tickLength, openY);
+        path.lineTo(centerX, openY);
+        path.moveTo(centerX, closeY);
+        path.lineTo(centerX + tickLength, closeY);
+      }
+      ctx.lineWidth = Math.max(1, candleWickWidth);
+      ctx.strokeStyle = mergedOptions.upColor;
+      ctx.stroke(upBars);
+      ctx.strokeStyle = mergedOptions.downColor;
+      ctx.stroke(downBars);
+    } else {
+      const isHeikinAshi = chartType === "heikin-ashi";
+      const isHollow = chartType === "hollow-candles";
+      const smoothLastCandle = useSmoothedCandle && !isHeikinAshi;
       const upWicks = new Path2D();
       const downWicks = new Path2D();
       const upBodies = new Path2D();
       const downBodies = new Path2D();
+      const upHollowBodies = new Path2D();
+      const downHollowBodies = new Path2D();
       for (let index = startIndex; index <= endIndex; index += 1) {
-        const point = data[index];
+        const point = seriesData[index];
         if (!point) {
           continue;
         }
-        const isLastCandle = useSmoothedCandle && index === lastDataIndex;
+        const isLastCandle = smoothLastCandle && index === lastDataIndex;
         const actualDirection = point.c >= point.o ? "up" : "down";
         const displayClose = isLastCandle ? actualDirection === "up" ? Math.max(point.o, smoothedTickerPrice) : Math.min(point.o, smoothedTickerPrice) : point.c;
         const displayHigh = isLastCandle ? actualDirection === "up" ? Math.max(point.h, displayClose) : point.h : point.h;
         const displayLow = isLastCandle ? actualDirection === "up" ? point.l : Math.min(point.l, displayClose) : point.l;
         const centerX = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
-        const direction = isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
+        const direction = isHeikinAshi || isLastCandle ? actualDirection : getCandleDirectionByIndex(index);
         const isUp = direction === "up";
         const roundedCenterX = Math.round(centerX);
         const wicks = isUp ? upWicks : downWicks;
@@ -3395,7 +4597,9 @@ function createChart(element, options = {}) {
         const bodyIsUp = displayClose >= point.o;
         const bodyTop = bodyIsUp ? Math.min(closeYPx, openYPx - 1) : openYPx;
         const bodyBottom = bodyIsUp ? openYPx : Math.max(closeYPx, openYPx + 1);
-        (isUp ? upBodies : downBodies).rect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
+        const useHollowBody = isHollow && bodyIsUp;
+        const bodies = useHollowBody ? isUp ? upHollowBodies : downHollowBodies : isUp ? upBodies : downBodies;
+        bodies.rect(bodyLeft, bodyTop, bodyWidth, bodyBottom - bodyTop);
       }
       ctx.lineWidth = candleWickWidth;
       ctx.strokeStyle = mergedOptions.upColor;
@@ -3406,6 +4610,16 @@ function createChart(element, options = {}) {
       ctx.stroke(downWicks);
       ctx.fillStyle = mergedOptions.downColor;
       ctx.fill(downBodies);
+      if (isHollow) {
+        ctx.fillStyle = mergedOptions.backgroundColor;
+        ctx.fill(upHollowBodies);
+        ctx.fill(downHollowBodies);
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = mergedOptions.upColor;
+        ctx.stroke(upHollowBodies);
+        ctx.strokeStyle = mergedOptions.downColor;
+        ctx.stroke(downHollowBodies);
+      }
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
@@ -5801,6 +7015,14 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const setChartType = (type) => {
+    if (mergedOptions.chartType === type) {
+      return;
+    }
+    mergedOptions = { ...mergedOptions, chartType: type };
+    scheduleDraw({ updateAutoScale: true });
+  };
+  const getChartType = () => mergedOptions.chartType;
   const resize = (nextWidth, nextHeight) => {
     if (nextWidth && nextWidth > 0) {
       width = nextWidth;
@@ -6158,6 +7380,8 @@ function createChart(element, options = {}) {
   draw();
   return {
     updateOptions,
+    setChartType,
+    getChartType,
     setData,
     upsertBar,
     setPriceLines,