hyperprop-charting-library 0.1.12 → 0.1.13

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 (11) hide show
  1. package/README.md +16 -1
  2. package/dist/hyperprop-charting-library.cjs +50 -50
  3. package/dist/hyperprop-charting-library.d.ts +10 -1
  4. package/dist/hyperprop-charting-library.js +50 -50
  5. package/dist/index.cjs +50 -50
  6. package/dist/index.d.cts +10 -1
  7. package/dist/index.d.ts +10 -1
  8. package/dist/index.js +50 -50
  9. package/docs/API.md +10 -0
  10. package/docs/RECIPES.md +13 -0
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -32,6 +32,20 @@ const data: OhlcDataPoint[] = [
32
32
  chart.setData(data);
33
33
  ```
34
34
 
35
+ ## Dash Pattern Styling
36
+
37
+ You can control dotted/dashed spacing globally with `dashPatterns`:
38
+
39
+ ```ts
40
+ const chart = createChart(root, {
41
+ dashPatterns: {
42
+ dotted: [2, 1],
43
+ connectorDotted: [2, 2],
44
+ borderDotted: [2, 1]
45
+ }
46
+ });
47
+ ```
48
+
35
49
  ## Full Documentation
36
50
 
37
51
  - API reference: `docs/API.md`
@@ -46,8 +60,9 @@ chart.setData(data);
46
60
  - `chart.setData(data)`
47
61
  - `chart.setPriceLines(lines)` / `chart.addPriceLine(line)` / `chart.removePriceLine(id)`
48
62
  - `chart.setOrderLines(lines)` / `chart.addOrderLine(line)` / `chart.updateOrderLine(id, patch)` / `chart.removeOrderLine(id)`
49
- - `chart.onOrderAction(handler)` / `chart.onChartClick(handler)`
63
+ - `chart.onOrderAction(handler)` / `chart.onChartClick(handler)` / `chart.onCrosshairMove(handler)`
50
64
  - `chart.setDoubleClickEnabled(enabled)` / `chart.setDoubleClickAction(action)`
65
+ - `chart.zoomInX()` / `chart.zoomOutX()` / `chart.panX(bars)` / `chart.resetViewport()`
51
66
  - `chart.resize(width, height)` / `chart.destroy()`
52
67
 
53
68
  ## Scope
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -68,6 +68,14 @@ var DEFAULT_WATERMARK_OPTIONS = {
68
68
  imageTintColor: "",
69
69
  imageTintOpacity: 1
70
70
  };
71
+ var DEFAULT_DASH_PATTERNS = {
72
+ dotted: [2, 2],
73
+ dashed: [8, 6],
74
+ connectorDotted: [2, 3],
75
+ connectorDashed: [6, 5],
76
+ borderDotted: [2, 2],
77
+ borderDashed: [6, 4]
78
+ };
71
79
  var DEFAULT_PRICE_LINE_OPTIONS = {
72
80
  visible: true,
73
81
  style: "solid",
@@ -147,7 +155,8 @@ var DEFAULT_OPTIONS = {
147
155
  labelBackgroundColor: "#38bdf8",
148
156
  labelTextColor: "#0b1220",
149
157
  labelBorderRadius: 3
150
- }
158
+ },
159
+ dashPatterns: DEFAULT_DASH_PATTERNS
151
160
  };
152
161
  var BRAND_LOGO_VIEWBOX_WIDTH = 190;
153
162
  var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
@@ -177,6 +186,10 @@ function createChart(element, options = {}) {
177
186
  tickerLine: {
178
187
  ...DEFAULT_OPTIONS.tickerLine,
179
188
  ...options.tickerLine
189
+ },
190
+ dashPatterns: {
191
+ ...DEFAULT_DASH_PATTERNS,
192
+ ...options.dashPatterns ?? {}
180
193
  }
181
194
  };
182
195
  let width = mergedOptions.width;
@@ -264,6 +277,23 @@ function createChart(element, options = {}) {
264
277
  const clamp = (value, min, max) => {
265
278
  return Math.min(max, Math.max(min, value));
266
279
  };
280
+ const dashPatterns = {
281
+ dotted: mergedOptions.dashPatterns.dotted ?? DEFAULT_DASH_PATTERNS.dotted,
282
+ dashed: mergedOptions.dashPatterns.dashed ?? DEFAULT_DASH_PATTERNS.dashed,
283
+ connectorDotted: mergedOptions.dashPatterns.connectorDotted ?? DEFAULT_DASH_PATTERNS.connectorDotted,
284
+ connectorDashed: mergedOptions.dashPatterns.connectorDashed ?? DEFAULT_DASH_PATTERNS.connectorDashed,
285
+ borderDotted: mergedOptions.dashPatterns.borderDotted ?? DEFAULT_DASH_PATTERNS.borderDotted,
286
+ borderDashed: mergedOptions.dashPatterns.borderDashed ?? DEFAULT_DASH_PATTERNS.borderDashed
287
+ };
288
+ const applyDashPattern = (style, dotted, dashed) => {
289
+ if (style === "dotted") {
290
+ ctx.setLineDash(dotted);
291
+ } else if (style === "dashed") {
292
+ ctx.setLineDash(dashed);
293
+ } else {
294
+ ctx.setLineDash([]);
295
+ }
296
+ };
267
297
  const clampXViewport = () => {
268
298
  const count = data.length;
269
299
  if (count === 0) {
@@ -437,13 +467,7 @@ function createChart(element, options = {}) {
437
467
  ctx.save();
438
468
  ctx.strokeStyle = color;
439
469
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
440
- if (mergedLine.style === "dotted") {
441
- ctx.setLineDash([2, 4]);
442
- } else if (mergedLine.style === "dashed") {
443
- ctx.setLineDash([8, 6]);
444
- } else {
445
- ctx.setLineDash([]);
446
- }
470
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
447
471
  ctx.beginPath();
448
472
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
449
473
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -497,13 +521,7 @@ function createChart(element, options = {}) {
497
521
  ctx.save();
498
522
  ctx.strokeStyle = color;
499
523
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
500
- if (mergedLine.style === "dotted") {
501
- ctx.setLineDash([2, 4]);
502
- } else if (mergedLine.style === "dashed") {
503
- ctx.setLineDash([8, 6]);
504
- } else {
505
- ctx.setLineDash([]);
506
- }
524
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
507
525
  ctx.beginPath();
508
526
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
509
527
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -515,13 +533,11 @@ function createChart(element, options = {}) {
515
533
  ctx.save();
516
534
  ctx.strokeStyle = mergedLine.connectorColor ?? color;
517
535
  ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
518
- if (mergedLine.connectorStyle === "dotted") {
519
- ctx.setLineDash([2, 5]);
520
- } else if (mergedLine.connectorStyle === "dashed") {
521
- ctx.setLineDash([6, 5]);
522
- } else {
523
- ctx.setLineDash([]);
524
- }
536
+ applyDashPattern(
537
+ mergedLine.connectorStyle,
538
+ dashPatterns.connectorDotted,
539
+ dashPatterns.connectorDashed
540
+ );
525
541
  ctx.beginPath();
526
542
  ctx.moveTo(crisp(connectorX), crisp(lineY));
527
543
  ctx.lineTo(crisp(connectorX), crisp(connectorY));
@@ -624,13 +640,11 @@ function createChart(element, options = {}) {
624
640
  ctx.save();
625
641
  ctx.strokeStyle = actionBorderColor;
626
642
  ctx.lineWidth = 1;
627
- if (actionBorderStyle === "dotted") {
628
- ctx.setLineDash([2, 3]);
629
- } else if (actionBorderStyle === "dashed") {
630
- ctx.setLineDash([6, 4]);
631
- } else {
632
- ctx.setLineDash([]);
633
- }
643
+ applyDashPattern(
644
+ actionBorderStyle,
645
+ dashPatterns.borderDotted,
646
+ dashPatterns.borderDashed
647
+ );
634
648
  strokeRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
635
649
  ctx.restore();
636
650
  const baseFont = ctx.font;
@@ -969,13 +983,7 @@ function createChart(element, options = {}) {
969
983
  ctx.save();
970
984
  ctx.strokeStyle = crosshair.color;
971
985
  ctx.lineWidth = Math.max(1, crosshair.width);
972
- if (crosshair.style === "dotted") {
973
- ctx.setLineDash([2, 4]);
974
- } else if (crosshair.style === "dashed") {
975
- ctx.setLineDash([8, 6]);
976
- } else {
977
- ctx.setLineDash([]);
978
- }
986
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
979
987
  if (crosshair.showVertical) {
980
988
  ctx.beginPath();
981
989
  ctx.moveTo(crisp(cx), crisp(chartTop));
@@ -1017,13 +1025,7 @@ function createChart(element, options = {}) {
1017
1025
  ctx.save();
1018
1026
  ctx.strokeStyle = tickerColor;
1019
1027
  ctx.lineWidth = tickerThickness;
1020
- if (tickerStyle === "dotted") {
1021
- ctx.setLineDash([2, 4]);
1022
- } else if (tickerStyle === "dashed") {
1023
- ctx.setLineDash([8, 6]);
1024
- } else {
1025
- ctx.setLineDash([]);
1026
- }
1028
+ applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
1027
1029
  ctx.beginPath();
1028
1030
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
1029
1031
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -1096,13 +1098,11 @@ function createChart(element, options = {}) {
1096
1098
  ctx.save();
1097
1099
  ctx.strokeStyle = labelBorderColor;
1098
1100
  ctx.lineWidth = labelBorderWidth;
1099
- if (labelBorderStyle === "dotted") {
1100
- ctx.setLineDash([2, 3]);
1101
- } else if (labelBorderStyle === "dashed") {
1102
- ctx.setLineDash([6, 4]);
1103
- } else {
1104
- ctx.setLineDash([]);
1105
- }
1101
+ applyDashPattern(
1102
+ labelBorderStyle,
1103
+ dashPatterns.borderDotted,
1104
+ dashPatterns.borderDashed
1105
+ );
1106
1106
  strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
1107
1107
  ctx.restore();
1108
1108
  };
package/dist/hyperprop-charting-library.d.ts CHANGED
@@ -29,6 +29,15 @@ interface ChartOptions {
29
29
  priceLines?: PriceLineOptions[];
30
30
  orderLines?: OrderLineOptions[];
31
31
  tickerLine?: TickerLineOptions;
32
+ dashPatterns?: Partial<DashPatternOptions>;
33
+ }
34
+ interface DashPatternOptions {
35
+ dotted: [number, number];
36
+ dashed: [number, number];
37
+ connectorDotted: [number, number];
38
+ connectorDashed: [number, number];
39
+ borderDotted: [number, number];
40
+ borderDashed: [number, number];
32
41
  }
33
42
  interface AxisOptions {
34
43
  lineColor?: string;
@@ -208,4 +217,4 @@ interface OhlcDataPoint {
208
217
  }
209
218
  declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
210
219
 
211
- export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
220
+ export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
package/dist/hyperprop-charting-library.js CHANGED
@@ -44,6 +44,14 @@ var DEFAULT_WATERMARK_OPTIONS = {
44
44
  imageTintColor: "",
45
45
  imageTintOpacity: 1
46
46
  };
47
+ var DEFAULT_DASH_PATTERNS = {
48
+ dotted: [2, 2],
49
+ dashed: [8, 6],
50
+ connectorDotted: [2, 3],
51
+ connectorDashed: [6, 5],
52
+ borderDotted: [2, 2],
53
+ borderDashed: [6, 4]
54
+ };
47
55
  var DEFAULT_PRICE_LINE_OPTIONS = {
48
56
  visible: true,
49
57
  style: "solid",
@@ -123,7 +131,8 @@ var DEFAULT_OPTIONS = {
123
131
  labelBackgroundColor: "#38bdf8",
124
132
  labelTextColor: "#0b1220",
125
133
  labelBorderRadius: 3
126
- }
134
+ },
135
+ dashPatterns: DEFAULT_DASH_PATTERNS
127
136
  };
128
137
  var BRAND_LOGO_VIEWBOX_WIDTH = 190;
129
138
  var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
@@ -153,6 +162,10 @@ function createChart(element, options = {}) {
153
162
  tickerLine: {
154
163
  ...DEFAULT_OPTIONS.tickerLine,
155
164
  ...options.tickerLine
165
+ },
166
+ dashPatterns: {
167
+ ...DEFAULT_DASH_PATTERNS,
168
+ ...options.dashPatterns ?? {}
156
169
  }
157
170
  };
158
171
  let width = mergedOptions.width;
@@ -240,6 +253,23 @@ function createChart(element, options = {}) {
240
253
  const clamp = (value, min, max) => {
241
254
  return Math.min(max, Math.max(min, value));
242
255
  };
256
+ const dashPatterns = {
257
+ dotted: mergedOptions.dashPatterns.dotted ?? DEFAULT_DASH_PATTERNS.dotted,
258
+ dashed: mergedOptions.dashPatterns.dashed ?? DEFAULT_DASH_PATTERNS.dashed,
259
+ connectorDotted: mergedOptions.dashPatterns.connectorDotted ?? DEFAULT_DASH_PATTERNS.connectorDotted,
260
+ connectorDashed: mergedOptions.dashPatterns.connectorDashed ?? DEFAULT_DASH_PATTERNS.connectorDashed,
261
+ borderDotted: mergedOptions.dashPatterns.borderDotted ?? DEFAULT_DASH_PATTERNS.borderDotted,
262
+ borderDashed: mergedOptions.dashPatterns.borderDashed ?? DEFAULT_DASH_PATTERNS.borderDashed
263
+ };
264
+ const applyDashPattern = (style, dotted, dashed) => {
265
+ if (style === "dotted") {
266
+ ctx.setLineDash(dotted);
267
+ } else if (style === "dashed") {
268
+ ctx.setLineDash(dashed);
269
+ } else {
270
+ ctx.setLineDash([]);
271
+ }
272
+ };
243
273
  const clampXViewport = () => {
244
274
  const count = data.length;
245
275
  if (count === 0) {
@@ -413,13 +443,7 @@ function createChart(element, options = {}) {
413
443
  ctx.save();
414
444
  ctx.strokeStyle = color;
415
445
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
416
- if (mergedLine.style === "dotted") {
417
- ctx.setLineDash([2, 4]);
418
- } else if (mergedLine.style === "dashed") {
419
- ctx.setLineDash([8, 6]);
420
- } else {
421
- ctx.setLineDash([]);
422
- }
446
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
423
447
  ctx.beginPath();
424
448
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
425
449
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -473,13 +497,7 @@ function createChart(element, options = {}) {
473
497
  ctx.save();
474
498
  ctx.strokeStyle = color;
475
499
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
476
- if (mergedLine.style === "dotted") {
477
- ctx.setLineDash([2, 4]);
478
- } else if (mergedLine.style === "dashed") {
479
- ctx.setLineDash([8, 6]);
480
- } else {
481
- ctx.setLineDash([]);
482
- }
500
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
483
501
  ctx.beginPath();
484
502
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
485
503
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -491,13 +509,11 @@ function createChart(element, options = {}) {
491
509
  ctx.save();
492
510
  ctx.strokeStyle = mergedLine.connectorColor ?? color;
493
511
  ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
494
- if (mergedLine.connectorStyle === "dotted") {
495
- ctx.setLineDash([2, 5]);
496
- } else if (mergedLine.connectorStyle === "dashed") {
497
- ctx.setLineDash([6, 5]);
498
- } else {
499
- ctx.setLineDash([]);
500
- }
512
+ applyDashPattern(
513
+ mergedLine.connectorStyle,
514
+ dashPatterns.connectorDotted,
515
+ dashPatterns.connectorDashed
516
+ );
501
517
  ctx.beginPath();
502
518
  ctx.moveTo(crisp(connectorX), crisp(lineY));
503
519
  ctx.lineTo(crisp(connectorX), crisp(connectorY));
@@ -600,13 +616,11 @@ function createChart(element, options = {}) {
600
616
  ctx.save();
601
617
  ctx.strokeStyle = actionBorderColor;
602
618
  ctx.lineWidth = 1;
603
- if (actionBorderStyle === "dotted") {
604
- ctx.setLineDash([2, 3]);
605
- } else if (actionBorderStyle === "dashed") {
606
- ctx.setLineDash([6, 4]);
607
- } else {
608
- ctx.setLineDash([]);
609
- }
619
+ applyDashPattern(
620
+ actionBorderStyle,
621
+ dashPatterns.borderDotted,
622
+ dashPatterns.borderDashed
623
+ );
610
624
  strokeRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
611
625
  ctx.restore();
612
626
  const baseFont = ctx.font;
@@ -945,13 +959,7 @@ function createChart(element, options = {}) {
945
959
  ctx.save();
946
960
  ctx.strokeStyle = crosshair.color;
947
961
  ctx.lineWidth = Math.max(1, crosshair.width);
948
- if (crosshair.style === "dotted") {
949
- ctx.setLineDash([2, 4]);
950
- } else if (crosshair.style === "dashed") {
951
- ctx.setLineDash([8, 6]);
952
- } else {
953
- ctx.setLineDash([]);
954
- }
962
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
955
963
  if (crosshair.showVertical) {
956
964
  ctx.beginPath();
957
965
  ctx.moveTo(crisp(cx), crisp(chartTop));
@@ -993,13 +1001,7 @@ function createChart(element, options = {}) {
993
1001
  ctx.save();
994
1002
  ctx.strokeStyle = tickerColor;
995
1003
  ctx.lineWidth = tickerThickness;
996
- if (tickerStyle === "dotted") {
997
- ctx.setLineDash([2, 4]);
998
- } else if (tickerStyle === "dashed") {
999
- ctx.setLineDash([8, 6]);
1000
- } else {
1001
- ctx.setLineDash([]);
1002
- }
1004
+ applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
1003
1005
  ctx.beginPath();
1004
1006
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
1005
1007
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -1072,13 +1074,11 @@ function createChart(element, options = {}) {
1072
1074
  ctx.save();
1073
1075
  ctx.strokeStyle = labelBorderColor;
1074
1076
  ctx.lineWidth = labelBorderWidth;
1075
- if (labelBorderStyle === "dotted") {
1076
- ctx.setLineDash([2, 3]);
1077
- } else if (labelBorderStyle === "dashed") {
1078
- ctx.setLineDash([6, 4]);
1079
- } else {
1080
- ctx.setLineDash([]);
1081
- }
1077
+ applyDashPattern(
1078
+ labelBorderStyle,
1079
+ dashPatterns.borderDotted,
1080
+ dashPatterns.borderDashed
1081
+ );
1082
1082
  strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
1083
1083
  ctx.restore();
1084
1084
  };
package/dist/index.cjs CHANGED
@@ -68,6 +68,14 @@ var DEFAULT_WATERMARK_OPTIONS = {
68
68
  imageTintColor: "",
69
69
  imageTintOpacity: 1
70
70
  };
71
+ var DEFAULT_DASH_PATTERNS = {
72
+ dotted: [2, 2],
73
+ dashed: [8, 6],
74
+ connectorDotted: [2, 3],
75
+ connectorDashed: [6, 5],
76
+ borderDotted: [2, 2],
77
+ borderDashed: [6, 4]
78
+ };
71
79
  var DEFAULT_PRICE_LINE_OPTIONS = {
72
80
  visible: true,
73
81
  style: "solid",
@@ -147,7 +155,8 @@ var DEFAULT_OPTIONS = {
147
155
  labelBackgroundColor: "#38bdf8",
148
156
  labelTextColor: "#0b1220",
149
157
  labelBorderRadius: 3
150
- }
158
+ },
159
+ dashPatterns: DEFAULT_DASH_PATTERNS
151
160
  };
152
161
  var BRAND_LOGO_VIEWBOX_WIDTH = 190;
153
162
  var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
@@ -177,6 +186,10 @@ function createChart(element, options = {}) {
177
186
  tickerLine: {
178
187
  ...DEFAULT_OPTIONS.tickerLine,
179
188
  ...options.tickerLine
189
+ },
190
+ dashPatterns: {
191
+ ...DEFAULT_DASH_PATTERNS,
192
+ ...options.dashPatterns ?? {}
180
193
  }
181
194
  };
182
195
  let width = mergedOptions.width;
@@ -264,6 +277,23 @@ function createChart(element, options = {}) {
264
277
  const clamp = (value, min, max) => {
265
278
  return Math.min(max, Math.max(min, value));
266
279
  };
280
+ const dashPatterns = {
281
+ dotted: mergedOptions.dashPatterns.dotted ?? DEFAULT_DASH_PATTERNS.dotted,
282
+ dashed: mergedOptions.dashPatterns.dashed ?? DEFAULT_DASH_PATTERNS.dashed,
283
+ connectorDotted: mergedOptions.dashPatterns.connectorDotted ?? DEFAULT_DASH_PATTERNS.connectorDotted,
284
+ connectorDashed: mergedOptions.dashPatterns.connectorDashed ?? DEFAULT_DASH_PATTERNS.connectorDashed,
285
+ borderDotted: mergedOptions.dashPatterns.borderDotted ?? DEFAULT_DASH_PATTERNS.borderDotted,
286
+ borderDashed: mergedOptions.dashPatterns.borderDashed ?? DEFAULT_DASH_PATTERNS.borderDashed
287
+ };
288
+ const applyDashPattern = (style, dotted, dashed) => {
289
+ if (style === "dotted") {
290
+ ctx.setLineDash(dotted);
291
+ } else if (style === "dashed") {
292
+ ctx.setLineDash(dashed);
293
+ } else {
294
+ ctx.setLineDash([]);
295
+ }
296
+ };
267
297
  const clampXViewport = () => {
268
298
  const count = data.length;
269
299
  if (count === 0) {
@@ -437,13 +467,7 @@ function createChart(element, options = {}) {
437
467
  ctx.save();
438
468
  ctx.strokeStyle = color;
439
469
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
440
- if (mergedLine.style === "dotted") {
441
- ctx.setLineDash([2, 4]);
442
- } else if (mergedLine.style === "dashed") {
443
- ctx.setLineDash([8, 6]);
444
- } else {
445
- ctx.setLineDash([]);
446
- }
470
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
447
471
  ctx.beginPath();
448
472
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
449
473
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -497,13 +521,7 @@ function createChart(element, options = {}) {
497
521
  ctx.save();
498
522
  ctx.strokeStyle = color;
499
523
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
500
- if (mergedLine.style === "dotted") {
501
- ctx.setLineDash([2, 4]);
502
- } else if (mergedLine.style === "dashed") {
503
- ctx.setLineDash([8, 6]);
504
- } else {
505
- ctx.setLineDash([]);
506
- }
524
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
507
525
  ctx.beginPath();
508
526
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
509
527
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -515,13 +533,11 @@ function createChart(element, options = {}) {
515
533
  ctx.save();
516
534
  ctx.strokeStyle = mergedLine.connectorColor ?? color;
517
535
  ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
518
- if (mergedLine.connectorStyle === "dotted") {
519
- ctx.setLineDash([2, 5]);
520
- } else if (mergedLine.connectorStyle === "dashed") {
521
- ctx.setLineDash([6, 5]);
522
- } else {
523
- ctx.setLineDash([]);
524
- }
536
+ applyDashPattern(
537
+ mergedLine.connectorStyle,
538
+ dashPatterns.connectorDotted,
539
+ dashPatterns.connectorDashed
540
+ );
525
541
  ctx.beginPath();
526
542
  ctx.moveTo(crisp(connectorX), crisp(lineY));
527
543
  ctx.lineTo(crisp(connectorX), crisp(connectorY));
@@ -624,13 +640,11 @@ function createChart(element, options = {}) {
624
640
  ctx.save();
625
641
  ctx.strokeStyle = actionBorderColor;
626
642
  ctx.lineWidth = 1;
627
- if (actionBorderStyle === "dotted") {
628
- ctx.setLineDash([2, 3]);
629
- } else if (actionBorderStyle === "dashed") {
630
- ctx.setLineDash([6, 4]);
631
- } else {
632
- ctx.setLineDash([]);
633
- }
643
+ applyDashPattern(
644
+ actionBorderStyle,
645
+ dashPatterns.borderDotted,
646
+ dashPatterns.borderDashed
647
+ );
634
648
  strokeRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
635
649
  ctx.restore();
636
650
  const baseFont = ctx.font;
@@ -969,13 +983,7 @@ function createChart(element, options = {}) {
969
983
  ctx.save();
970
984
  ctx.strokeStyle = crosshair.color;
971
985
  ctx.lineWidth = Math.max(1, crosshair.width);
972
- if (crosshair.style === "dotted") {
973
- ctx.setLineDash([2, 4]);
974
- } else if (crosshair.style === "dashed") {
975
- ctx.setLineDash([8, 6]);
976
- } else {
977
- ctx.setLineDash([]);
978
- }
986
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
979
987
  if (crosshair.showVertical) {
980
988
  ctx.beginPath();
981
989
  ctx.moveTo(crisp(cx), crisp(chartTop));
@@ -1017,13 +1025,7 @@ function createChart(element, options = {}) {
1017
1025
  ctx.save();
1018
1026
  ctx.strokeStyle = tickerColor;
1019
1027
  ctx.lineWidth = tickerThickness;
1020
- if (tickerStyle === "dotted") {
1021
- ctx.setLineDash([2, 4]);
1022
- } else if (tickerStyle === "dashed") {
1023
- ctx.setLineDash([8, 6]);
1024
- } else {
1025
- ctx.setLineDash([]);
1026
- }
1028
+ applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
1027
1029
  ctx.beginPath();
1028
1030
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
1029
1031
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -1096,13 +1098,11 @@ function createChart(element, options = {}) {
1096
1098
  ctx.save();
1097
1099
  ctx.strokeStyle = labelBorderColor;
1098
1100
  ctx.lineWidth = labelBorderWidth;
1099
- if (labelBorderStyle === "dotted") {
1100
- ctx.setLineDash([2, 3]);
1101
- } else if (labelBorderStyle === "dashed") {
1102
- ctx.setLineDash([6, 4]);
1103
- } else {
1104
- ctx.setLineDash([]);
1105
- }
1101
+ applyDashPattern(
1102
+ labelBorderStyle,
1103
+ dashPatterns.borderDotted,
1104
+ dashPatterns.borderDashed
1105
+ );
1106
1106
  strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
1107
1107
  ctx.restore();
1108
1108
  };
package/dist/index.d.cts CHANGED
@@ -29,6 +29,15 @@ interface ChartOptions {
29
29
  priceLines?: PriceLineOptions[];
30
30
  orderLines?: OrderLineOptions[];
31
31
  tickerLine?: TickerLineOptions;
32
+ dashPatterns?: Partial<DashPatternOptions>;
33
+ }
34
+ interface DashPatternOptions {
35
+ dotted: [number, number];
36
+ dashed: [number, number];
37
+ connectorDotted: [number, number];
38
+ connectorDashed: [number, number];
39
+ borderDotted: [number, number];
40
+ borderDashed: [number, number];
32
41
  }
33
42
  interface AxisOptions {
34
43
  lineColor?: string;
@@ -208,4 +217,4 @@ interface OhlcDataPoint {
208
217
  }
209
218
  declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
210
219
 
211
- export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
220
+ export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
package/dist/index.d.ts CHANGED
@@ -29,6 +29,15 @@ interface ChartOptions {
29
29
  priceLines?: PriceLineOptions[];
30
30
  orderLines?: OrderLineOptions[];
31
31
  tickerLine?: TickerLineOptions;
32
+ dashPatterns?: Partial<DashPatternOptions>;
33
+ }
34
+ interface DashPatternOptions {
35
+ dotted: [number, number];
36
+ dashed: [number, number];
37
+ connectorDotted: [number, number];
38
+ connectorDashed: [number, number];
39
+ borderDotted: [number, number];
40
+ borderDashed: [number, number];
32
41
  }
33
42
  interface AxisOptions {
34
43
  lineColor?: string;
@@ -208,4 +217,4 @@ interface OhlcDataPoint {
208
217
  }
209
218
  declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
210
219
 
211
- export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
220
+ export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
package/dist/index.js CHANGED
@@ -44,6 +44,14 @@ var DEFAULT_WATERMARK_OPTIONS = {
44
44
  imageTintColor: "",
45
45
  imageTintOpacity: 1
46
46
  };
47
+ var DEFAULT_DASH_PATTERNS = {
48
+ dotted: [2, 2],
49
+ dashed: [8, 6],
50
+ connectorDotted: [2, 3],
51
+ connectorDashed: [6, 5],
52
+ borderDotted: [2, 2],
53
+ borderDashed: [6, 4]
54
+ };
47
55
  var DEFAULT_PRICE_LINE_OPTIONS = {
48
56
  visible: true,
49
57
  style: "solid",
@@ -123,7 +131,8 @@ var DEFAULT_OPTIONS = {
123
131
  labelBackgroundColor: "#38bdf8",
124
132
  labelTextColor: "#0b1220",
125
133
  labelBorderRadius: 3
126
- }
134
+ },
135
+ dashPatterns: DEFAULT_DASH_PATTERNS
127
136
  };
128
137
  var BRAND_LOGO_VIEWBOX_WIDTH = 190;
129
138
  var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
@@ -153,6 +162,10 @@ function createChart(element, options = {}) {
153
162
  tickerLine: {
154
163
  ...DEFAULT_OPTIONS.tickerLine,
155
164
  ...options.tickerLine
165
+ },
166
+ dashPatterns: {
167
+ ...DEFAULT_DASH_PATTERNS,
168
+ ...options.dashPatterns ?? {}
156
169
  }
157
170
  };
158
171
  let width = mergedOptions.width;
@@ -240,6 +253,23 @@ function createChart(element, options = {}) {
240
253
  const clamp = (value, min, max) => {
241
254
  return Math.min(max, Math.max(min, value));
242
255
  };
256
+ const dashPatterns = {
257
+ dotted: mergedOptions.dashPatterns.dotted ?? DEFAULT_DASH_PATTERNS.dotted,
258
+ dashed: mergedOptions.dashPatterns.dashed ?? DEFAULT_DASH_PATTERNS.dashed,
259
+ connectorDotted: mergedOptions.dashPatterns.connectorDotted ?? DEFAULT_DASH_PATTERNS.connectorDotted,
260
+ connectorDashed: mergedOptions.dashPatterns.connectorDashed ?? DEFAULT_DASH_PATTERNS.connectorDashed,
261
+ borderDotted: mergedOptions.dashPatterns.borderDotted ?? DEFAULT_DASH_PATTERNS.borderDotted,
262
+ borderDashed: mergedOptions.dashPatterns.borderDashed ?? DEFAULT_DASH_PATTERNS.borderDashed
263
+ };
264
+ const applyDashPattern = (style, dotted, dashed) => {
265
+ if (style === "dotted") {
266
+ ctx.setLineDash(dotted);
267
+ } else if (style === "dashed") {
268
+ ctx.setLineDash(dashed);
269
+ } else {
270
+ ctx.setLineDash([]);
271
+ }
272
+ };
243
273
  const clampXViewport = () => {
244
274
  const count = data.length;
245
275
  if (count === 0) {
@@ -413,13 +443,7 @@ function createChart(element, options = {}) {
413
443
  ctx.save();
414
444
  ctx.strokeStyle = color;
415
445
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
416
- if (mergedLine.style === "dotted") {
417
- ctx.setLineDash([2, 4]);
418
- } else if (mergedLine.style === "dashed") {
419
- ctx.setLineDash([8, 6]);
420
- } else {
421
- ctx.setLineDash([]);
422
- }
446
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
423
447
  ctx.beginPath();
424
448
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
425
449
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -473,13 +497,7 @@ function createChart(element, options = {}) {
473
497
  ctx.save();
474
498
  ctx.strokeStyle = color;
475
499
  ctx.lineWidth = Math.max(1, mergedLine.thickness);
476
- if (mergedLine.style === "dotted") {
477
- ctx.setLineDash([2, 4]);
478
- } else if (mergedLine.style === "dashed") {
479
- ctx.setLineDash([8, 6]);
480
- } else {
481
- ctx.setLineDash([]);
482
- }
500
+ applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
483
501
  ctx.beginPath();
484
502
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
485
503
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -491,13 +509,11 @@ function createChart(element, options = {}) {
491
509
  ctx.save();
492
510
  ctx.strokeStyle = mergedLine.connectorColor ?? color;
493
511
  ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
494
- if (mergedLine.connectorStyle === "dotted") {
495
- ctx.setLineDash([2, 5]);
496
- } else if (mergedLine.connectorStyle === "dashed") {
497
- ctx.setLineDash([6, 5]);
498
- } else {
499
- ctx.setLineDash([]);
500
- }
512
+ applyDashPattern(
513
+ mergedLine.connectorStyle,
514
+ dashPatterns.connectorDotted,
515
+ dashPatterns.connectorDashed
516
+ );
501
517
  ctx.beginPath();
502
518
  ctx.moveTo(crisp(connectorX), crisp(lineY));
503
519
  ctx.lineTo(crisp(connectorX), crisp(connectorY));
@@ -600,13 +616,11 @@ function createChart(element, options = {}) {
600
616
  ctx.save();
601
617
  ctx.strokeStyle = actionBorderColor;
602
618
  ctx.lineWidth = 1;
603
- if (actionBorderStyle === "dotted") {
604
- ctx.setLineDash([2, 3]);
605
- } else if (actionBorderStyle === "dashed") {
606
- ctx.setLineDash([6, 4]);
607
- } else {
608
- ctx.setLineDash([]);
609
- }
619
+ applyDashPattern(
620
+ actionBorderStyle,
621
+ dashPatterns.borderDotted,
622
+ dashPatterns.borderDashed
623
+ );
610
624
  strokeRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
611
625
  ctx.restore();
612
626
  const baseFont = ctx.font;
@@ -945,13 +959,7 @@ function createChart(element, options = {}) {
945
959
  ctx.save();
946
960
  ctx.strokeStyle = crosshair.color;
947
961
  ctx.lineWidth = Math.max(1, crosshair.width);
948
- if (crosshair.style === "dotted") {
949
- ctx.setLineDash([2, 4]);
950
- } else if (crosshair.style === "dashed") {
951
- ctx.setLineDash([8, 6]);
952
- } else {
953
- ctx.setLineDash([]);
954
- }
962
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
955
963
  if (crosshair.showVertical) {
956
964
  ctx.beginPath();
957
965
  ctx.moveTo(crisp(cx), crisp(chartTop));
@@ -993,13 +1001,7 @@ function createChart(element, options = {}) {
993
1001
  ctx.save();
994
1002
  ctx.strokeStyle = tickerColor;
995
1003
  ctx.lineWidth = tickerThickness;
996
- if (tickerStyle === "dotted") {
997
- ctx.setLineDash([2, 4]);
998
- } else if (tickerStyle === "dashed") {
999
- ctx.setLineDash([8, 6]);
1000
- } else {
1001
- ctx.setLineDash([]);
1002
- }
1004
+ applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
1003
1005
  ctx.beginPath();
1004
1006
  ctx.moveTo(crisp(chartLeft), crisp(lineY));
1005
1007
  ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -1072,13 +1074,11 @@ function createChart(element, options = {}) {
1072
1074
  ctx.save();
1073
1075
  ctx.strokeStyle = labelBorderColor;
1074
1076
  ctx.lineWidth = labelBorderWidth;
1075
- if (labelBorderStyle === "dotted") {
1076
- ctx.setLineDash([2, 3]);
1077
- } else if (labelBorderStyle === "dashed") {
1078
- ctx.setLineDash([6, 4]);
1079
- } else {
1080
- ctx.setLineDash([]);
1081
- }
1077
+ applyDashPattern(
1078
+ labelBorderStyle,
1079
+ dashPatterns.borderDotted,
1080
+ dashPatterns.borderDashed
1081
+ );
1082
1082
  strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
1083
1083
  ctx.restore();
1084
1084
  };
package/docs/API.md CHANGED
@@ -57,6 +57,7 @@ Top-level options:
57
57
  - `priceLines?: PriceLineOptions[]`
58
58
  - `orderLines?: OrderLineOptions[]`
59
59
  - `tickerLine?: TickerLineOptions`
60
+ - `dashPatterns?: Partial<DashPatternOptions>` (controls dotted/dashed spacing)
60
61
 
61
62
  ### `AxisOptions`
62
63
 
@@ -129,6 +130,15 @@ watermark: {
129
130
  - `labelTextColor` (default `#0b1220`)
130
131
  - `labelBorderRadius` (default `3`)
131
132
 
133
+ ### `DashPatternOptions`
134
+
135
+ - `dotted` (default `[2, 2]`)
136
+ - `dashed` (default `[8, 6]`)
137
+ - `connectorDotted` (default `[2, 3]`)
138
+ - `connectorDashed` (default `[6, 5]`)
139
+ - `borderDotted` (default `[2, 2]`)
140
+ - `borderDashed` (default `[6, 4]`)
141
+
132
142
  ### `PriceLineOptions`
133
143
 
134
144
  - `id?: string`
package/docs/RECIPES.md CHANGED
@@ -38,6 +38,19 @@ chart.addPriceLine({
38
38
  });
39
39
  ```
40
40
 
41
+ ## Tighten dotted spacing globally
42
+
43
+ ```ts
44
+ const chart = createChart(root, {
45
+ dashPatterns: {
46
+ dotted: [2, 1],
47
+ dashed: [8, 5],
48
+ connectorDotted: [2, 2],
49
+ borderDotted: [2, 1]
50
+ }
51
+ });
52
+ ```
53
+
41
54
  ## Add a draggable pending limit line
42
55
 
43
56
  ```ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",