klinecharts / KLineChart

📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)

Home Page:https://klinecharts.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature] setVisibleRange

oneart-dev opened this issue · comments

Feature Description

It would be super helpful to add function setVisibleRange(start, end).

I'm showing entry and exits on the chart and i would like to be able to focus exact range(trade) so user don't have to scroll every time.

To Do

  1. add setVisibleRange function

Found the solution for now:

    const { from, to } = range(); // timestamp values
    const bars = (to - from) / interval.IntervalMs;  
    const chartWidth = this.getChartWidth(); // use clientWidth to get chart width if responsive or fixed value
    const barSpace = chartWidth / bars;
    this.i.setBarSpace(Math.max(Math.min(barSpace, 50), 1)); // respect constraints
    this.i.scrollToTimestamp(to);

If you using markers timestamp it is good idea to add padding on both sides so it looks nice.
Code simplified and do not check if from and to exists in data list. You should check it if necessary.

that's great, I will have a try