CODEWITHSUNDEEP
javascriptreactjslightweight-charts
Charles Yeo
Charles Yeo

Reputation: 33

Detect/listen when visible price range changed in lightweight-chart

So the timeScale in lightweight-chart has a way to detect when visible time range is being updated (through subscribeVisibleTimeRangeChange).

My question, is there a similar way to detect/listen when visible price range changed? Gone through the documentation for a bit but couldn't find anything close.

We have a use case where we wanna adjust the price line in area chart when min/max price range changes.

Feedback would be much appreciated!

Upvotes: 0

Views: 1388

Answers (2)

user1930225
user1930225

Reputation: 1

Just in case someone wants to do this. There is a workaround that worked pretty well with me. The idea is to create a dummy plugin to provide this functionality for you:

create some .ts file and the below code. this is just some basic code (modify if needed):

import { CanvasRenderingTarget2D } from 'fancy-canvas';
import {
  ISeriesPrimitive,
  ISeriesPrimitiveAxisView,
  ISeriesPrimitivePaneRenderer,
  ISeriesPrimitivePaneView,
  SeriesPrimitivePaneViewZOrder,
  Time,
} from 'lightweight-charts';

class PaneRenderer implements ISeriesPrimitivePaneRenderer {
  constructor(private onUpdate: () => void) {}

  draw(target: CanvasRenderingTarget2D): void {
    this.onUpdate();
  }
  drawBackground?(target: CanvasRenderingTarget2D): void {
    this.onUpdate();
  }
}

class PaneView implements ISeriesPrimitivePaneView {
  constructor(private onUpdate: () => void) {}
  zOrder?(): SeriesPrimitivePaneViewZOrder {
    return 'top';
  }
  renderer(): ISeriesPrimitivePaneRenderer | null {
    return new PaneRenderer(this.onUpdate);
  }
}

class TimeAxisView implements ISeriesPrimitiveAxisView {
  constructor(private onUpdate: () => void) {}
  coordinate(): number {
    return 0;
  }
  fixedCoordinate?(): number | undefined {
    return 0;
  }
  text(): string {
    return '';
  }
  textColor(): string {
    return '';
  }
  backColor(): string {
    return '';
  }
  visible?(): boolean {
    return true;
  }
  tickVisible?(): boolean {
    return true;
  }
  update() {
    this.onUpdate();
  }
}

export class CustomPrimitive implements ISeriesPrimitive<Time> {
  _paneViews: ISeriesPrimitivePaneView[];
  _timeAxisViews: ISeriesPrimitiveAxisView[];
  constructor(private updateCallback: () => void) {
    this._paneViews = [new PaneView(updateCallback)];
    this._timeAxisViews = [new TimeAxisView(updateCallback)];
  }

  updateAllViews() {
    this.updateCallback();
  }
  timeAxisViews() {
    return this._timeAxisViews;
  }
  paneViews() {
    return this._paneViews;
  }
  priceAxisPaneViews(): readonly ISeriesPrimitivePaneView[] {
    return this._paneViews;
  }
}

Then you can use it like this:

const primitive = new CustomPrimitive(() => {
      // some call back function that will execute if
      // the price scale change or time scale change
});
candlestickSeries.attachPrimitive(primitive);

If you want it to execute only in case of price scale change, then Modify the CustomPrimitive class to be (did not test it but should work):

export class CustomPrimitive implements ISeriesPrimitive<Time> {
  _paneViews: ISeriesPrimitivePaneView[];
  constructor(private updateCallback: () => void) {
    this._paneViews = [new PaneView(updateCallback)];
  }

  updateAllViews() {
    this.updateCallback();
  }
  paneViews() {
    return this._paneViews;
  }
  priceAxisPaneViews(): readonly ISeriesPrimitivePaneView[] {
    return this._paneViews;
  }
}

Upvotes: 0

timocov
timocov

Reputation: 1166

No, lightweight-charts doesn't have such feature yet. You can create a feature request for that (but please look at https://github.com/tradingview/lightweight-charts/issues/621 first, there you can find a discussion why there is still no getters/setters for price range, I think it might be related to events too).

We have a use case where we wanna adjust the price line in area chart when min/max price range changes.

You can try to do some hacks with overriding autoscaleInfoProvider of the series, but I can't tell you for sure whether it will work for you or not.

Upvotes: 0

Related Questions