@pipsend/charts 2.0.0 → 2.1.0
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.
- package/README.md +65 -0
- package/dist/pipsend-charts.development.mjs +161 -3
- package/dist/pipsend-charts.production.mjs +2 -2
- package/dist/pipsend-charts.standalone.development.js +162 -2
- package/dist/pipsend-charts.standalone.development.mjs +161 -3
- package/dist/pipsend-charts.standalone.production.js +2 -2
- package/dist/pipsend-charts.standalone.production.mjs +2 -2
- package/dist/typings.d.ts +79 -0
- package/package.json +1 -83
package/README.md
CHANGED
|
@@ -18,6 +18,7 @@ Simple • Powerful • Framework-Agnostic • TypeScript • Production-Ready
|
|
|
18
18
|
- [Installation](#-installation)
|
|
19
19
|
- [Quick Start](#-quick-start)
|
|
20
20
|
- [Demo & Examples](#-demo--examples)
|
|
21
|
+
- [Chart Types](#-chart-types)
|
|
21
22
|
- [Available Technical Indicators](#-available-technical-indicators)
|
|
22
23
|
- [Interactive Trading Lines API](#-interactive-trading-lines-api)
|
|
23
24
|
- [Framework Integration Examples](#-framework-integration-examples)
|
|
@@ -228,6 +229,70 @@ document.getElementById('btnAlert').onclick = async () => {
|
|
|
228
229
|
|
|
229
230
|
---
|
|
230
231
|
|
|
232
|
+
## 📈 Chart Types
|
|
233
|
+
|
|
234
|
+
Every series is added with `chart.addSeries(<Type>, options?, paneIndex?)`.
|
|
235
|
+
|
|
236
|
+
| Series | Import | Data shape |
|
|
237
|
+
|---|---|---|
|
|
238
|
+
| Candlestick | `CandlestickSeries` | `{ time, open, high, low, close }` |
|
|
239
|
+
| Bar (OHLC) | `BarSeries` | `{ time, open, high, low, close }` |
|
|
240
|
+
| Line | `LineSeries` | `{ time, value }` |
|
|
241
|
+
| Area | `AreaSeries` | `{ time, value }` |
|
|
242
|
+
| Baseline | `BaselineSeries` | `{ time, value }` |
|
|
243
|
+
| Histogram | `HistogramSeries` | `{ time, value, color? }` |
|
|
244
|
+
| Custom | `chart.addCustomSeries(paneView)` | your own |
|
|
245
|
+
|
|
246
|
+
### Heikin Ashi
|
|
247
|
+
|
|
248
|
+
Heikin Ashi is a transform of the OHLC bars, not a separate series type, so it
|
|
249
|
+
is applied on top of an existing candlestick or bar series:
|
|
250
|
+
|
|
251
|
+
```javascript
|
|
252
|
+
import { createChart, CandlestickSeries, applyHeikinAshi } from '@pipsend/charts';
|
|
253
|
+
|
|
254
|
+
const series = chart.addSeries(CandlestickSeries);
|
|
255
|
+
series.setData(bars);
|
|
256
|
+
|
|
257
|
+
const ha = applyHeikinAshi(series, chart);
|
|
258
|
+
|
|
259
|
+
// Back to regular candles
|
|
260
|
+
ha.remove();
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
The source series keeps its real prices and is only hidden, so indicators bound
|
|
264
|
+
to it keep computing on the true OHLC, and `remove()` restores the chart exactly
|
|
265
|
+
as it was — which makes this usable as a chart-type toggle. New bars pushed to
|
|
266
|
+
the source are transformed automatically.
|
|
267
|
+
|
|
268
|
+
Colors can be changed on a running transform, and are the candlestick ones:
|
|
269
|
+
|
|
270
|
+
```javascript
|
|
271
|
+
applyHeikinAshi(series, chart, {
|
|
272
|
+
upColor: '#26a69a',
|
|
273
|
+
downColor: '#ef5350',
|
|
274
|
+
borderVisible: true,
|
|
275
|
+
wickVisible: true,
|
|
276
|
+
hideSource: true, // set false to draw over the raw candles
|
|
277
|
+
paneIndex: 0
|
|
278
|
+
});
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
If you only want the numbers — to feed a different series, or to compute on them
|
|
282
|
+
— use the transform on its own:
|
|
283
|
+
|
|
284
|
+
```javascript
|
|
285
|
+
import { calculateHeikinAshi } from '@pipsend/charts';
|
|
286
|
+
|
|
287
|
+
const haBars = calculateHeikinAshi(bars);
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
Each Heikin Ashi bar folds in the one before it, so the result depends on where
|
|
291
|
+
the data starts. Pass the whole series rather than a recent window when you can;
|
|
292
|
+
the difference decays over a few bars.
|
|
293
|
+
|
|
294
|
+
---
|
|
295
|
+
|
|
231
296
|
## 📊 Available Technical Indicators
|
|
232
297
|
|
|
233
298
|
### Overlay Indicators (appear on main chart)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* @license
|
|
3
|
-
* Pipsend Charts v2.
|
|
3
|
+
* Pipsend Charts v2.1.0
|
|
4
4
|
* Copyright (c) 2026 Pipsend
|
|
5
5
|
* Licensed under MIT License
|
|
6
6
|
* Built on TradingView Lightweight Charts™ (Apache 2.0)
|
|
@@ -17154,6 +17154,164 @@ function applyPivotPoints(series, chart, options = {}) {
|
|
|
17154
17154
|
};
|
|
17155
17155
|
}
|
|
17156
17156
|
|
|
17157
|
+
function isOhlc(bar) {
|
|
17158
|
+
return bar !== null
|
|
17159
|
+
&& bar !== undefined
|
|
17160
|
+
&& typeof bar.close === 'number';
|
|
17161
|
+
}
|
|
17162
|
+
/**
|
|
17163
|
+
* Turns raw OHLC bars into Heikin Ashi ones.
|
|
17164
|
+
*
|
|
17165
|
+
* Heikin Ashi is a price transform, not an overlay: each candle averages itself
|
|
17166
|
+
* with the one before it, which drops most of the single-bar noise and leaves
|
|
17167
|
+
* runs of same-coloured bodies while a trend holds.
|
|
17168
|
+
*
|
|
17169
|
+
* ```
|
|
17170
|
+
* close = (O + H + L + C) / 4
|
|
17171
|
+
* open = (previous open + previous close) / 2 // first bar: (O + C) / 2
|
|
17172
|
+
* high = max(H, open, close)
|
|
17173
|
+
* low = min(L, open, close)
|
|
17174
|
+
* ```
|
|
17175
|
+
*
|
|
17176
|
+
* Because every bar folds in the one before it, the result depends on where the
|
|
17177
|
+
* data starts: the same bar computed from a longer history differs slightly.
|
|
17178
|
+
* The difference decays over a few bars, so pass the whole series rather than a
|
|
17179
|
+
* recent window when you can.
|
|
17180
|
+
*
|
|
17181
|
+
* Whitespace items are passed through untouched, and do not advance the
|
|
17182
|
+
* running open/close — a gap in the data is not a bar.
|
|
17183
|
+
*
|
|
17184
|
+
* @param bars - Source bars, ordered oldest to newest.
|
|
17185
|
+
* @returns The transformed bars, one per input item.
|
|
17186
|
+
*/
|
|
17187
|
+
function calculateHeikinAshi(bars) {
|
|
17188
|
+
const result = [];
|
|
17189
|
+
let previousOpen = null;
|
|
17190
|
+
let previousClose = null;
|
|
17191
|
+
for (const bar of bars) {
|
|
17192
|
+
if (!isOhlc(bar)) {
|
|
17193
|
+
if (bar !== null && bar !== undefined) {
|
|
17194
|
+
result.push({ time: bar.time, customValues: bar.customValues });
|
|
17195
|
+
}
|
|
17196
|
+
continue;
|
|
17197
|
+
}
|
|
17198
|
+
const haClose = (bar.open + bar.high + bar.low + bar.close) / 4;
|
|
17199
|
+
const haOpen = previousOpen === null || previousClose === null
|
|
17200
|
+
? (bar.open + bar.close) / 2
|
|
17201
|
+
: (previousOpen + previousClose) / 2;
|
|
17202
|
+
result.push({
|
|
17203
|
+
time: bar.time,
|
|
17204
|
+
open: haOpen,
|
|
17205
|
+
high: Math.max(bar.high, haOpen, haClose),
|
|
17206
|
+
low: Math.min(bar.low, haOpen, haClose),
|
|
17207
|
+
close: haClose,
|
|
17208
|
+
customValues: bar.customValues,
|
|
17209
|
+
});
|
|
17210
|
+
previousOpen = haOpen;
|
|
17211
|
+
previousClose = haClose;
|
|
17212
|
+
}
|
|
17213
|
+
return result;
|
|
17214
|
+
}
|
|
17215
|
+
/**
|
|
17216
|
+
* Draw a source series as Heikin Ashi candles.
|
|
17217
|
+
*
|
|
17218
|
+
* The source series is left in place holding its real prices — it is only
|
|
17219
|
+
* hidden — so indicators bound to it keep computing on the true OHLC, and
|
|
17220
|
+
* `remove()` puts the chart back exactly as it was. That makes this usable as a
|
|
17221
|
+
* chart-type toggle:
|
|
17222
|
+
*
|
|
17223
|
+
* ```js
|
|
17224
|
+
* const ha = applyHeikinAshi(candleSeries, chart);
|
|
17225
|
+
* // …back to regular candles:
|
|
17226
|
+
* ha.remove();
|
|
17227
|
+
* ```
|
|
17228
|
+
*
|
|
17229
|
+
* @param series - Source OHLC series (a candlestick or bar series).
|
|
17230
|
+
* @param chart - Chart instance.
|
|
17231
|
+
* @param options - Heikin Ashi configuration options.
|
|
17232
|
+
* @returns The Heikin Ashi candlestick series, plus live control over its options.
|
|
17233
|
+
*/
|
|
17234
|
+
function applyHeikinAshi(series, chart, options = {}) {
|
|
17235
|
+
const resolved = {
|
|
17236
|
+
paneIndex: options.paneIndex ?? 0,
|
|
17237
|
+
upColor: options.upColor ?? '#26a69a',
|
|
17238
|
+
downColor: options.downColor ?? '#ef5350',
|
|
17239
|
+
borderVisible: options.borderVisible ?? true,
|
|
17240
|
+
borderUpColor: options.borderUpColor ?? '#26a69a',
|
|
17241
|
+
borderDownColor: options.borderDownColor ?? '#ef5350',
|
|
17242
|
+
wickVisible: options.wickVisible ?? true,
|
|
17243
|
+
wickUpColor: options.wickUpColor ?? '#26a69a',
|
|
17244
|
+
wickDownColor: options.wickDownColor ?? '#ef5350',
|
|
17245
|
+
hideSource: options.hideSource ?? true,
|
|
17246
|
+
};
|
|
17247
|
+
const sourceOptions = series.options();
|
|
17248
|
+
// Same price scale and the same formatting as the source: the candles are a
|
|
17249
|
+
// restatement of that series, not a second instrument, so they must not
|
|
17250
|
+
// autoscale on their own axis or round to a different precision.
|
|
17251
|
+
const haSeries = chart.addSeries(candlestickSeries, {
|
|
17252
|
+
upColor: resolved.upColor,
|
|
17253
|
+
downColor: resolved.downColor,
|
|
17254
|
+
borderVisible: resolved.borderVisible,
|
|
17255
|
+
borderUpColor: resolved.borderUpColor,
|
|
17256
|
+
borderDownColor: resolved.borderDownColor,
|
|
17257
|
+
wickVisible: resolved.wickVisible,
|
|
17258
|
+
wickUpColor: resolved.wickUpColor,
|
|
17259
|
+
wickDownColor: resolved.wickDownColor,
|
|
17260
|
+
priceScaleId: sourceOptions.priceScaleId,
|
|
17261
|
+
priceFormat: sourceOptions.priceFormat,
|
|
17262
|
+
}, resolved.paneIndex);
|
|
17263
|
+
const sourceWasVisible = sourceOptions.visible;
|
|
17264
|
+
if (resolved.hideSource === true) {
|
|
17265
|
+
series.applyOptions({ visible: false });
|
|
17266
|
+
}
|
|
17267
|
+
const runtime = bindIndicator({
|
|
17268
|
+
_internal_source: series,
|
|
17269
|
+
_internal_chart: chart,
|
|
17270
|
+
_internal_outputs: [haSeries],
|
|
17271
|
+
_internal_label: 'Heikin Ashi',
|
|
17272
|
+
_internal_options: resolved,
|
|
17273
|
+
// Every option here is a colour or a toggle on the series itself, so a
|
|
17274
|
+
// change never needs the transform run again.
|
|
17275
|
+
_internal_recomputeOn: [],
|
|
17276
|
+
_internal_compute: (data) => [
|
|
17277
|
+
[haSeries, calculateHeikinAshi(data)],
|
|
17278
|
+
],
|
|
17279
|
+
_internal_applyStyle: (current) => {
|
|
17280
|
+
haSeries.applyOptions({
|
|
17281
|
+
upColor: current.upColor,
|
|
17282
|
+
downColor: current.downColor,
|
|
17283
|
+
borderVisible: current.borderVisible,
|
|
17284
|
+
borderUpColor: current.borderUpColor,
|
|
17285
|
+
borderDownColor: current.borderDownColor,
|
|
17286
|
+
wickVisible: current.wickVisible,
|
|
17287
|
+
wickUpColor: current.wickUpColor,
|
|
17288
|
+
wickDownColor: current.wickDownColor,
|
|
17289
|
+
});
|
|
17290
|
+
series.applyOptions({
|
|
17291
|
+
visible: current.hideSource === true ? false : sourceWasVisible,
|
|
17292
|
+
});
|
|
17293
|
+
},
|
|
17294
|
+
});
|
|
17295
|
+
const handle = {
|
|
17296
|
+
_internal_series: haSeries,
|
|
17297
|
+
options: runtime.options,
|
|
17298
|
+
applyOptions: runtime.applyOptions,
|
|
17299
|
+
recalculate: runtime.recalculate,
|
|
17300
|
+
remove: () => {
|
|
17301
|
+
runtime.remove();
|
|
17302
|
+
// The source outlives the indicator, so its visibility is ours to put
|
|
17303
|
+
// back — otherwise removing a Heikin Ashi overlay leaves a blank chart.
|
|
17304
|
+
try {
|
|
17305
|
+
series.applyOptions({ visible: sourceWasVisible });
|
|
17306
|
+
}
|
|
17307
|
+
catch (error) {
|
|
17308
|
+
// The series may already be gone if the chart was disposed
|
|
17309
|
+
}
|
|
17310
|
+
},
|
|
17311
|
+
};
|
|
17312
|
+
return handle;
|
|
17313
|
+
}
|
|
17314
|
+
|
|
17157
17315
|
/**
|
|
17158
17316
|
* Apply RSI indicator to a series
|
|
17159
17317
|
* @param series - Source series to calculate RSI from
|
|
@@ -29212,7 +29370,7 @@ const customSeriesDefaultOptions = {
|
|
|
29212
29370
|
* Returns the current version as a string. For example `'1.0.0'`.
|
|
29213
29371
|
*/
|
|
29214
29372
|
function version() {
|
|
29215
|
-
return "2.
|
|
29373
|
+
return "2.1.0";
|
|
29216
29374
|
}
|
|
29217
29375
|
|
|
29218
|
-
export { areaSeries as AreaSeries, ArrowTool, barSeries as BarSeries, baselineSeries as BaselineSeries, BrushTool, candlestickSeries as CandlestickSeries, CircleTool, ColorType, CrossLineTool, CrosshairMode, DEFAULT_SESSIONS, DraggablePriceLine, DrawingToolsManager, EXTENDED_FIBONACCI_RATIOS, FibonacciCalculator, FibonacciExtensionTool, FibonacciFanTool, FibonacciTool, GanttTool, histogramSeries as HistogramSeries, HorizontalLineTool, InteractiveLineManager, LastPriceAnimationMode, lineSeries as LineSeries, LineStyle, LineType, MismatchDirection, ParallelChannelTool, PitchforkTool, PolygonTool, PositionCalculator, PositionMarkersManager, PositionTool, PriceLineSource, PriceScaleMode, RectangleTool, RulerCalculator, RulerTool, STANDARD_FIBONACCI_RATIOS, TextTool, TickMarkType, TrackingModeExitMode, TradingSessionsIndicator, TrendLineTool, VerticalLineTool, VolumeProfileIndicator, applyADX, applyATR, applyBollingerBands, applyCCI, applyDonchianChannels, applyEMA, applyIchimoku, applyKeltnerChannels, applyMACD, applyMFI, applyOBV, applyParabolicSAR, applyPivotPoints, applyRSI, applySMA, applyStochastic, applySuperTrend, applyVWAP, applyVolume, applyWMA, applyWilliamsR, calculatePipConfig, coordinateFromTime, createArrowTool, createBrushTool, createChart, createChartEx, createCircleTool, createCrossLineTool, createFibonacciExtensionTool, createFibonacciFanTool, createFibonacciTool, createGanttTool, createHorizontalLineTool, createImageWatermark, createInteractiveLineManager, createOptionsChart, createParallelChannelTool, createPitchforkTool, createPolygonTool, createPositionMarkers, createPositionTool, createRectangleTool, createRulerTool, createSeriesMarkers, createTextTool, createTextWatermark, createTradingLine, createTradingSessionsIndicator, createTrendLineTool, createUpDownMarkers, createVerticalLineTool, createVolumeProfileIndicator, createYieldCurveChart, customSeriesDefaultOptions, defaultHorzScaleBehavior, getPipConfig, isBusinessDay, isUTCTimestamp, setSeriesVolumes, setVolumeProfileData, timeFromCoordinate, version };
|
|
29376
|
+
export { areaSeries as AreaSeries, ArrowTool, barSeries as BarSeries, baselineSeries as BaselineSeries, BrushTool, candlestickSeries as CandlestickSeries, CircleTool, ColorType, CrossLineTool, CrosshairMode, DEFAULT_SESSIONS, DraggablePriceLine, DrawingToolsManager, EXTENDED_FIBONACCI_RATIOS, FibonacciCalculator, FibonacciExtensionTool, FibonacciFanTool, FibonacciTool, GanttTool, histogramSeries as HistogramSeries, HorizontalLineTool, InteractiveLineManager, LastPriceAnimationMode, lineSeries as LineSeries, LineStyle, LineType, MismatchDirection, ParallelChannelTool, PitchforkTool, PolygonTool, PositionCalculator, PositionMarkersManager, PositionTool, PriceLineSource, PriceScaleMode, RectangleTool, RulerCalculator, RulerTool, STANDARD_FIBONACCI_RATIOS, TextTool, TickMarkType, TrackingModeExitMode, TradingSessionsIndicator, TrendLineTool, VerticalLineTool, VolumeProfileIndicator, applyADX, applyATR, applyBollingerBands, applyCCI, applyDonchianChannels, applyEMA, applyHeikinAshi, applyIchimoku, applyKeltnerChannels, applyMACD, applyMFI, applyOBV, applyParabolicSAR, applyPivotPoints, applyRSI, applySMA, applyStochastic, applySuperTrend, applyVWAP, applyVolume, applyWMA, applyWilliamsR, calculateHeikinAshi, calculatePipConfig, coordinateFromTime, createArrowTool, createBrushTool, createChart, createChartEx, createCircleTool, createCrossLineTool, createFibonacciExtensionTool, createFibonacciFanTool, createFibonacciTool, createGanttTool, createHorizontalLineTool, createImageWatermark, createInteractiveLineManager, createOptionsChart, createParallelChannelTool, createPitchforkTool, createPolygonTool, createPositionMarkers, createPositionTool, createRectangleTool, createRulerTool, createSeriesMarkers, createTextTool, createTextWatermark, createTradingLine, createTradingSessionsIndicator, createTrendLineTool, createUpDownMarkers, createVerticalLineTool, createVolumeProfileIndicator, createYieldCurveChart, customSeriesDefaultOptions, defaultHorzScaleBehavior, getPipConfig, isBusinessDay, isUTCTimestamp, setSeriesVolumes, setVolumeProfileData, timeFromCoordinate, version };
|