hyperprop-charting-library 0.1.128 → 0.1.129

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/hyperprop-charting-library.cjs +83 -26
  2. package/dist/hyperprop-charting-library.js +83 -26
  3. package/dist/index.cjs +83 -26
  4. package/dist/index.js +83 -26
  5. package/docs/API.md +2 -0
  6. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -850,6 +850,19 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
850
850
  break;
851
851
  }
852
852
  }
853
+ if (options.valueLine && latestValue !== null && latestValue >= minValue && latestValue <= maxValue) {
854
+ ctx.save();
855
+ ctx.lineWidth = 1;
856
+ ctx.setLineDash([3, 3]);
857
+ ctx.globalAlpha = 0.65;
858
+ ctx.strokeStyle = color;
859
+ const y = yFromValue(latestValue);
860
+ ctx.beginPath();
861
+ ctx.moveTo(renderContext.chartLeft, y);
862
+ ctx.lineTo(renderContext.chartRight, y);
863
+ ctx.stroke();
864
+ ctx.restore();
865
+ }
853
866
  const decimals = options.decimals ?? 2;
854
867
  const formatValue = (value) => value.toFixed(decimals);
855
868
  const axisTicks = options.axisTicks ?? guideLines;
@@ -1177,7 +1190,7 @@ var BUILTIN_STDDEV_INDICATOR = {
1177
1190
  name: "StdDev",
1178
1191
  pane: "separate",
1179
1192
  paneHeightRatio: 0.16,
1180
- defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
1193
+ defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2, showValueLine: false },
1181
1194
  draw: (ctx, renderContext, inputs) => {
1182
1195
  const length = clampIndicatorLength(inputs.length, 20);
1183
1196
  const values = withCachedSeries(
@@ -1187,7 +1200,8 @@ var BUILTIN_STDDEV_INDICATOR = {
1187
1200
  );
1188
1201
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
1189
1202
  title: `StdDev ${length}`,
1190
- decimals: 2
1203
+ decimals: 2,
1204
+ valueLine: inputs.showValueLine === true
1191
1205
  });
1192
1206
  }
1193
1207
  };
@@ -1196,13 +1210,14 @@ var BUILTIN_ATR_INDICATOR = {
1196
1210
  name: "ATR",
1197
1211
  pane: "separate",
1198
1212
  paneHeightRatio: 0.16,
1199
- defaultInputs: { length: 14, color: "#eab308", width: 2 },
1213
+ defaultInputs: { length: 14, color: "#eab308", width: 2, showValueLine: false },
1200
1214
  draw: (ctx, renderContext, inputs) => {
1201
1215
  const length = clampIndicatorLength(inputs.length, 14);
1202
1216
  const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
1203
1217
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
1204
1218
  title: `ATR ${length}`,
1205
- decimals: 2
1219
+ decimals: 2,
1220
+ valueLine: inputs.showValueLine === true
1206
1221
  });
1207
1222
  }
1208
1223
  };
@@ -1218,7 +1233,8 @@ var BUILTIN_RSI_INDICATOR = {
1218
1233
  showLegend: true,
1219
1234
  showValueLabel: true,
1220
1235
  showGuideLines: true,
1221
- showScaleLabels: true
1236
+ showScaleLabels: true,
1237
+ showValueLine: false
1222
1238
  },
1223
1239
  draw: (ctx, renderContext, inputs) => {
1224
1240
  const length = clampIndicatorLength(inputs.length, 14);
@@ -1241,7 +1257,8 @@ var BUILTIN_RSI_INDICATOR = {
1241
1257
  valueLabelColor: "#9E9E9E",
1242
1258
  valueLabelBackgroundColor: "#9E9E9E",
1243
1259
  valueLabelTextColor: "#0f172a",
1244
- showLegend: inputs.showLegend !== false
1260
+ showLegend: inputs.showLegend !== false,
1261
+ valueLine: inputs.showValueLine === true
1245
1262
  }
1246
1263
  );
1247
1264
  }
@@ -1377,6 +1394,24 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
1377
1394
  }
1378
1395
  return null;
1379
1396
  };
1397
+ if (options.valueLines) {
1398
+ ctx.save();
1399
+ ctx.lineWidth = 1;
1400
+ ctx.setLineDash([3, 3]);
1401
+ ctx.globalAlpha = 0.65;
1402
+ for (const spec of seriesList) {
1403
+ if (spec.histogram) continue;
1404
+ const latest = latestOf(spec.values);
1405
+ if (latest === null || latest < minValue || latest > maxValue) continue;
1406
+ const y = yFromValue(latest);
1407
+ ctx.strokeStyle = spec.color;
1408
+ ctx.beginPath();
1409
+ ctx.moveTo(renderContext.chartLeft, y);
1410
+ ctx.lineTo(renderContext.chartRight, y);
1411
+ ctx.stroke();
1412
+ }
1413
+ ctx.restore();
1414
+ }
1380
1415
  const paneInfo = {
1381
1416
  ...options.title ? { title: options.title } : {},
1382
1417
  axis: {
@@ -1730,7 +1765,8 @@ var BUILTIN_MACD_INDICATOR = {
1730
1765
  macdColor: "#2962ff",
1731
1766
  signalColor: "#ff6d00",
1732
1767
  histUpColor: "#26a69a",
1733
- histDownColor: "#ef5350"
1768
+ histDownColor: "#ef5350",
1769
+ showValueLine: false
1734
1770
  },
1735
1771
  draw: (ctx, renderContext, inputs) => {
1736
1772
  const fast = clampIndicatorLength(inputs.fast, 12);
@@ -1759,7 +1795,8 @@ var BUILTIN_MACD_INDICATOR = {
1759
1795
  includeZero: true,
1760
1796
  guideLines: [0],
1761
1797
  decimals: 2,
1762
- valueLabelSeriesIndex: 1
1798
+ valueLabelSeriesIndex: 1,
1799
+ valueLines: inputs.showValueLine === true
1763
1800
  }
1764
1801
  );
1765
1802
  }
@@ -1769,7 +1806,7 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1769
1806
  name: "Stoch",
1770
1807
  pane: "separate",
1771
1808
  paneHeightRatio: 0.18,
1772
- defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1809
+ defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00", showValueLine: false },
1773
1810
  draw: (ctx, renderContext, inputs) => {
1774
1811
  const kLength = clampIndicatorLength(inputs.kLength, 14);
1775
1812
  const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 1);
@@ -1792,7 +1829,8 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1792
1829
  maxOverride: 100,
1793
1830
  guideLines: [20, 80],
1794
1831
  axisTicks: [0, 20, 50, 80, 100],
1795
- decimals: 2
1832
+ decimals: 2,
1833
+ valueLines: inputs.showValueLine === true
1796
1834
  }
1797
1835
  );
1798
1836
  }
@@ -1802,7 +1840,15 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1802
1840
  name: "Stoch RSI",
1803
1841
  pane: "separate",
1804
1842
  paneHeightRatio: 0.18,
1805
- defaultInputs: { rsiLength: 14, stochLength: 14, kSmoothing: 3, dSmoothing: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1843
+ defaultInputs: {
1844
+ rsiLength: 14,
1845
+ stochLength: 14,
1846
+ kSmoothing: 3,
1847
+ dSmoothing: 3,
1848
+ kColor: "#2962ff",
1849
+ dColor: "#ff6d00",
1850
+ showValueLine: false
1851
+ },
1806
1852
  draw: (ctx, renderContext, inputs) => {
1807
1853
  const rsiLength = clampIndicatorLength(inputs.rsiLength, 14);
1808
1854
  const stochLength = clampIndicatorLength(inputs.stochLength, 14);
@@ -1826,7 +1872,8 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1826
1872
  maxOverride: 100,
1827
1873
  guideLines: [20, 80],
1828
1874
  axisTicks: [0, 20, 50, 80, 100],
1829
- decimals: 2
1875
+ decimals: 2,
1876
+ valueLines: inputs.showValueLine === true
1830
1877
  }
1831
1878
  );
1832
1879
  }
@@ -1836,7 +1883,14 @@ var BUILTIN_ADX_INDICATOR = {
1836
1883
  name: "ADX/DMI",
1837
1884
  pane: "separate",
1838
1885
  paneHeightRatio: 0.18,
1839
- defaultInputs: { length: 14, adxColor: "#ff6d00", plusDiColor: "#26a69a", minusDiColor: "#ef5350", showDi: true },
1886
+ defaultInputs: {
1887
+ length: 14,
1888
+ adxColor: "#ff6d00",
1889
+ plusDiColor: "#26a69a",
1890
+ minusDiColor: "#ef5350",
1891
+ showDi: true,
1892
+ showValueLine: false
1893
+ },
1840
1894
  draw: (ctx, renderContext, inputs) => {
1841
1895
  const length = clampIndicatorLength(inputs.length, 14);
1842
1896
  const { adx, plusDi, minusDi } = withCachedComputation(
@@ -1857,7 +1911,8 @@ var BUILTIN_ADX_INDICATOR = {
1857
1911
  title: `ADX ${length}`,
1858
1912
  minOverride: 0,
1859
1913
  guideLines: [20],
1860
- decimals: 2
1914
+ decimals: 2,
1915
+ valueLines: inputs.showValueLine === true
1861
1916
  });
1862
1917
  }
1863
1918
  };
@@ -1866,14 +1921,14 @@ var BUILTIN_OBV_INDICATOR = {
1866
1921
  name: "OBV",
1867
1922
  pane: "separate",
1868
1923
  paneHeightRatio: 0.16,
1869
- defaultInputs: { color: "#2962ff", width: 2 },
1924
+ defaultInputs: { color: "#2962ff", width: 2, showValueLine: false },
1870
1925
  draw: (ctx, renderContext, inputs) => {
1871
1926
  const values = withCachedSeries("obv", renderContext.data, () => computeObvSeries(renderContext.data));
1872
1927
  return drawSeparateMultiSeries(
1873
1928
  ctx,
1874
1929
  renderContext,
1875
1930
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2, label: "OBV" }],
1876
- { title: "OBV", format: formatCompactNumber }
1931
+ { title: "OBV", format: formatCompactNumber, valueLines: inputs.showValueLine === true }
1877
1932
  );
1878
1933
  }
1879
1934
  };
@@ -1882,7 +1937,7 @@ var BUILTIN_MFI_INDICATOR = {
1882
1937
  name: "MFI",
1883
1938
  pane: "separate",
1884
1939
  paneHeightRatio: 0.16,
1885
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1940
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1886
1941
  draw: (ctx, renderContext, inputs) => {
1887
1942
  const length = clampIndicatorLength(inputs.length, 14);
1888
1943
  const values = withCachedSeries(
@@ -1900,7 +1955,8 @@ var BUILTIN_MFI_INDICATOR = {
1900
1955
  maxOverride: 100,
1901
1956
  guideLines: [20, 80],
1902
1957
  axisTicks: [0, 20, 50, 80, 100],
1903
- decimals: 2
1958
+ decimals: 2,
1959
+ valueLines: inputs.showValueLine === true
1904
1960
  }
1905
1961
  );
1906
1962
  }
@@ -1910,7 +1966,7 @@ var BUILTIN_CCI_INDICATOR = {
1910
1966
  name: "CCI",
1911
1967
  pane: "separate",
1912
1968
  paneHeightRatio: 0.16,
1913
- defaultInputs: { length: 20, color: "#2962ff", width: 2 },
1969
+ defaultInputs: { length: 20, color: "#2962ff", width: 2, showValueLine: false },
1914
1970
  draw: (ctx, renderContext, inputs) => {
1915
1971
  const length = clampIndicatorLength(inputs.length, 20);
1916
1972
  const values = withCachedSeries(
@@ -1922,7 +1978,7 @@ var BUILTIN_CCI_INDICATOR = {
1922
1978
  ctx,
1923
1979
  renderContext,
1924
1980
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1925
- { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2 }
1981
+ { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2, valueLines: inputs.showValueLine === true }
1926
1982
  );
1927
1983
  }
1928
1984
  };
@@ -1931,7 +1987,7 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1931
1987
  name: "Williams %R",
1932
1988
  pane: "separate",
1933
1989
  paneHeightRatio: 0.16,
1934
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1990
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1935
1991
  draw: (ctx, renderContext, inputs) => {
1936
1992
  const length = clampIndicatorLength(inputs.length, 14);
1937
1993
  const values = withCachedSeries(
@@ -1949,7 +2005,8 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1949
2005
  maxOverride: 0,
1950
2006
  guideLines: [-80, -20],
1951
2007
  axisTicks: [-100, -80, -50, -20, 0],
1952
- decimals: 2
2008
+ decimals: 2,
2009
+ valueLines: inputs.showValueLine === true
1953
2010
  }
1954
2011
  );
1955
2012
  }
@@ -1959,7 +2016,7 @@ var BUILTIN_ROC_INDICATOR = {
1959
2016
  name: "ROC",
1960
2017
  pane: "separate",
1961
2018
  paneHeightRatio: 0.16,
1962
- defaultInputs: { length: 9, color: "#2962ff", width: 2 },
2019
+ defaultInputs: { length: 9, color: "#2962ff", width: 2, showValueLine: false },
1963
2020
  draw: (ctx, renderContext, inputs) => {
1964
2021
  const length = clampIndicatorLength(inputs.length, 9);
1965
2022
  const values = withCachedSeries(
@@ -1971,7 +2028,7 @@ var BUILTIN_ROC_INDICATOR = {
1971
2028
  ctx,
1972
2029
  renderContext,
1973
2030
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1974
- { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2031
+ { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1975
2032
  );
1976
2033
  }
1977
2034
  };
@@ -1980,7 +2037,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1980
2037
  name: "Momentum",
1981
2038
  pane: "separate",
1982
2039
  paneHeightRatio: 0.16,
1983
- defaultInputs: { length: 10, color: "#2962ff", width: 2 },
2040
+ defaultInputs: { length: 10, color: "#2962ff", width: 2, showValueLine: false },
1984
2041
  draw: (ctx, renderContext, inputs) => {
1985
2042
  const length = clampIndicatorLength(inputs.length, 10);
1986
2043
  const values = withCachedSeries(
@@ -1992,7 +2049,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1992
2049
  ctx,
1993
2050
  renderContext,
1994
2051
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1995
- { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2052
+ { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1996
2053
  );
1997
2054
  }
1998
2055
  };
package/dist/hyperprop-charting-library.js CHANGED
@@ -824,6 +824,19 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
824
824
  break;
825
825
  }
826
826
  }
827
+ if (options.valueLine && latestValue !== null && latestValue >= minValue && latestValue <= maxValue) {
828
+ ctx.save();
829
+ ctx.lineWidth = 1;
830
+ ctx.setLineDash([3, 3]);
831
+ ctx.globalAlpha = 0.65;
832
+ ctx.strokeStyle = color;
833
+ const y = yFromValue(latestValue);
834
+ ctx.beginPath();
835
+ ctx.moveTo(renderContext.chartLeft, y);
836
+ ctx.lineTo(renderContext.chartRight, y);
837
+ ctx.stroke();
838
+ ctx.restore();
839
+ }
827
840
  const decimals = options.decimals ?? 2;
828
841
  const formatValue = (value) => value.toFixed(decimals);
829
842
  const axisTicks = options.axisTicks ?? guideLines;
@@ -1151,7 +1164,7 @@ var BUILTIN_STDDEV_INDICATOR = {
1151
1164
  name: "StdDev",
1152
1165
  pane: "separate",
1153
1166
  paneHeightRatio: 0.16,
1154
- defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
1167
+ defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2, showValueLine: false },
1155
1168
  draw: (ctx, renderContext, inputs) => {
1156
1169
  const length = clampIndicatorLength(inputs.length, 20);
1157
1170
  const values = withCachedSeries(
@@ -1161,7 +1174,8 @@ var BUILTIN_STDDEV_INDICATOR = {
1161
1174
  );
1162
1175
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
1163
1176
  title: `StdDev ${length}`,
1164
- decimals: 2
1177
+ decimals: 2,
1178
+ valueLine: inputs.showValueLine === true
1165
1179
  });
1166
1180
  }
1167
1181
  };
@@ -1170,13 +1184,14 @@ var BUILTIN_ATR_INDICATOR = {
1170
1184
  name: "ATR",
1171
1185
  pane: "separate",
1172
1186
  paneHeightRatio: 0.16,
1173
- defaultInputs: { length: 14, color: "#eab308", width: 2 },
1187
+ defaultInputs: { length: 14, color: "#eab308", width: 2, showValueLine: false },
1174
1188
  draw: (ctx, renderContext, inputs) => {
1175
1189
  const length = clampIndicatorLength(inputs.length, 14);
1176
1190
  const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
1177
1191
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
1178
1192
  title: `ATR ${length}`,
1179
- decimals: 2
1193
+ decimals: 2,
1194
+ valueLine: inputs.showValueLine === true
1180
1195
  });
1181
1196
  }
1182
1197
  };
@@ -1192,7 +1207,8 @@ var BUILTIN_RSI_INDICATOR = {
1192
1207
  showLegend: true,
1193
1208
  showValueLabel: true,
1194
1209
  showGuideLines: true,
1195
- showScaleLabels: true
1210
+ showScaleLabels: true,
1211
+ showValueLine: false
1196
1212
  },
1197
1213
  draw: (ctx, renderContext, inputs) => {
1198
1214
  const length = clampIndicatorLength(inputs.length, 14);
@@ -1215,7 +1231,8 @@ var BUILTIN_RSI_INDICATOR = {
1215
1231
  valueLabelColor: "#9E9E9E",
1216
1232
  valueLabelBackgroundColor: "#9E9E9E",
1217
1233
  valueLabelTextColor: "#0f172a",
1218
- showLegend: inputs.showLegend !== false
1234
+ showLegend: inputs.showLegend !== false,
1235
+ valueLine: inputs.showValueLine === true
1219
1236
  }
1220
1237
  );
1221
1238
  }
@@ -1351,6 +1368,24 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
1351
1368
  }
1352
1369
  return null;
1353
1370
  };
1371
+ if (options.valueLines) {
1372
+ ctx.save();
1373
+ ctx.lineWidth = 1;
1374
+ ctx.setLineDash([3, 3]);
1375
+ ctx.globalAlpha = 0.65;
1376
+ for (const spec of seriesList) {
1377
+ if (spec.histogram) continue;
1378
+ const latest = latestOf(spec.values);
1379
+ if (latest === null || latest < minValue || latest > maxValue) continue;
1380
+ const y = yFromValue(latest);
1381
+ ctx.strokeStyle = spec.color;
1382
+ ctx.beginPath();
1383
+ ctx.moveTo(renderContext.chartLeft, y);
1384
+ ctx.lineTo(renderContext.chartRight, y);
1385
+ ctx.stroke();
1386
+ }
1387
+ ctx.restore();
1388
+ }
1354
1389
  const paneInfo = {
1355
1390
  ...options.title ? { title: options.title } : {},
1356
1391
  axis: {
@@ -1704,7 +1739,8 @@ var BUILTIN_MACD_INDICATOR = {
1704
1739
  macdColor: "#2962ff",
1705
1740
  signalColor: "#ff6d00",
1706
1741
  histUpColor: "#26a69a",
1707
- histDownColor: "#ef5350"
1742
+ histDownColor: "#ef5350",
1743
+ showValueLine: false
1708
1744
  },
1709
1745
  draw: (ctx, renderContext, inputs) => {
1710
1746
  const fast = clampIndicatorLength(inputs.fast, 12);
@@ -1733,7 +1769,8 @@ var BUILTIN_MACD_INDICATOR = {
1733
1769
  includeZero: true,
1734
1770
  guideLines: [0],
1735
1771
  decimals: 2,
1736
- valueLabelSeriesIndex: 1
1772
+ valueLabelSeriesIndex: 1,
1773
+ valueLines: inputs.showValueLine === true
1737
1774
  }
1738
1775
  );
1739
1776
  }
@@ -1743,7 +1780,7 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1743
1780
  name: "Stoch",
1744
1781
  pane: "separate",
1745
1782
  paneHeightRatio: 0.18,
1746
- defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1783
+ defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00", showValueLine: false },
1747
1784
  draw: (ctx, renderContext, inputs) => {
1748
1785
  const kLength = clampIndicatorLength(inputs.kLength, 14);
1749
1786
  const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 1);
@@ -1766,7 +1803,8 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1766
1803
  maxOverride: 100,
1767
1804
  guideLines: [20, 80],
1768
1805
  axisTicks: [0, 20, 50, 80, 100],
1769
- decimals: 2
1806
+ decimals: 2,
1807
+ valueLines: inputs.showValueLine === true
1770
1808
  }
1771
1809
  );
1772
1810
  }
@@ -1776,7 +1814,15 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1776
1814
  name: "Stoch RSI",
1777
1815
  pane: "separate",
1778
1816
  paneHeightRatio: 0.18,
1779
- defaultInputs: { rsiLength: 14, stochLength: 14, kSmoothing: 3, dSmoothing: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1817
+ defaultInputs: {
1818
+ rsiLength: 14,
1819
+ stochLength: 14,
1820
+ kSmoothing: 3,
1821
+ dSmoothing: 3,
1822
+ kColor: "#2962ff",
1823
+ dColor: "#ff6d00",
1824
+ showValueLine: false
1825
+ },
1780
1826
  draw: (ctx, renderContext, inputs) => {
1781
1827
  const rsiLength = clampIndicatorLength(inputs.rsiLength, 14);
1782
1828
  const stochLength = clampIndicatorLength(inputs.stochLength, 14);
@@ -1800,7 +1846,8 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1800
1846
  maxOverride: 100,
1801
1847
  guideLines: [20, 80],
1802
1848
  axisTicks: [0, 20, 50, 80, 100],
1803
- decimals: 2
1849
+ decimals: 2,
1850
+ valueLines: inputs.showValueLine === true
1804
1851
  }
1805
1852
  );
1806
1853
  }
@@ -1810,7 +1857,14 @@ var BUILTIN_ADX_INDICATOR = {
1810
1857
  name: "ADX/DMI",
1811
1858
  pane: "separate",
1812
1859
  paneHeightRatio: 0.18,
1813
- defaultInputs: { length: 14, adxColor: "#ff6d00", plusDiColor: "#26a69a", minusDiColor: "#ef5350", showDi: true },
1860
+ defaultInputs: {
1861
+ length: 14,
1862
+ adxColor: "#ff6d00",
1863
+ plusDiColor: "#26a69a",
1864
+ minusDiColor: "#ef5350",
1865
+ showDi: true,
1866
+ showValueLine: false
1867
+ },
1814
1868
  draw: (ctx, renderContext, inputs) => {
1815
1869
  const length = clampIndicatorLength(inputs.length, 14);
1816
1870
  const { adx, plusDi, minusDi } = withCachedComputation(
@@ -1831,7 +1885,8 @@ var BUILTIN_ADX_INDICATOR = {
1831
1885
  title: `ADX ${length}`,
1832
1886
  minOverride: 0,
1833
1887
  guideLines: [20],
1834
- decimals: 2
1888
+ decimals: 2,
1889
+ valueLines: inputs.showValueLine === true
1835
1890
  });
1836
1891
  }
1837
1892
  };
@@ -1840,14 +1895,14 @@ var BUILTIN_OBV_INDICATOR = {
1840
1895
  name: "OBV",
1841
1896
  pane: "separate",
1842
1897
  paneHeightRatio: 0.16,
1843
- defaultInputs: { color: "#2962ff", width: 2 },
1898
+ defaultInputs: { color: "#2962ff", width: 2, showValueLine: false },
1844
1899
  draw: (ctx, renderContext, inputs) => {
1845
1900
  const values = withCachedSeries("obv", renderContext.data, () => computeObvSeries(renderContext.data));
1846
1901
  return drawSeparateMultiSeries(
1847
1902
  ctx,
1848
1903
  renderContext,
1849
1904
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2, label: "OBV" }],
1850
- { title: "OBV", format: formatCompactNumber }
1905
+ { title: "OBV", format: formatCompactNumber, valueLines: inputs.showValueLine === true }
1851
1906
  );
1852
1907
  }
1853
1908
  };
@@ -1856,7 +1911,7 @@ var BUILTIN_MFI_INDICATOR = {
1856
1911
  name: "MFI",
1857
1912
  pane: "separate",
1858
1913
  paneHeightRatio: 0.16,
1859
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1914
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1860
1915
  draw: (ctx, renderContext, inputs) => {
1861
1916
  const length = clampIndicatorLength(inputs.length, 14);
1862
1917
  const values = withCachedSeries(
@@ -1874,7 +1929,8 @@ var BUILTIN_MFI_INDICATOR = {
1874
1929
  maxOverride: 100,
1875
1930
  guideLines: [20, 80],
1876
1931
  axisTicks: [0, 20, 50, 80, 100],
1877
- decimals: 2
1932
+ decimals: 2,
1933
+ valueLines: inputs.showValueLine === true
1878
1934
  }
1879
1935
  );
1880
1936
  }
@@ -1884,7 +1940,7 @@ var BUILTIN_CCI_INDICATOR = {
1884
1940
  name: "CCI",
1885
1941
  pane: "separate",
1886
1942
  paneHeightRatio: 0.16,
1887
- defaultInputs: { length: 20, color: "#2962ff", width: 2 },
1943
+ defaultInputs: { length: 20, color: "#2962ff", width: 2, showValueLine: false },
1888
1944
  draw: (ctx, renderContext, inputs) => {
1889
1945
  const length = clampIndicatorLength(inputs.length, 20);
1890
1946
  const values = withCachedSeries(
@@ -1896,7 +1952,7 @@ var BUILTIN_CCI_INDICATOR = {
1896
1952
  ctx,
1897
1953
  renderContext,
1898
1954
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1899
- { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2 }
1955
+ { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2, valueLines: inputs.showValueLine === true }
1900
1956
  );
1901
1957
  }
1902
1958
  };
@@ -1905,7 +1961,7 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1905
1961
  name: "Williams %R",
1906
1962
  pane: "separate",
1907
1963
  paneHeightRatio: 0.16,
1908
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1964
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1909
1965
  draw: (ctx, renderContext, inputs) => {
1910
1966
  const length = clampIndicatorLength(inputs.length, 14);
1911
1967
  const values = withCachedSeries(
@@ -1923,7 +1979,8 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1923
1979
  maxOverride: 0,
1924
1980
  guideLines: [-80, -20],
1925
1981
  axisTicks: [-100, -80, -50, -20, 0],
1926
- decimals: 2
1982
+ decimals: 2,
1983
+ valueLines: inputs.showValueLine === true
1927
1984
  }
1928
1985
  );
1929
1986
  }
@@ -1933,7 +1990,7 @@ var BUILTIN_ROC_INDICATOR = {
1933
1990
  name: "ROC",
1934
1991
  pane: "separate",
1935
1992
  paneHeightRatio: 0.16,
1936
- defaultInputs: { length: 9, color: "#2962ff", width: 2 },
1993
+ defaultInputs: { length: 9, color: "#2962ff", width: 2, showValueLine: false },
1937
1994
  draw: (ctx, renderContext, inputs) => {
1938
1995
  const length = clampIndicatorLength(inputs.length, 9);
1939
1996
  const values = withCachedSeries(
@@ -1945,7 +2002,7 @@ var BUILTIN_ROC_INDICATOR = {
1945
2002
  ctx,
1946
2003
  renderContext,
1947
2004
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1948
- { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2005
+ { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1949
2006
  );
1950
2007
  }
1951
2008
  };
@@ -1954,7 +2011,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1954
2011
  name: "Momentum",
1955
2012
  pane: "separate",
1956
2013
  paneHeightRatio: 0.16,
1957
- defaultInputs: { length: 10, color: "#2962ff", width: 2 },
2014
+ defaultInputs: { length: 10, color: "#2962ff", width: 2, showValueLine: false },
1958
2015
  draw: (ctx, renderContext, inputs) => {
1959
2016
  const length = clampIndicatorLength(inputs.length, 10);
1960
2017
  const values = withCachedSeries(
@@ -1966,7 +2023,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1966
2023
  ctx,
1967
2024
  renderContext,
1968
2025
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1969
- { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2026
+ { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1970
2027
  );
1971
2028
  }
1972
2029
  };
package/dist/index.cjs CHANGED
@@ -850,6 +850,19 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
850
850
  break;
851
851
  }
852
852
  }
853
+ if (options.valueLine && latestValue !== null && latestValue >= minValue && latestValue <= maxValue) {
854
+ ctx.save();
855
+ ctx.lineWidth = 1;
856
+ ctx.setLineDash([3, 3]);
857
+ ctx.globalAlpha = 0.65;
858
+ ctx.strokeStyle = color;
859
+ const y = yFromValue(latestValue);
860
+ ctx.beginPath();
861
+ ctx.moveTo(renderContext.chartLeft, y);
862
+ ctx.lineTo(renderContext.chartRight, y);
863
+ ctx.stroke();
864
+ ctx.restore();
865
+ }
853
866
  const decimals = options.decimals ?? 2;
854
867
  const formatValue = (value) => value.toFixed(decimals);
855
868
  const axisTicks = options.axisTicks ?? guideLines;
@@ -1177,7 +1190,7 @@ var BUILTIN_STDDEV_INDICATOR = {
1177
1190
  name: "StdDev",
1178
1191
  pane: "separate",
1179
1192
  paneHeightRatio: 0.16,
1180
- defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
1193
+ defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2, showValueLine: false },
1181
1194
  draw: (ctx, renderContext, inputs) => {
1182
1195
  const length = clampIndicatorLength(inputs.length, 20);
1183
1196
  const values = withCachedSeries(
@@ -1187,7 +1200,8 @@ var BUILTIN_STDDEV_INDICATOR = {
1187
1200
  );
1188
1201
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
1189
1202
  title: `StdDev ${length}`,
1190
- decimals: 2
1203
+ decimals: 2,
1204
+ valueLine: inputs.showValueLine === true
1191
1205
  });
1192
1206
  }
1193
1207
  };
@@ -1196,13 +1210,14 @@ var BUILTIN_ATR_INDICATOR = {
1196
1210
  name: "ATR",
1197
1211
  pane: "separate",
1198
1212
  paneHeightRatio: 0.16,
1199
- defaultInputs: { length: 14, color: "#eab308", width: 2 },
1213
+ defaultInputs: { length: 14, color: "#eab308", width: 2, showValueLine: false },
1200
1214
  draw: (ctx, renderContext, inputs) => {
1201
1215
  const length = clampIndicatorLength(inputs.length, 14);
1202
1216
  const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
1203
1217
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
1204
1218
  title: `ATR ${length}`,
1205
- decimals: 2
1219
+ decimals: 2,
1220
+ valueLine: inputs.showValueLine === true
1206
1221
  });
1207
1222
  }
1208
1223
  };
@@ -1218,7 +1233,8 @@ var BUILTIN_RSI_INDICATOR = {
1218
1233
  showLegend: true,
1219
1234
  showValueLabel: true,
1220
1235
  showGuideLines: true,
1221
- showScaleLabels: true
1236
+ showScaleLabels: true,
1237
+ showValueLine: false
1222
1238
  },
1223
1239
  draw: (ctx, renderContext, inputs) => {
1224
1240
  const length = clampIndicatorLength(inputs.length, 14);
@@ -1241,7 +1257,8 @@ var BUILTIN_RSI_INDICATOR = {
1241
1257
  valueLabelColor: "#9E9E9E",
1242
1258
  valueLabelBackgroundColor: "#9E9E9E",
1243
1259
  valueLabelTextColor: "#0f172a",
1244
- showLegend: inputs.showLegend !== false
1260
+ showLegend: inputs.showLegend !== false,
1261
+ valueLine: inputs.showValueLine === true
1245
1262
  }
1246
1263
  );
1247
1264
  }
@@ -1377,6 +1394,24 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
1377
1394
  }
1378
1395
  return null;
1379
1396
  };
1397
+ if (options.valueLines) {
1398
+ ctx.save();
1399
+ ctx.lineWidth = 1;
1400
+ ctx.setLineDash([3, 3]);
1401
+ ctx.globalAlpha = 0.65;
1402
+ for (const spec of seriesList) {
1403
+ if (spec.histogram) continue;
1404
+ const latest = latestOf(spec.values);
1405
+ if (latest === null || latest < minValue || latest > maxValue) continue;
1406
+ const y = yFromValue(latest);
1407
+ ctx.strokeStyle = spec.color;
1408
+ ctx.beginPath();
1409
+ ctx.moveTo(renderContext.chartLeft, y);
1410
+ ctx.lineTo(renderContext.chartRight, y);
1411
+ ctx.stroke();
1412
+ }
1413
+ ctx.restore();
1414
+ }
1380
1415
  const paneInfo = {
1381
1416
  ...options.title ? { title: options.title } : {},
1382
1417
  axis: {
@@ -1730,7 +1765,8 @@ var BUILTIN_MACD_INDICATOR = {
1730
1765
  macdColor: "#2962ff",
1731
1766
  signalColor: "#ff6d00",
1732
1767
  histUpColor: "#26a69a",
1733
- histDownColor: "#ef5350"
1768
+ histDownColor: "#ef5350",
1769
+ showValueLine: false
1734
1770
  },
1735
1771
  draw: (ctx, renderContext, inputs) => {
1736
1772
  const fast = clampIndicatorLength(inputs.fast, 12);
@@ -1759,7 +1795,8 @@ var BUILTIN_MACD_INDICATOR = {
1759
1795
  includeZero: true,
1760
1796
  guideLines: [0],
1761
1797
  decimals: 2,
1762
- valueLabelSeriesIndex: 1
1798
+ valueLabelSeriesIndex: 1,
1799
+ valueLines: inputs.showValueLine === true
1763
1800
  }
1764
1801
  );
1765
1802
  }
@@ -1769,7 +1806,7 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1769
1806
  name: "Stoch",
1770
1807
  pane: "separate",
1771
1808
  paneHeightRatio: 0.18,
1772
- defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1809
+ defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00", showValueLine: false },
1773
1810
  draw: (ctx, renderContext, inputs) => {
1774
1811
  const kLength = clampIndicatorLength(inputs.kLength, 14);
1775
1812
  const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 1);
@@ -1792,7 +1829,8 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1792
1829
  maxOverride: 100,
1793
1830
  guideLines: [20, 80],
1794
1831
  axisTicks: [0, 20, 50, 80, 100],
1795
- decimals: 2
1832
+ decimals: 2,
1833
+ valueLines: inputs.showValueLine === true
1796
1834
  }
1797
1835
  );
1798
1836
  }
@@ -1802,7 +1840,15 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1802
1840
  name: "Stoch RSI",
1803
1841
  pane: "separate",
1804
1842
  paneHeightRatio: 0.18,
1805
- defaultInputs: { rsiLength: 14, stochLength: 14, kSmoothing: 3, dSmoothing: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1843
+ defaultInputs: {
1844
+ rsiLength: 14,
1845
+ stochLength: 14,
1846
+ kSmoothing: 3,
1847
+ dSmoothing: 3,
1848
+ kColor: "#2962ff",
1849
+ dColor: "#ff6d00",
1850
+ showValueLine: false
1851
+ },
1806
1852
  draw: (ctx, renderContext, inputs) => {
1807
1853
  const rsiLength = clampIndicatorLength(inputs.rsiLength, 14);
1808
1854
  const stochLength = clampIndicatorLength(inputs.stochLength, 14);
@@ -1826,7 +1872,8 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1826
1872
  maxOverride: 100,
1827
1873
  guideLines: [20, 80],
1828
1874
  axisTicks: [0, 20, 50, 80, 100],
1829
- decimals: 2
1875
+ decimals: 2,
1876
+ valueLines: inputs.showValueLine === true
1830
1877
  }
1831
1878
  );
1832
1879
  }
@@ -1836,7 +1883,14 @@ var BUILTIN_ADX_INDICATOR = {
1836
1883
  name: "ADX/DMI",
1837
1884
  pane: "separate",
1838
1885
  paneHeightRatio: 0.18,
1839
- defaultInputs: { length: 14, adxColor: "#ff6d00", plusDiColor: "#26a69a", minusDiColor: "#ef5350", showDi: true },
1886
+ defaultInputs: {
1887
+ length: 14,
1888
+ adxColor: "#ff6d00",
1889
+ plusDiColor: "#26a69a",
1890
+ minusDiColor: "#ef5350",
1891
+ showDi: true,
1892
+ showValueLine: false
1893
+ },
1840
1894
  draw: (ctx, renderContext, inputs) => {
1841
1895
  const length = clampIndicatorLength(inputs.length, 14);
1842
1896
  const { adx, plusDi, minusDi } = withCachedComputation(
@@ -1857,7 +1911,8 @@ var BUILTIN_ADX_INDICATOR = {
1857
1911
  title: `ADX ${length}`,
1858
1912
  minOverride: 0,
1859
1913
  guideLines: [20],
1860
- decimals: 2
1914
+ decimals: 2,
1915
+ valueLines: inputs.showValueLine === true
1861
1916
  });
1862
1917
  }
1863
1918
  };
@@ -1866,14 +1921,14 @@ var BUILTIN_OBV_INDICATOR = {
1866
1921
  name: "OBV",
1867
1922
  pane: "separate",
1868
1923
  paneHeightRatio: 0.16,
1869
- defaultInputs: { color: "#2962ff", width: 2 },
1924
+ defaultInputs: { color: "#2962ff", width: 2, showValueLine: false },
1870
1925
  draw: (ctx, renderContext, inputs) => {
1871
1926
  const values = withCachedSeries("obv", renderContext.data, () => computeObvSeries(renderContext.data));
1872
1927
  return drawSeparateMultiSeries(
1873
1928
  ctx,
1874
1929
  renderContext,
1875
1930
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2, label: "OBV" }],
1876
- { title: "OBV", format: formatCompactNumber }
1931
+ { title: "OBV", format: formatCompactNumber, valueLines: inputs.showValueLine === true }
1877
1932
  );
1878
1933
  }
1879
1934
  };
@@ -1882,7 +1937,7 @@ var BUILTIN_MFI_INDICATOR = {
1882
1937
  name: "MFI",
1883
1938
  pane: "separate",
1884
1939
  paneHeightRatio: 0.16,
1885
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1940
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1886
1941
  draw: (ctx, renderContext, inputs) => {
1887
1942
  const length = clampIndicatorLength(inputs.length, 14);
1888
1943
  const values = withCachedSeries(
@@ -1900,7 +1955,8 @@ var BUILTIN_MFI_INDICATOR = {
1900
1955
  maxOverride: 100,
1901
1956
  guideLines: [20, 80],
1902
1957
  axisTicks: [0, 20, 50, 80, 100],
1903
- decimals: 2
1958
+ decimals: 2,
1959
+ valueLines: inputs.showValueLine === true
1904
1960
  }
1905
1961
  );
1906
1962
  }
@@ -1910,7 +1966,7 @@ var BUILTIN_CCI_INDICATOR = {
1910
1966
  name: "CCI",
1911
1967
  pane: "separate",
1912
1968
  paneHeightRatio: 0.16,
1913
- defaultInputs: { length: 20, color: "#2962ff", width: 2 },
1969
+ defaultInputs: { length: 20, color: "#2962ff", width: 2, showValueLine: false },
1914
1970
  draw: (ctx, renderContext, inputs) => {
1915
1971
  const length = clampIndicatorLength(inputs.length, 20);
1916
1972
  const values = withCachedSeries(
@@ -1922,7 +1978,7 @@ var BUILTIN_CCI_INDICATOR = {
1922
1978
  ctx,
1923
1979
  renderContext,
1924
1980
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1925
- { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2 }
1981
+ { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2, valueLines: inputs.showValueLine === true }
1926
1982
  );
1927
1983
  }
1928
1984
  };
@@ -1931,7 +1987,7 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1931
1987
  name: "Williams %R",
1932
1988
  pane: "separate",
1933
1989
  paneHeightRatio: 0.16,
1934
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1990
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1935
1991
  draw: (ctx, renderContext, inputs) => {
1936
1992
  const length = clampIndicatorLength(inputs.length, 14);
1937
1993
  const values = withCachedSeries(
@@ -1949,7 +2005,8 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1949
2005
  maxOverride: 0,
1950
2006
  guideLines: [-80, -20],
1951
2007
  axisTicks: [-100, -80, -50, -20, 0],
1952
- decimals: 2
2008
+ decimals: 2,
2009
+ valueLines: inputs.showValueLine === true
1953
2010
  }
1954
2011
  );
1955
2012
  }
@@ -1959,7 +2016,7 @@ var BUILTIN_ROC_INDICATOR = {
1959
2016
  name: "ROC",
1960
2017
  pane: "separate",
1961
2018
  paneHeightRatio: 0.16,
1962
- defaultInputs: { length: 9, color: "#2962ff", width: 2 },
2019
+ defaultInputs: { length: 9, color: "#2962ff", width: 2, showValueLine: false },
1963
2020
  draw: (ctx, renderContext, inputs) => {
1964
2021
  const length = clampIndicatorLength(inputs.length, 9);
1965
2022
  const values = withCachedSeries(
@@ -1971,7 +2028,7 @@ var BUILTIN_ROC_INDICATOR = {
1971
2028
  ctx,
1972
2029
  renderContext,
1973
2030
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1974
- { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2031
+ { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1975
2032
  );
1976
2033
  }
1977
2034
  };
@@ -1980,7 +2037,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1980
2037
  name: "Momentum",
1981
2038
  pane: "separate",
1982
2039
  paneHeightRatio: 0.16,
1983
- defaultInputs: { length: 10, color: "#2962ff", width: 2 },
2040
+ defaultInputs: { length: 10, color: "#2962ff", width: 2, showValueLine: false },
1984
2041
  draw: (ctx, renderContext, inputs) => {
1985
2042
  const length = clampIndicatorLength(inputs.length, 10);
1986
2043
  const values = withCachedSeries(
@@ -1992,7 +2049,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1992
2049
  ctx,
1993
2050
  renderContext,
1994
2051
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1995
- { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2052
+ { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1996
2053
  );
1997
2054
  }
1998
2055
  };
package/dist/index.js CHANGED
@@ -824,6 +824,19 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
824
824
  break;
825
825
  }
826
826
  }
827
+ if (options.valueLine && latestValue !== null && latestValue >= minValue && latestValue <= maxValue) {
828
+ ctx.save();
829
+ ctx.lineWidth = 1;
830
+ ctx.setLineDash([3, 3]);
831
+ ctx.globalAlpha = 0.65;
832
+ ctx.strokeStyle = color;
833
+ const y = yFromValue(latestValue);
834
+ ctx.beginPath();
835
+ ctx.moveTo(renderContext.chartLeft, y);
836
+ ctx.lineTo(renderContext.chartRight, y);
837
+ ctx.stroke();
838
+ ctx.restore();
839
+ }
827
840
  const decimals = options.decimals ?? 2;
828
841
  const formatValue = (value) => value.toFixed(decimals);
829
842
  const axisTicks = options.axisTicks ?? guideLines;
@@ -1151,7 +1164,7 @@ var BUILTIN_STDDEV_INDICATOR = {
1151
1164
  name: "StdDev",
1152
1165
  pane: "separate",
1153
1166
  paneHeightRatio: 0.16,
1154
- defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
1167
+ defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2, showValueLine: false },
1155
1168
  draw: (ctx, renderContext, inputs) => {
1156
1169
  const length = clampIndicatorLength(inputs.length, 20);
1157
1170
  const values = withCachedSeries(
@@ -1161,7 +1174,8 @@ var BUILTIN_STDDEV_INDICATOR = {
1161
1174
  );
1162
1175
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
1163
1176
  title: `StdDev ${length}`,
1164
- decimals: 2
1177
+ decimals: 2,
1178
+ valueLine: inputs.showValueLine === true
1165
1179
  });
1166
1180
  }
1167
1181
  };
@@ -1170,13 +1184,14 @@ var BUILTIN_ATR_INDICATOR = {
1170
1184
  name: "ATR",
1171
1185
  pane: "separate",
1172
1186
  paneHeightRatio: 0.16,
1173
- defaultInputs: { length: 14, color: "#eab308", width: 2 },
1187
+ defaultInputs: { length: 14, color: "#eab308", width: 2, showValueLine: false },
1174
1188
  draw: (ctx, renderContext, inputs) => {
1175
1189
  const length = clampIndicatorLength(inputs.length, 14);
1176
1190
  const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
1177
1191
  return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
1178
1192
  title: `ATR ${length}`,
1179
- decimals: 2
1193
+ decimals: 2,
1194
+ valueLine: inputs.showValueLine === true
1180
1195
  });
1181
1196
  }
1182
1197
  };
@@ -1192,7 +1207,8 @@ var BUILTIN_RSI_INDICATOR = {
1192
1207
  showLegend: true,
1193
1208
  showValueLabel: true,
1194
1209
  showGuideLines: true,
1195
- showScaleLabels: true
1210
+ showScaleLabels: true,
1211
+ showValueLine: false
1196
1212
  },
1197
1213
  draw: (ctx, renderContext, inputs) => {
1198
1214
  const length = clampIndicatorLength(inputs.length, 14);
@@ -1215,7 +1231,8 @@ var BUILTIN_RSI_INDICATOR = {
1215
1231
  valueLabelColor: "#9E9E9E",
1216
1232
  valueLabelBackgroundColor: "#9E9E9E",
1217
1233
  valueLabelTextColor: "#0f172a",
1218
- showLegend: inputs.showLegend !== false
1234
+ showLegend: inputs.showLegend !== false,
1235
+ valueLine: inputs.showValueLine === true
1219
1236
  }
1220
1237
  );
1221
1238
  }
@@ -1351,6 +1368,24 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
1351
1368
  }
1352
1369
  return null;
1353
1370
  };
1371
+ if (options.valueLines) {
1372
+ ctx.save();
1373
+ ctx.lineWidth = 1;
1374
+ ctx.setLineDash([3, 3]);
1375
+ ctx.globalAlpha = 0.65;
1376
+ for (const spec of seriesList) {
1377
+ if (spec.histogram) continue;
1378
+ const latest = latestOf(spec.values);
1379
+ if (latest === null || latest < minValue || latest > maxValue) continue;
1380
+ const y = yFromValue(latest);
1381
+ ctx.strokeStyle = spec.color;
1382
+ ctx.beginPath();
1383
+ ctx.moveTo(renderContext.chartLeft, y);
1384
+ ctx.lineTo(renderContext.chartRight, y);
1385
+ ctx.stroke();
1386
+ }
1387
+ ctx.restore();
1388
+ }
1354
1389
  const paneInfo = {
1355
1390
  ...options.title ? { title: options.title } : {},
1356
1391
  axis: {
@@ -1704,7 +1739,8 @@ var BUILTIN_MACD_INDICATOR = {
1704
1739
  macdColor: "#2962ff",
1705
1740
  signalColor: "#ff6d00",
1706
1741
  histUpColor: "#26a69a",
1707
- histDownColor: "#ef5350"
1742
+ histDownColor: "#ef5350",
1743
+ showValueLine: false
1708
1744
  },
1709
1745
  draw: (ctx, renderContext, inputs) => {
1710
1746
  const fast = clampIndicatorLength(inputs.fast, 12);
@@ -1733,7 +1769,8 @@ var BUILTIN_MACD_INDICATOR = {
1733
1769
  includeZero: true,
1734
1770
  guideLines: [0],
1735
1771
  decimals: 2,
1736
- valueLabelSeriesIndex: 1
1772
+ valueLabelSeriesIndex: 1,
1773
+ valueLines: inputs.showValueLine === true
1737
1774
  }
1738
1775
  );
1739
1776
  }
@@ -1743,7 +1780,7 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1743
1780
  name: "Stoch",
1744
1781
  pane: "separate",
1745
1782
  paneHeightRatio: 0.18,
1746
- defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1783
+ defaultInputs: { kLength: 14, kSmoothing: 1, dLength: 3, kColor: "#2962ff", dColor: "#ff6d00", showValueLine: false },
1747
1784
  draw: (ctx, renderContext, inputs) => {
1748
1785
  const kLength = clampIndicatorLength(inputs.kLength, 14);
1749
1786
  const kSmoothing = clampIndicatorLength(inputs.kSmoothing, 1);
@@ -1766,7 +1803,8 @@ var BUILTIN_STOCHASTIC_INDICATOR = {
1766
1803
  maxOverride: 100,
1767
1804
  guideLines: [20, 80],
1768
1805
  axisTicks: [0, 20, 50, 80, 100],
1769
- decimals: 2
1806
+ decimals: 2,
1807
+ valueLines: inputs.showValueLine === true
1770
1808
  }
1771
1809
  );
1772
1810
  }
@@ -1776,7 +1814,15 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1776
1814
  name: "Stoch RSI",
1777
1815
  pane: "separate",
1778
1816
  paneHeightRatio: 0.18,
1779
- defaultInputs: { rsiLength: 14, stochLength: 14, kSmoothing: 3, dSmoothing: 3, kColor: "#2962ff", dColor: "#ff6d00" },
1817
+ defaultInputs: {
1818
+ rsiLength: 14,
1819
+ stochLength: 14,
1820
+ kSmoothing: 3,
1821
+ dSmoothing: 3,
1822
+ kColor: "#2962ff",
1823
+ dColor: "#ff6d00",
1824
+ showValueLine: false
1825
+ },
1780
1826
  draw: (ctx, renderContext, inputs) => {
1781
1827
  const rsiLength = clampIndicatorLength(inputs.rsiLength, 14);
1782
1828
  const stochLength = clampIndicatorLength(inputs.stochLength, 14);
@@ -1800,7 +1846,8 @@ var BUILTIN_STOCHRSI_INDICATOR = {
1800
1846
  maxOverride: 100,
1801
1847
  guideLines: [20, 80],
1802
1848
  axisTicks: [0, 20, 50, 80, 100],
1803
- decimals: 2
1849
+ decimals: 2,
1850
+ valueLines: inputs.showValueLine === true
1804
1851
  }
1805
1852
  );
1806
1853
  }
@@ -1810,7 +1857,14 @@ var BUILTIN_ADX_INDICATOR = {
1810
1857
  name: "ADX/DMI",
1811
1858
  pane: "separate",
1812
1859
  paneHeightRatio: 0.18,
1813
- defaultInputs: { length: 14, adxColor: "#ff6d00", plusDiColor: "#26a69a", minusDiColor: "#ef5350", showDi: true },
1860
+ defaultInputs: {
1861
+ length: 14,
1862
+ adxColor: "#ff6d00",
1863
+ plusDiColor: "#26a69a",
1864
+ minusDiColor: "#ef5350",
1865
+ showDi: true,
1866
+ showValueLine: false
1867
+ },
1814
1868
  draw: (ctx, renderContext, inputs) => {
1815
1869
  const length = clampIndicatorLength(inputs.length, 14);
1816
1870
  const { adx, plusDi, minusDi } = withCachedComputation(
@@ -1831,7 +1885,8 @@ var BUILTIN_ADX_INDICATOR = {
1831
1885
  title: `ADX ${length}`,
1832
1886
  minOverride: 0,
1833
1887
  guideLines: [20],
1834
- decimals: 2
1888
+ decimals: 2,
1889
+ valueLines: inputs.showValueLine === true
1835
1890
  });
1836
1891
  }
1837
1892
  };
@@ -1840,14 +1895,14 @@ var BUILTIN_OBV_INDICATOR = {
1840
1895
  name: "OBV",
1841
1896
  pane: "separate",
1842
1897
  paneHeightRatio: 0.16,
1843
- defaultInputs: { color: "#2962ff", width: 2 },
1898
+ defaultInputs: { color: "#2962ff", width: 2, showValueLine: false },
1844
1899
  draw: (ctx, renderContext, inputs) => {
1845
1900
  const values = withCachedSeries("obv", renderContext.data, () => computeObvSeries(renderContext.data));
1846
1901
  return drawSeparateMultiSeries(
1847
1902
  ctx,
1848
1903
  renderContext,
1849
1904
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2, label: "OBV" }],
1850
- { title: "OBV", format: formatCompactNumber }
1905
+ { title: "OBV", format: formatCompactNumber, valueLines: inputs.showValueLine === true }
1851
1906
  );
1852
1907
  }
1853
1908
  };
@@ -1856,7 +1911,7 @@ var BUILTIN_MFI_INDICATOR = {
1856
1911
  name: "MFI",
1857
1912
  pane: "separate",
1858
1913
  paneHeightRatio: 0.16,
1859
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1914
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1860
1915
  draw: (ctx, renderContext, inputs) => {
1861
1916
  const length = clampIndicatorLength(inputs.length, 14);
1862
1917
  const values = withCachedSeries(
@@ -1874,7 +1929,8 @@ var BUILTIN_MFI_INDICATOR = {
1874
1929
  maxOverride: 100,
1875
1930
  guideLines: [20, 80],
1876
1931
  axisTicks: [0, 20, 50, 80, 100],
1877
- decimals: 2
1932
+ decimals: 2,
1933
+ valueLines: inputs.showValueLine === true
1878
1934
  }
1879
1935
  );
1880
1936
  }
@@ -1884,7 +1940,7 @@ var BUILTIN_CCI_INDICATOR = {
1884
1940
  name: "CCI",
1885
1941
  pane: "separate",
1886
1942
  paneHeightRatio: 0.16,
1887
- defaultInputs: { length: 20, color: "#2962ff", width: 2 },
1943
+ defaultInputs: { length: 20, color: "#2962ff", width: 2, showValueLine: false },
1888
1944
  draw: (ctx, renderContext, inputs) => {
1889
1945
  const length = clampIndicatorLength(inputs.length, 20);
1890
1946
  const values = withCachedSeries(
@@ -1896,7 +1952,7 @@ var BUILTIN_CCI_INDICATOR = {
1896
1952
  ctx,
1897
1953
  renderContext,
1898
1954
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1899
- { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2 }
1955
+ { title: `CCI ${length}`, guideLines: [-100, 0, 100], decimals: 2, valueLines: inputs.showValueLine === true }
1900
1956
  );
1901
1957
  }
1902
1958
  };
@@ -1905,7 +1961,7 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1905
1961
  name: "Williams %R",
1906
1962
  pane: "separate",
1907
1963
  paneHeightRatio: 0.16,
1908
- defaultInputs: { length: 14, color: "#7e57c2", width: 2 },
1964
+ defaultInputs: { length: 14, color: "#7e57c2", width: 2, showValueLine: false },
1909
1965
  draw: (ctx, renderContext, inputs) => {
1910
1966
  const length = clampIndicatorLength(inputs.length, 14);
1911
1967
  const values = withCachedSeries(
@@ -1923,7 +1979,8 @@ var BUILTIN_WILLIAMSR_INDICATOR = {
1923
1979
  maxOverride: 0,
1924
1980
  guideLines: [-80, -20],
1925
1981
  axisTicks: [-100, -80, -50, -20, 0],
1926
- decimals: 2
1982
+ decimals: 2,
1983
+ valueLines: inputs.showValueLine === true
1927
1984
  }
1928
1985
  );
1929
1986
  }
@@ -1933,7 +1990,7 @@ var BUILTIN_ROC_INDICATOR = {
1933
1990
  name: "ROC",
1934
1991
  pane: "separate",
1935
1992
  paneHeightRatio: 0.16,
1936
- defaultInputs: { length: 9, color: "#2962ff", width: 2 },
1993
+ defaultInputs: { length: 9, color: "#2962ff", width: 2, showValueLine: false },
1937
1994
  draw: (ctx, renderContext, inputs) => {
1938
1995
  const length = clampIndicatorLength(inputs.length, 9);
1939
1996
  const values = withCachedSeries(
@@ -1945,7 +2002,7 @@ var BUILTIN_ROC_INDICATOR = {
1945
2002
  ctx,
1946
2003
  renderContext,
1947
2004
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1948
- { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2005
+ { title: `ROC ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1949
2006
  );
1950
2007
  }
1951
2008
  };
@@ -1954,7 +2011,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1954
2011
  name: "Momentum",
1955
2012
  pane: "separate",
1956
2013
  paneHeightRatio: 0.16,
1957
- defaultInputs: { length: 10, color: "#2962ff", width: 2 },
2014
+ defaultInputs: { length: 10, color: "#2962ff", width: 2, showValueLine: false },
1958
2015
  draw: (ctx, renderContext, inputs) => {
1959
2016
  const length = clampIndicatorLength(inputs.length, 10);
1960
2017
  const values = withCachedSeries(
@@ -1966,7 +2023,7 @@ var BUILTIN_MOMENTUM_INDICATOR = {
1966
2023
  ctx,
1967
2024
  renderContext,
1968
2025
  [{ values, color: inputs.color ?? "#2962ff", width: Number(inputs.width) || 2 }],
1969
- { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2 }
2026
+ { title: `Mom ${length}`, includeZero: true, guideLines: [0], decimals: 2, valueLines: inputs.showValueLine === true }
1970
2027
  );
1971
2028
  }
1972
2029
  };
package/docs/API.md CHANGED
@@ -391,6 +391,8 @@ Built-in:
391
391
  - `"vwap"`: Session-anchored VWAP with optional sigma bands (overlay)
392
392
  - `"bollinger"`: Bollinger Bands (overlay)
393
393
  - `"macd"`: MACD with signal line and zero-anchored histogram (separate pane; inputs `fast`, `slow`, `signal`, colors)
394
+
395
+ All separate-pane indicators (`macd`, `stochastic`, `stochrsi`, `adx`, `obv`, `mfi`, `cci`, `williamsr`, `roc`, `momentum`, `rsi`, `atr`, `stddev`) also accept `showValueLine: boolean` (default `false`): draws a dotted horizontal line across the pane at each line's latest value, ticker-line style, matching the value tag on the right scale. Toggle it per instance, e.g. `chart.updateIndicator(id, { inputs: { showValueLine: true } })`.
394
396
  - `"stochastic"`: Stochastic %K/%D with 20/80 guides (separate pane; inputs `kLength`, `kSmoothing`, `dLength`)
395
397
  - `"stochrsi"`: Stochastic RSI %K/%D (separate pane; inputs `rsiLength`, `stochLength`, `kSmoothing`, `dSmoothing`)
396
398
  - `"adx"`: ADX with optional +DI/-DI lines, Wilder smoothing (separate pane; inputs `length`, `showDi`)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.128",
3
+ "version": "0.1.129",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",