javascript - Enable vertical move in lightweight charts - Stack Overflow

I create a lightweight chart with candlestick data. If I left click and keep pressed on the chart I can move the candles on the horizontal axis, but not vertically on the y axis. The candles are kind of stuck on the current price scale.
If I rescale the y axis manually using click and hold the left mouse button on the y axis and move to rescale, I'm able to move the chart freely in both axis.

I tried using

handleScroll: {
  vertTouchDrag: true,
},

or

handleScale: {
  priceAxisPressedMouseMove: true,
  timeAxisPressedMouseMove: true,
},

or

rightPriceScale: {
  mode: LightweightCharts.PriceScaleMode.Normal, // Enable normal scaling mode
},
handleScale: {
  axisPressedMouseMove: {
    time: true,
    price: true,
  },
},
handleScroll: {
  mouseWheel: true, // Enable scrolling with the mouse wheel
  pressedMouseMove: true, // Allow dragging with the mouse
},

but none worked. But I think some don't work because of outdated settings. I'm using latest 4.2.2.
Anyone knows, how to allow moving the chart freely from the beginning?

A very simple example for testing is like this

var chart = LightweightCharts.createChart(document.body, {
width: 400, height: 300,
                    handleScroll: {
                        vertTouchDrag: true,
                    },
});
var lineSeries = chart.addCandlestickSeries();
lineSeries.setData([
    { time: '2019-04-11',open: 80.01, close: 82, high: 83, low: 79 },
]);
chart.timeScale().fitContent();

(See /)

I create a lightweight chart with candlestick data. If I left click and keep pressed on the chart I can move the candles on the horizontal axis, but not vertically on the y axis. The candles are kind of stuck on the current price scale.
If I rescale the y axis manually using click and hold the left mouse button on the y axis and move to rescale, I'm able to move the chart freely in both axis.

I tried using

handleScroll: {
  vertTouchDrag: true,
},

or

handleScale: {
  priceAxisPressedMouseMove: true,
  timeAxisPressedMouseMove: true,
},

or

rightPriceScale: {
  mode: LightweightCharts.PriceScaleMode.Normal, // Enable normal scaling mode
},
handleScale: {
  axisPressedMouseMove: {
    time: true,
    price: true,
  },
},
handleScroll: {
  mouseWheel: true, // Enable scrolling with the mouse wheel
  pressedMouseMove: true, // Allow dragging with the mouse
},

but none worked. But I think some don't work because of outdated settings. I'm using latest 4.2.2.
Anyone knows, how to allow moving the chart freely from the beginning?

A very simple example for testing is like this

var chart = LightweightCharts.createChart(document.body, {
width: 400, height: 300,
                    handleScroll: {
                        vertTouchDrag: true,
                    },
});
var lineSeries = chart.addCandlestickSeries();
lineSeries.setData([
    { time: '2019-04-11',open: 80.01, close: 82, high: 83, low: 79 },
]);
chart.timeScale().fitContent();

(See https://jsfiddle.net/g5qeLa7h/)

• javascript
• lightweight-charts

Share Improve this question Follow edited Jan 2 at 21:38 John Doe asked Jan 2 at 19:27 John DoeJohn Doe 2,83622 gold badges3838 silver badges5151 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

By coincidence I found the solution by setting autoScale to false on the candleStickSeries like so

lineSeries.priceScale().applyOptions({
  autoScale: false, // disables auto scaling based on visible content
});