tradingview / lightweight-charts Goto Github PK

In #24 we'll implement series-based markers (attached to series), but it would be awesome to have a series with events, where we can set price where marker should be placed on the chart. Also, these markers might be "in the future" (extend time scale).

See comments:

• #24 (comment)
• #24 (comment)
• #24 (comment)
• #24 (comment)

Hi,

I'm unable to retrieve open, high, low, close in subscribeCrosshairMove param object with CandleSeries. Is there a way to achieve this ?
The only thing I manage to retrieve is a single value which I assume is the close (I think) :
const price = param.seriesPrices.get(this.oCandleSeries);

Thanks,

It's nice to have live demo on the https://codesandbox.io for example =)

You'll note the first line disappears as you zoom in and it goes just outside of the viewport, the second line will do the same when you zoom further.

Fiddle with full reference data: https://jsfiddle.net/jimeney/Lgtrhj52/9/

Steps to repeat: zoom out

I'm trying to plot simple horizontal lines, referencing data stored externally, and via a loop.

As there are no documented drawing tools, so I'm opting to add datapoints to a line series, on demand.

Sample data:
{xe: 1562713200, xs: 1561834800, ye: 12835.97409692, ys: 12244}

The code is designed to add one or more line series dependent on the data returned, although in the examples with static code, I can see that the chart line does not cope with missing data for the timeframe resulting in a solid horizontal line, when the data should start and stop in the middle of the chart.

This is the code in question:
` function loadTrendLines() {

                const url = "/api/trendlines/" + symbol.replace("/", "_") + "/" + timeframe;

                $.ajax({
                    type: 'GET',
                    url: url,
                    contentType: 'application/json',
                    dataType: 'json',
                    responseType: 'application/json',


                    success: function (jdata)
                    {
                        console.log(jdata);

                        var i;
                        for (i = 0; i < jdata.TrendLines.length; ++i) {
                            console.log(jdata.TrendLines[i]);

                            var tldata = [];

                            tldata.push({ time: jdata.TrendLines[i].xe, value: jdata.TrendLines[i].ye });
                            tldata.push({ time: jdata.TrendLines[i].xs, value: jdata.TrendLines[i].ue });

                            var lineSeries = chart.addLineSeries({
                                lastValueVisible: false
                            });

                            lineSeries.setData(tldata);

                        }

                    }

                });
            }`

I'm receiving the following error:

Uncaught Error: Value is undefined
at h (lightweight-charts.standalone.production.js:7)
at p (lightweight-charts.standalone.production.js:7)
at t.updateSeriesData (lightweight-charts.standalone.production.js:7)
at t.updateData (lightweight-charts.standalone.production.js:7)
at e.t.update (lightweight-charts.standalone.production.js:7)
at Object.success (HTMLPage1.html?symbol=BINANCE:BTC/USDT&barstoshow=100&timeframe=60&trendlines=1:252)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest. (jquery-3.4.1.min.js:2)

If I manually define the xe, xs, ye and ue values, running the same inner loop logic, but placing this outside of the loop, it is successful, however this is not referencing any live data, merely static examples.

Can you please advise on a) whether this workaround should be viable, and b) if there are drawing tools that can be leveraged?

Please check this jsfiddle it should display the chart from the beginning of 2019 (actually, from Dec, 26), but it displays it from the middle of Jan'2019.

Are timeframes other than 'day' resolutions supported? I can't see any documentation to suggest how this may work

The following code is a little bit strange

Questions:

1. Why do we check signPositive === true if the value is already negative? I believe we can drop that check.
2. sign = '−'; and sign = '\u2212'; are the same - see https://www.fileformat.info/info/unicode/char/2212/index.htm
3. Why do we need to use unicode's minus sign instead of just -?

/cc @ezhukovskiy

We have an options to disable/enable/customize some features (e.g. time/price axis border visibility). We need to add them to graphics tests.

issue seems to be timezone related, please skip to #84 (comment) and #84 (comment)

Lightweight Charts Version:
1.0.0 RC5
Steps/code to reproduce:

load data from json url and plot the chart

Actual behavior:

right now my json api delivers this data:

[
...snip...
{"time":"2019-06-13","open":31.69,"high":33.32,"low":31.41,"close":33.09},
{"time":"2019-06-14","open":32.97,"high":33.2,"low":32.22,"close":32.68},
{"time":"2019-06-17","open":32.1,"high":32.92,"low":32.1,"close":32.56},
{"time":"2019-06-18","open":32.78,"high":33.3,"low":32.42,"close":32.52}
]

the chart however, shows all the dates substracted by 1 day(?)

Expected behavior:

it should plot the chart dates like its input.
Screenshots

see screenshot of the actual chart to the data pasted above:

thank you,
Andreas

In #24 we'll implement series-based markers (attached to series), but it would be awesome to have markers right above timeaxis. Also, these markers might be "in the future" (extend time scale).

See comments:

• #24 (comment)
• #24 (comment)
• #24 (comment)
• #24 (comment)

Related issue #127

below is the candlestick options and error output. Please note that precision of 3, 4, and 6 work fine. 5 is the only issue im seeing. Trying to display Forex data

When setting the layout properties to transparent, the chart doesn't seem to be working correctly.
https://jsfiddle.net/70k4yuhL/2/

Code to reproduce the issue:

var container = document.createElement('div');
document.body.appendChild(container);

var chart = LightweightCharts.createChart(container);

var areaSeries = chart.addAreaSeries(); // or any other series type
var volumeSeries = chart.addHistogramSeries();

volumeSeries.setData([
	{ time: '2019-05-24', value: 23714686.00, color: 'red' },
]);

areaSeries.setData([
	{ time: '2019-05-24', value: 179.66 },
]);

If remove color: 'red' then it works fine.

Originally posted by @timocov in #108 (comment)

Thanks for a great library!

I'm trying to display last 24h market data, however I can't find any documentation how time should be formatted, have tried something like :

lineSeries.setData([
{ time: '2019-04-11 10:14:19', value: 80.01 },
{ time: '2019-04-11 11:16:20', value: 96.63 },
{ time: '2019-04-11 12:38:10', value: 192.63 },
]);

however it does not work,
How to format correctly time to display data set within the same day?

kozilla

Lightweight Charts Version:

Steps/code to reproduce:

1. Open chart on iOS in Safari
2. Try to zoom chart by pinch gesture

Actual behavior:

The page is zoomed.

Expected behavior:

The chart is zoomed.

In this code we need to have event.preventDefault() call.

Hello TV;

first of all i wanna say thank you for that library!

could you please add an example with data pulled out of a remote json api?

thanks so much!

best,
Andreas

Current background of the crosshair axis label is hardcoded to #4c525e. This doesn't fit some color schemes.

Would be great if it would be a customizable option.

Lightweight Charts Version: 1.0.0

Steps/code to reproduce:

var chart = LightweightCharts.createChart(document.body);

var series = chart.addHistogramSeries({
	color: 'blue',
});

series.setData([
	{ time: '2019-05-23', value: 10, color: 'red' },
	{ time: '2019-05-24', value: 20, color: 'green' },
	{ time: '2019-05-28', value: 30 },
]);

series.applyOptions({
	color: 'yellow',
});

Actual behavior:

The last histogram item is blue.

Expected behavior:

The last histogram item is yellow.

is there any example with switcher for multiple series to show and hide each series?

Lightweight Charts Version: 1.0.0-rc.3

Steps/code to reproduce:

var series = chart.addLineSeries({
	priceFormat: {
		minMove: 1,
		precision: 0,
	},
});

Actual behavior:

One trailing zeros on the price axis.

Expected behavior:

No trailing zeros on the price axis.

Screenshots

CodeSandbox/JSFiddle/etc link:

https://jsfiddle.net/3ma1hzq4/

To avoid confusing.

Includes file names and function/methods/interfaces.

Lightweight Charts Version: latest

Steps/code to reproduce:

1. Open any chart on iOS
2. Long press on chart

Actual behavior:

Selection's magnifier is shown.

Expected behavior:

As soon there is canvas elements and nothing can be selected - no selection's magnifier.

Screenshots

We need to add the following CSS rules either on chart widget or each canvas' container:

user-select: none;
-webkit-user-select: none;
-moz-user-select: none;

Hi! Thanks for the great work on this library.
I couldn't find in the docs any info on whether it's possible to plot a series of potentially sparse points that would be shown with some icon for each point on the chart, or maybe something like the possibility to add annotations.
The use case I'm after is being able to show on the chart specific points in time/price where something happened, such as real world events that might have affected the price, etc.
I'm not yet very familiar with the codebase of the library, but it seems to me that the simplest way to implement something like this would be to support a kind of "scatter series" that would allow you to specify an icon (image or char?) to plot each point with, which could coexist with a normal candlestick series for example, and could show a popover with details about that specific point (potentially arbitrary text) when hovered by the user.
Any way to do something like this now? If not, would it eventually be added?
Thanks again!

It appears there's an intermittent, but repeatable issue with price axis scaling.

Renders correctly
https://www.chartex.pro/chartviewerstatic-debug.html?symbol=BINANCE:ALGO/USDT&trendlines=1&supports=1&timeframe=60&w=1600&h=800&barstoshow=500

Axis scaling fails
https://www.chartex.pro/chartviewerstatic-debug.html?symbol=OANDA:EUR/GBP&trendlines=1&supports=1&timeframe=60&w=1600&h=800&barstoshow=500

getVisibleRange() is returning null when I am using mulitple data set on chart. fitContent() doesn't work too when using multiple lines and area data. Do I need to specify exactly as the time from the Data which I have?

var range = {
  from: '2019-06-09',
  to: '2019-06-10'
};
          chart.timeScale().setVisibleRange(range);
          chart.timeScale().fitContent();

I was unable to create a chart that would scroll horizontally on iOS, yet wouldn't prevent user from scrolling the page vertically. The chart captures touch events and doesn't let them through.

I expected that one of the following options would have worked for me, but neither did:

handleScroll: {
  pressedMouseMove: false
}

// Nope, disables all scroll on touch devices

OR

handleScale: {
  mouseWheel: false
}

// Nope, still captures vertical scroll on touch devices

Hi,
Can the time be formatted as HH: mm? For example, 12:20, 12:21,...
I did not find a similar configuration in the document。

We have graphics tests, which compare screenshots between merge-base and head commits. It would be awesome, if this a test is failed, then upload screenshots (golden, test and diff) as artifacts to somewhere (s3, CI storage, etc).

Currently we use Travis CI and it doesn't support uploading artifacts for pull requests https://docs.travis-ci.com/user/uploading-artifacts/:

Note that the artifacts addon is not available for pull request builds.

Also, it doesn't have its own artifacts storage, so we will need to up S3 for that (it's not a big problem actually).

It looks like Circle CI supports uploading artifacts and also it has own storage for that (https://circleci.com/docs/2.0/artifacts/).

Hello!
My series data like the following json:
[{time: 1559931660, open: 154.945, close: 154.9, high: 154.955, low: 154.9},
{time: 1559931720, open: 154.89, close: 154.94, high: 154.96, low: 154.89},
{time: 1559931780, open: 154.92, close: 154.95, high: 154.96, low: 154.905},
{time: 1559931840, open: 154.94, close: 154.955, high: 154.97, low: 154.94},
{time: 1559931900, open: 154.96, close: 154.955, high: 154.97, low: 154.92}]
The charts shows UTC time on the time axis.
How can I set the timezone to Beijing time?

Currently MouseEventHandler and widgets like PaneWidget use detection of the device type to determine what type of event subscribe for and what to do in several cases (long tap event, dragging, tracking mode).

In a lot of cases we don't need to detect it, we can subscribe on all needed event with separate handles and there we'll know what's happened (touch event or mouse one). It requires some refactoring in MouseEventHandler and detecting that an event is emulated from original one (mouse event from touch for instance).

Don't forget about this.

I believe in the PR for this issue we can remove https://github.com/tradingview/lightweight-charts/blob/6f132374ed82b31f3b1e66837b2956470057a50d/src/gui/support-touch.ts module at all.

Related links:

• https://developer.mozilla.org/en-US/docs/Web/API/InputDeviceCapabilities/firesTouchEvents

For installing size-limit adds a lot of packages (like webpack, puppeteer, chromium) in the root. It increases npm install time and adds unnecessary packages. Let's wait ai/size-limit#110 first.

A config file .size-limit.js might be something like the following:

/* eslint-env node */

const entryModule = require('./package.json').module;

const commonChecksConfig = {
	webpack: false,
	running: false,
	path: entryModule,
};

module.exports = [
	{
		...commonChecksConfig,

		name: 'size',
		limit: '43.5 KB',
	},
	{
		...commonChecksConfig,

		name: 'time',
		limit: '0.9 s',
	},
];

Is there anyway to get data from a TradingView chart? I mean I see a website that uses TradingView chart to show it's data like stock data for example. I like to grad that data and do some data analyzes on them. How is it possible?

Lightweight Charts Version:

Steps/code to reproduce:

1. Open chart (tested on mobile Safari)
2. Long tap on chart to enable tracking mode (do not release your finger)
3. Touch with a second finger and try to move them to make a pinch zoom.

Actual behavior:

Both pinch zoom and tracking mode are active.

Expected behavior:

Only one action/gesture should be active at the moment (either pinch or long tap). Even if we just prevent pinch here, we can release one of two fingers and then press it again. It looks like we should detect only one action while any finger is on the screen and reset them when no fingers on the screen.

Lightweight Charts Version: 1.0.0

Steps/code to reproduce:

function generateData() {
	var res = [];
	var time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
	for (var i = 0; i < 1000; ++i) {
		res.push({
			time: time.getTime() / 1000,
			value: i,
		});

		time.setUTCDate(time.getUTCDate() + 1);
	}
	return res;
}

var chart = LightweightCharts.createChart(document.getElementById('container'));

var mainSeries = chart.addLineSeries();

mainSeries.setData(generateData());

setTimeout(() => {
	chart.timeScale().setVisibleRange({
		from: (new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0))).getTime() / 1000,
		to: (new Date(Date.UTC(2018, 1, 1, 0, 0, 0, 0))).getTime() / 1000,
	});
}, 2000);

1. Open the page
2. Move cursor to some place
3. Wait until timeout is fired and visible range is changed

Actual behavior:

Crosshair views has old state (old date/time and price).

Expected behavior:

Crosshair views has updated state.

Screenshots

Actual:

Expected: the date, time and price should be from the current view.

I added this chart library unpkg to my pet project and I see strange margins, this is the screenshot https://postimg.cc/ykktdrJ1. What can cause this?

Is it possible?

Thanks for your great tools!

By default top or bottom price scale mark can be cut.
It is OK if it is cut because of user's scroll, but if I don't use scroll and zoom, I just want to display the chart image instead of a static chart image, a cut mark looks like a bug.
Probably, auto scale should take into account price scale marks.

When the price scale is switched to the percentage mode, the chart displays 0 line, but there are no options to customize this line.
There should be a way to change its style.

At the moment we have some scripts in bash, node, in package.json (scripts field). Quite possible we need to make them all in one Gulp config.

Lightweight Charts Version: 1.0.0 rc5
Ubuntu 18.04, Brave 0.65.118

Steps/code to reproduce:
Charts only show part of the axis on Brave browser.
For example, all examples (like https://jsfiddle.net/TradingView/61xkszjp/ )

add-new-color-to-histogram.case.js:

function generateData() {
	var colors = [
		'#013370',
		undefined,
	];

	var res = [];
	var time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
	for (var i = 0; i < 500; ++i) {
		res.push({
			time: time.getTime() / 1000,
			value: i,
			color: colors[i % colors.length],
		});

		time.setUTCDate(time.getUTCDate() + 1);
	}

	return res;
}

// eslint-disable-next-line no-unused-vars
function runTestCase(container) {
	var chart = LightweightCharts.createChart(container);

	var mainSeries = chart.addHistogramSeries({
		lineWidth: 1,
		color: '#ff0000',
	});

	var data = generateData();
	var lastItem = data.splice(-1, 1)[0];
	mainSeries.setData(data);

	lastItem.color = '#ccaaee';
	mainSeries.update(lastItem);
}

when i used in ie，it report error
object not support "find" function

Hi,

I have a basic OHLC chart with volume data. I'd like to apply a custom price formatter for the candles only and not the volume. If I follow this demo the price is formatted both for volume and OHLC candles. How can I just format the CandleSeries ?

Thanks,

Hi,

I am having trouble making my graph display actual hour, minute, second data.
For some reason, it is perfectly creating a daily graph, but even with
secondsVisible: true, still nothing shows up. I've tried messing with dateFormat, but it didn't help
my time looks as so: 2019-07-10 13:55:00

my dateFormat: 'yyyy-MM-dd', I couldn't find any examples in the documentation using hours and minutes.

How would one implement this?

Thanks and Kind Regards

Lightweight Charts Version:
Latest

Steps/code to reproduce:
Just rotate the device

Actual behavior:
Fixed width always

Expected behavior:
Need to be responsive

Screenshots
Here also: https://www.tradingview.com/lightweight-charts/

Looking through the documentation i dont see anything along these lines. I want to have my main chart but then add some additional data in a separate chart window. I believe some apps call it an Indicator Window. I was curious if its possible with this library.