hyperprop-charting-library 0.1.50 → 0.1.52

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 (10) hide show
  1. package/dist/hyperprop-charting-library.cjs +14 -5
  2. package/dist/hyperprop-charting-library.d.ts +1 -0
  3. package/dist/hyperprop-charting-library.js +14 -5
  4. package/dist/index.cjs +14 -5
  5. package/dist/index.d.cts +1 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +14 -5
  8. package/docs/API.md +2 -0
  9. package/docs/RECIPES.md +12 -0
  10. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -98,6 +98,7 @@ var DEFAULT_LABELS_OPTIONS = {
98
98
  askPrice: Number.NaN,
99
99
  showIndicatorNames: false,
100
100
  showIndicatorValues: false,
101
+ showIndicatorValueLabels: true,
101
102
  indicatorLegendPosition: "top-left",
102
103
  indicatorLegendOffsetX: 10,
103
104
  indicatorLegendOffsetY: 10,
@@ -629,9 +630,9 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
629
630
  {
630
631
  value: latestValue,
631
632
  text: formatValue(latestValue),
632
- color,
633
- backgroundColor: color,
634
- textColor: "#0f172a"
633
+ color: options.valueLabelColor ?? color,
634
+ backgroundColor: options.valueLabelBackgroundColor ?? options.valueLabelColor ?? color,
635
+ textColor: options.valueLabelTextColor ?? "#0f172a"
635
636
  }
636
637
  ];
637
638
  }
@@ -850,7 +851,10 @@ var BUILTIN_RSI_INDICATOR = {
850
851
  {
851
852
  title: `RSI ${length}`,
852
853
  axisTicks: [0, 30, 50, 70, 100],
853
- decimals: 2
854
+ decimals: 2,
855
+ valueLabelColor: "#9E9E9E",
856
+ valueLabelBackgroundColor: "#9E9E9E",
857
+ valueLabelTextColor: "#0f172a"
854
858
  }
855
859
  );
856
860
  }
@@ -2223,11 +2227,13 @@ function createChart(element, options = {}) {
2223
2227
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2224
2228
  ctx.save();
2225
2229
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2230
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2226
2231
  for (const tick of uniqueTicks) {
2227
2232
  if (tick < axisInfo.min || tick > axisInfo.max) {
2228
2233
  continue;
2229
2234
  }
2230
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2235
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2236
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2231
2237
  }
2232
2238
  ctx.restore();
2233
2239
  if (labels.visible) {
@@ -2243,6 +2249,9 @@ function createChart(element, options = {}) {
2243
2249
  drawText(legendParts.join(" "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
2244
2250
  }
2245
2251
  for (const label of paneInfo.valueLabels ?? []) {
2252
+ if (!labels.showIndicatorValueLabels) {
2253
+ continue;
2254
+ }
2246
2255
  if (!Number.isFinite(label.value) || label.value < axisInfo.min || label.value > axisInfo.max) {
2247
2256
  continue;
2248
2257
  }
package/dist/hyperprop-charting-library.d.ts CHANGED
@@ -315,6 +315,7 @@ interface LabelsOptions {
315
315
  askPrice?: number;
316
316
  showIndicatorNames?: boolean;
317
317
  showIndicatorValues?: boolean;
318
+ showIndicatorValueLabels?: boolean;
318
319
  indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
319
320
  indicatorLegendOffsetX?: number;
320
321
  indicatorLegendOffsetY?: number;
package/dist/hyperprop-charting-library.js CHANGED
@@ -74,6 +74,7 @@ var DEFAULT_LABELS_OPTIONS = {
74
74
  askPrice: Number.NaN,
75
75
  showIndicatorNames: false,
76
76
  showIndicatorValues: false,
77
+ showIndicatorValueLabels: true,
77
78
  indicatorLegendPosition: "top-left",
78
79
  indicatorLegendOffsetX: 10,
79
80
  indicatorLegendOffsetY: 10,
@@ -605,9 +606,9 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
605
606
  {
606
607
  value: latestValue,
607
608
  text: formatValue(latestValue),
608
- color,
609
- backgroundColor: color,
610
- textColor: "#0f172a"
609
+ color: options.valueLabelColor ?? color,
610
+ backgroundColor: options.valueLabelBackgroundColor ?? options.valueLabelColor ?? color,
611
+ textColor: options.valueLabelTextColor ?? "#0f172a"
611
612
  }
612
613
  ];
613
614
  }
@@ -826,7 +827,10 @@ var BUILTIN_RSI_INDICATOR = {
826
827
  {
827
828
  title: `RSI ${length}`,
828
829
  axisTicks: [0, 30, 50, 70, 100],
829
- decimals: 2
830
+ decimals: 2,
831
+ valueLabelColor: "#9E9E9E",
832
+ valueLabelBackgroundColor: "#9E9E9E",
833
+ valueLabelTextColor: "#0f172a"
830
834
  }
831
835
  );
832
836
  }
@@ -2199,11 +2203,13 @@ function createChart(element, options = {}) {
2199
2203
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2200
2204
  ctx.save();
2201
2205
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2206
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2202
2207
  for (const tick of uniqueTicks) {
2203
2208
  if (tick < axisInfo.min || tick > axisInfo.max) {
2204
2209
  continue;
2205
2210
  }
2206
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2211
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2212
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2207
2213
  }
2208
2214
  ctx.restore();
2209
2215
  if (labels.visible) {
@@ -2219,6 +2225,9 @@ function createChart(element, options = {}) {
2219
2225
  drawText(legendParts.join(" "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
2220
2226
  }
2221
2227
  for (const label of paneInfo.valueLabels ?? []) {
2228
+ if (!labels.showIndicatorValueLabels) {
2229
+ continue;
2230
+ }
2222
2231
  if (!Number.isFinite(label.value) || label.value < axisInfo.min || label.value > axisInfo.max) {
2223
2232
  continue;
2224
2233
  }
package/dist/index.cjs CHANGED
@@ -98,6 +98,7 @@ var DEFAULT_LABELS_OPTIONS = {
98
98
  askPrice: Number.NaN,
99
99
  showIndicatorNames: false,
100
100
  showIndicatorValues: false,
101
+ showIndicatorValueLabels: true,
101
102
  indicatorLegendPosition: "top-left",
102
103
  indicatorLegendOffsetX: 10,
103
104
  indicatorLegendOffsetY: 10,
@@ -629,9 +630,9 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
629
630
  {
630
631
  value: latestValue,
631
632
  text: formatValue(latestValue),
632
- color,
633
- backgroundColor: color,
634
- textColor: "#0f172a"
633
+ color: options.valueLabelColor ?? color,
634
+ backgroundColor: options.valueLabelBackgroundColor ?? options.valueLabelColor ?? color,
635
+ textColor: options.valueLabelTextColor ?? "#0f172a"
635
636
  }
636
637
  ];
637
638
  }
@@ -850,7 +851,10 @@ var BUILTIN_RSI_INDICATOR = {
850
851
  {
851
852
  title: `RSI ${length}`,
852
853
  axisTicks: [0, 30, 50, 70, 100],
853
- decimals: 2
854
+ decimals: 2,
855
+ valueLabelColor: "#9E9E9E",
856
+ valueLabelBackgroundColor: "#9E9E9E",
857
+ valueLabelTextColor: "#0f172a"
854
858
  }
855
859
  );
856
860
  }
@@ -2223,11 +2227,13 @@ function createChart(element, options = {}) {
2223
2227
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2224
2228
  ctx.save();
2225
2229
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2230
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2226
2231
  for (const tick of uniqueTicks) {
2227
2232
  if (tick < axisInfo.min || tick > axisInfo.max) {
2228
2233
  continue;
2229
2234
  }
2230
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2235
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2236
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2231
2237
  }
2232
2238
  ctx.restore();
2233
2239
  if (labels.visible) {
@@ -2243,6 +2249,9 @@ function createChart(element, options = {}) {
2243
2249
  drawText(legendParts.join(" "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
2244
2250
  }
2245
2251
  for (const label of paneInfo.valueLabels ?? []) {
2252
+ if (!labels.showIndicatorValueLabels) {
2253
+ continue;
2254
+ }
2246
2255
  if (!Number.isFinite(label.value) || label.value < axisInfo.min || label.value > axisInfo.max) {
2247
2256
  continue;
2248
2257
  }
package/dist/index.d.cts CHANGED
@@ -315,6 +315,7 @@ interface LabelsOptions {
315
315
  askPrice?: number;
316
316
  showIndicatorNames?: boolean;
317
317
  showIndicatorValues?: boolean;
318
+ showIndicatorValueLabels?: boolean;
318
319
  indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
319
320
  indicatorLegendOffsetX?: number;
320
321
  indicatorLegendOffsetY?: number;
package/dist/index.d.ts CHANGED
@@ -315,6 +315,7 @@ interface LabelsOptions {
315
315
  askPrice?: number;
316
316
  showIndicatorNames?: boolean;
317
317
  showIndicatorValues?: boolean;
318
+ showIndicatorValueLabels?: boolean;
318
319
  indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
319
320
  indicatorLegendOffsetX?: number;
320
321
  indicatorLegendOffsetY?: number;
package/dist/index.js CHANGED
@@ -74,6 +74,7 @@ var DEFAULT_LABELS_OPTIONS = {
74
74
  askPrice: Number.NaN,
75
75
  showIndicatorNames: false,
76
76
  showIndicatorValues: false,
77
+ showIndicatorValueLabels: true,
77
78
  indicatorLegendPosition: "top-left",
78
79
  indicatorLegendOffsetX: 10,
79
80
  indicatorLegendOffsetY: 10,
@@ -605,9 +606,9 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
605
606
  {
606
607
  value: latestValue,
607
608
  text: formatValue(latestValue),
608
- color,
609
- backgroundColor: color,
610
- textColor: "#0f172a"
609
+ color: options.valueLabelColor ?? color,
610
+ backgroundColor: options.valueLabelBackgroundColor ?? options.valueLabelColor ?? color,
611
+ textColor: options.valueLabelTextColor ?? "#0f172a"
611
612
  }
612
613
  ];
613
614
  }
@@ -826,7 +827,10 @@ var BUILTIN_RSI_INDICATOR = {
826
827
  {
827
828
  title: `RSI ${length}`,
828
829
  axisTicks: [0, 30, 50, 70, 100],
829
- decimals: 2
830
+ decimals: 2,
831
+ valueLabelColor: "#9E9E9E",
832
+ valueLabelBackgroundColor: "#9E9E9E",
833
+ valueLabelTextColor: "#0f172a"
830
834
  }
831
835
  );
832
836
  }
@@ -2199,11 +2203,13 @@ function createChart(element, options = {}) {
2199
2203
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2200
2204
  ctx.save();
2201
2205
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2206
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2202
2207
  for (const tick of uniqueTicks) {
2203
2208
  if (tick < axisInfo.min || tick > axisInfo.max) {
2204
2209
  continue;
2205
2210
  }
2206
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2211
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2212
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2207
2213
  }
2208
2214
  ctx.restore();
2209
2215
  if (labels.visible) {
@@ -2219,6 +2225,9 @@ function createChart(element, options = {}) {
2219
2225
  drawText(legendParts.join(" "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
2220
2226
  }
2221
2227
  for (const label of paneInfo.valueLabels ?? []) {
2228
+ if (!labels.showIndicatorValueLabels) {
2229
+ continue;
2230
+ }
2222
2231
  if (!Number.isFinite(label.value) || label.value < axisInfo.min || label.value > axisInfo.max) {
2223
2232
  continue;
2224
2233
  }
package/docs/API.md CHANGED
@@ -171,6 +171,7 @@ TradingView-style labels can be controlled from a single top-level object:
171
171
  - `bidPrice`, `askPrice` (optional market data values for bid/ask labels)
172
172
  - `showIndicatorNames` (default `false`; draws active indicator names in the chart)
173
173
  - `showIndicatorValues` (default `false`; appends simple indicator input values)
174
+ - `showIndicatorValueLabels` (default `true`; controls separate-pane right-side indicator value tags, such as RSI's latest-value label)
174
175
  - `indicatorLegendPosition` (`"top-left" | "top-right" | "bottom-left" | "bottom-right"`, default `"top-left"`)
175
176
  - `indicatorLegendOffsetX` (default `10`)
176
177
  - `indicatorLegendOffsetY` (default `10`; increase this if your frontend overlays a symbol/OHLC HUD in the top-left)
@@ -193,6 +194,7 @@ createChart(root, {
193
194
  askPrice: 5235.0,
194
195
  showIndicatorNames: true,
195
196
  showIndicatorValues: true,
197
+ showIndicatorValueLabels: true,
196
198
  indicatorLegendPosition: "top-left",
197
199
  indicatorLegendOffsetY: 34,
198
200
  showCountdownToBarClose: true,
package/docs/RECIPES.md CHANGED
@@ -174,6 +174,18 @@ chart.updateOptions({
174
174
  });
175
175
  ```
176
176
 
177
+ ## Hide separate-pane indicator value tags
178
+
179
+ RSI and other separate-pane indicators can draw a latest-value tag on the right axis. Hide those tags while keeping the pane scale and legend:
180
+
181
+ ```ts
182
+ chart.updateOptions({
183
+ labels: {
184
+ showIndicatorValueLabels: false
185
+ }
186
+ });
187
+ ```
188
+
177
189
  ## Prevent one volume spike from crushing all bars
178
190
 
179
191
  ```ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.50",
3
+ "version": "0.1.52",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",