trash-and-fire / svelte-lightweight-charts Goto Github PK
View Code? Open in Web Editor NEWSvelte wrapper for financial lightweight charts
License: MIT License
Svelte wrapper for financial lightweight charts
License: MIT License
Hi, cool library!
I'm using a Line series like
<Chart {...chartOptions}>
{#each graphData as d}
<LineSeries data={d} reactive={true} />
{/each}
</Chart>
I have a series of data which might have gaps. Reading from tradingview/lightweight-charts#699 there's not any offical support for this apart from 'create a new series' to create the gap effect.
I've created a custom mapping which does this logic of splitting gaps into a new series (leaving them all in the same series, draws a single line through points which don't have a value), this now allows me gaps in my charts!
The issue I've been trying to solve since is removing the rightPriceScale for the older series, I only want to show the priceLine for the most recent series. I can write a map function so I have that bool visible in the variable graphData as d
.
I've been just playing around with adding extra options to LineSeries - priceLineVisible
, priceScaleId
and the other visible options, all but visible
cause no effect on the rightPriceScale, and visible
isn't what I want anyways. But it seems like I can remove them by setting
rightPriceScale: {
visible: true
}
Is there a way to optionally apply this during the foreach?
I've seen similar code doing logic like
splitUpSeriesWithGaps(originalSeries).forEach((series) => {
const lineSeries = chart.addLineSeries({
lineStyle: 2,
priceLineVisible: false,
});
lineSeries.setData(series);
});
Thanks!
Hello, nice package! If you update lightweight-charts to 3.8.0 yourself, will nothing break?
Is there a way to plot a vertical PriceLine similar to
<PriceLine
price={filteredData.threeYearsAgo[0].value}
lineWidth = {1.5}
color="#d4d9d9"
/>
for a specific date let say "2023-02-02"?
When making a chart that is under the daily timeframe, I am returned an error. It appears that the only allowed date format is yyyy-mm-dd instead of yyyy-mm-dd-hh-mm-ss. I need my chart to be able to read data with timeframes under the daily. I dont know why this would be the case.
repl
Hi,
is it possible to add the new feature of lightweight-charts 4.10 into your library?
tradingview/lightweight-charts#1198
I would much appreciated it!
For example, in javascript, we can add priceline dynamically by:
const candlestickSeries = chart.addCandlesticksSeries({...}}
candlestickSeries.createPriceLine({...})
From the examples in project, it seem the pricelines are predefined. Is there anyways to add new priceline dynamically when there is an event window.addListener(...)?
Hi,
I wanted to have your opinion about my svelte-lightweight-chart in my website: https://stocknear.com/
In my opinion, the vertical that outputs the Price in the legend is still a little unstable ( dont feel good or smooth).
That's because I have to hold my finger down for 1-2 seconds before the vertical line appears.
Is there a way to make it happen instantly when the user swipes left or right but not appear when the user swipes up or down?
My options have the settings:
const options = {
layout: {
backgroundColor: '#1A1A27',
textColor: '#FFFFFF',
},
grid: {
vertLines: {
color: '#1A1A27',
visible: false,
},
horzLines: {
color: '#1A1A27',
visible: false,
},
},
crosshair: {
// hide the horizontal crosshair line
horzLine: {
visible: false,
labelVisible: false,
},
// hide the vertical crosshair label
vertLine: {
labelVisible: false,
style: 0,
},
},
rightPriceScale: {
visible: false,
borderColor: 'rgba(197, 203, 206, 0.8)',
},
handleScale: {
mouseWheel: false,
},
handleScroll: {
mouseWheel: false,
horzTouchDrag: false,
vertTouchDrag: false,
pressedMouseMove: false,
},
timeScale: {
borderColor: '#FFFFFF',
textColor: '#FFFFFF',
visible: false,
fixLeftEdge: true,
fixRightEdge: true,
},
};
I would appreciate alot your help. Please open the site with your smartphone.
(PS: If you have a iphone the site will first crash because top-level await is not supported in safari 14 ๐ )
All you need to do is go back to Homepage and click on a stock ticker such as Google and it will work again :)
Usage:
import chart from "svelte-lightweight-charts";
^ within my App.svelte running nodejs version 14.17.6
Error:
'default' is not exported by node_modules\svelte-lightweight-charts\index.js
Possible fix:
I just added 'default' on line 3 within 'svelte-lightweight-charts\index.js' like this:
'export default function chart(node, params) {'
and it removed the error
Other:
Love the repo! It's sooooo handy... Thx a lot.
Is there a way to download the graph by clicking on a button in order to share the stock movement?
is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules.
If I restart my dev server, I get the error:
Cannot use import statement outside a module
and if I then reload the page, no errors appear and the page loads.
EDIT: I added lightweight-charts and svelte-lightweight-charts to optimizeDeps and it works more often than not but i still sometimes get the error
svelte-lightweight-charts doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
Cannot use import statement outside a module`
How do I go about resolving this issue?
How do you implement Series Markers?
Hi, how do I control the height of histogram series in overlay mode? scaleMargins doesn't help... Didn't find an answer on stackoverflow and issues lightweight-charts.
When scrolling, it happens that the height of the histogram series overlaps the candlestick series. Is it possible to control this? For example, specify height: 20% for histogram series.
Histogram series options:
{ color: '#385263', lineWidth: 2, priceFormat: { type: 'volume' }, overlay: true, scaleMargins: { top: 0.90, bottom: 0 } }
Hi,
how we update the chart ???
pushing new data into data variable does not work!
I test the candelstick model, I can't find a method update in Chart
Thank's
I have this annoying problem that i cant plot the data when i make an API call. Maybe this is trivial but i have no clue what is going on here
//global variable
let output;
async function getStockData() {
// make the POST request to the endpoint
const response = await fetch('http://127.0.0.1:8000/stock-data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
});
const output = await response.json();
};
<Chart width={600} height={150}>
<CandlestickSeries data={output}/>
</Chart>
Any idea how to plot the data from the function getStockData() that makes the api call?
If you have a look at this REPL, it loads a Raleway font. Trying to switch to it changes the time axis font, but does not the price one initially.
Hi,
I have the issue that when i update new data to my chart via a button click (e.g. stock data from 2023) it does not show it immediately in the graph, i.e. it should show the new data instead of swiping right. I want that the should always show the newest data when the button was clicked.
Do you know how i can achieve this?
There is a problem with updating the right price scale when changing the symbol.
The new data moves to another price and the screen goes blank.
But the problem only occurs when dragging the right scale up or down with the left mouse button.
Maybe I'm doing something wrong..
So far I solved the problem through autoScale: true
chartApi.applyOptions({ priceScale: { autoScale: true } })
Hi,
Im trying to create a graph that is by default completely zoomed out and does not allow to zoom in but it fails. Can you help me out with this issue please?
my options look like this:
const options = {
layout: {
backgroundColor: '#1A1A27',
textColor: '#FFFFFF',
},
grid: {
vertLines: {
color: '#1A1A27',
visible: false,
},
horzLines: {
color: '#1A1A27',
visible: false,
},
},
crosshair: {
// hide the horizontal crosshair line
horzLine: {
visible: false,
labelVisible: false,
},
// hide the vertical crosshair label
vertLine: {
labelVisible: false,
style: 0,
},
},
rightPriceScale: {
visible: false,
borderColor: 'rgba(197, 203, 206, 0.8)',
},
timeScale: {
borderColor: '#FFFFFF',
textColor: '#FFFFFF',
locked: false,
scrolling: false,
},
};
Thanks for the library. It's quite awesome. One question or suggestion is, are there plans to add interactivity elements to these charts? By interactivity I mean: Date Range Selection, Add/Remove additional series to the same chart, Linked Charts with brush selection... etc.
In general some interactivity options, not just the hover. Thanks
Amazing library, thank you for creating it!
Is there a way to add markers to a line chart? For example I am displaying a line chart with moving averages and want to display simple markers with text at various price points on the chart. Is this possible with the current library of components?
Hi,
Is it possible to add the functionality that the last value animation is showing continuously the pulse animation?
Hi! How to get a reference to a DOM element container when creating a Chart?
bind:this on a component won't work..the only way to use is via use.
Hi,
Is it possible to add the feature that the last value of a lineseries is pulsing, see https://tradingview.github.io/lightweight-charts/docs/api/enums/LastPriceAnimationMode.
Would appreciate it alot.
Thanks
Hi,
I wanted to know if it is possible to plot data for a fixed time interval even when the value is not available yet.
Here a concrete example. I have the dataset:
const data = [
{time: '2018-10-19', value: 75.46},
{time: '2018-10-22', value: 76.69},
{time: '2018-10-23', value: 73.82},
{time: '2018-10-24', value: 71.50},
{time: '2018-10-25', value: 72.74},
{time: '2018-10-26', value: 72.06},
{time: '2018-10-29', value: 70.56},
{time: '2018-10-30', value: 73.47},
{time: '2018-10-31', value: 72.64},
{time: '2018-11-01', value: 74.28},
{time: '2018-11-02', value: 72.86},
{time: '2018-11-05', value: 74.59},
{time: '2018-11-06', value: 75.48},
{time: '2018-11-07', value: 76.82},
{time: '2018-11-08', value: 75.57},
{time: '2018-11-09', value: 74.25},
{time: '2018-11-12', value: 74.42},
{time: '2018-11-13', value: 72.43},
{time: '2018-11-14', value: 72.51},
{time: '2018-11-15', value: 73.06},
{time: '2018-11-16', value: 73.40},
{time: '2018-11-19', value: 71.23},
{time: '2018-11-20', value: 68.18},
{time: '2018-11-21', value: 69.49},
{time: '2018-11-23', value: 67.31},
{time: '2018-11-26', value: 68.43},
{time: '2018-11-27', value: 68.09},
{time: '2018-11-28', value: 69.30},
{time: '2018-11-29', value: 69.91},
{time: '2018-11-30', value: 69.50},
{time: '2018-12-03', value: 72.42},
{time: '2018-12-04', value: 70.78},
{time: '2018-12-06', value: 69.01},
{time: '2018-12-07', value: 68.57},
{time: '2018-12-10', value: 67.67},
{time: '2018-12-11', value: 68.01},
{time: '2018-12-12', value: 68.79},
{time: '2018-12-13', value: 69.75},
{time: '2018-12-14', value: 68.20},
{time: '2018-12-17', value: 67.02},
{time: '2018-12-18', value: 64.75},
{time: '2018-12-19', value: 63.09},
{time: '2018-12-20', value: 62.19},
{time: '2018-12-21', value: 61.42},
{time: '2018-12-24', value: 60.07},
{time: '2018-12-26', value: 62.54},
{time: '2018-12-27', value: 61.67},
{time: '2018-12-28', value: 60.98},
{time: '2018-12-31', value: 61.55},
{time: '2019-01-02', value: 60.91},
{time: '2019-01-03', value: 61.15},
{time: '2019-01-04', value: 62.81},
{time: '2019-01-07', value: 62.55},
{time: '2019-01-08', value: 63.89},
{time: '2019-01-09', value: 65.45},
{time: '2019-01-10', value: 64.86},
{time: '2019-01-11', value: 63.47},
{time: '2019-01-14', value: 62.45},
{time: '2019-01-15', value: 63.45},
{time: '2019-01-16', value: 63.73},
{time: '2019-01-17', value: 63.96},
{time: '2019-01-18', value: 64.93},
{time: '2019-01-22', value: 61.83},
{time: '2019-01-23', value: 61.94},
{time: '2019-01-24', value: 63.22},
{time: '2019-01-25', value: 64.07},
{time: '2019-01-28', value: 63.20},
{time: '2019-01-29', value: 63.57},
{time: '2019-01-30', value: 64.28},
{time: '2019-01-31', value: 64.27},
{time: '2019-02-01', value: 64.63},
{time: '2019-02-04', value: 64.37},
{time: '2019-02-05', value: 64.57},
{time: '2019-02-06', value: 63.70},
{time: '2019-02-07', value: 63.41},
{time: '2019-02-08', value: 63.37},
{time: '2019-02-11', value: 62.32},
{time: '2019-02-12', value: 62.89},
{time: '2019-02-13', value: 63.72},
{time: '2019-02-14', value: 63.89},
{time: '2019-02-15', value: 64.48},
{time: '2019-02-19', value: 66.38},
{time: '2019-02-20', value: 67.38},
{time: '2019-02-21', value: 66.48},
{time: '2019-02-22', value: 67.54},
{time: '2019-02-25', value: 66.80},
{time: '2019-02-26', value: 67.26},
{time: '2019-02-27', value: 67.25},
{time: '2019-02-28', value: 65.86},
{time: '2019-03-01', value: 65.92},
{time: '2019-03-04', value: 66.04},
{time: '2019-03-05', value: 66.36},
{time: '2019-03-06', value: 65.68},
{time: '2019-03-07', value: 64.41},
{time: '2019-03-08', value: 63.72},
{time: '2019-03-11', value: 64.85},
{time: '2019-03-12', value: 64.96},
{time: '2019-03-13', value: 65.25},
{time: '2019-03-14', value: 64.90},
{time: '2019-03-15', value: 65.12},
{time: '2019-03-18', value: 66.70},
{time: '2019-03-19', value: 67.71},
{time: '2019-03-20', value: 68.60},
{time: '2019-03-21', value: 68.41},
{time: '2019-03-22', value: 66.03},
{time: '2019-03-25', value: 65.06},
{time: '2019-03-26', value: 65.31},
{time: '2019-03-27', value: 64.93},
{time: '2019-03-28', value: 65.49},
{time: '2019-03-29', value: 65.43},
{time: '2019-04-01', value: 66.66},
{time: '2019-04-02', value: 65.92},
{time: '2019-04-03', value: 65.89},
{time: '2019-04-04', value: 66.64},
{time: '2019-04-05', value: 67.28},
{time: '2019-04-08', value: 67.58},
{time: '2019-04-09', value: 67.29},
{time: '2019-04-10', value: 67.04},
{time: '2019-04-11', value: 65.80},
{time: '2019-04-12', value: 65.70},
{time: '2019-04-15', value: 64.53},
{time: '2019-04-16', value: 64.51},
{time: '2019-04-17', value: 64.01},
{time: '2019-04-18', value: 64.59},
{time: '2019-04-22', value: 65.41},
{time: '2019-04-23', value: 65.25},
{time: '2019-04-24', value: 64.45},
{time: '2019-04-25', value: 64.04},
{time: '2019-04-26', value: 63.59},
{time: '2019-04-29', value: 63.67},
{time: '2019-04-30', value: 63.29},
{time: '2019-05-01', value: 62.94},
{time: '2019-05-02', value: 61.85},
{time: '2019-05-03', value: 62.42},
{time: '2019-05-06', value: 61.93},
{time: '2019-05-07', value: 60.05},
{time: '2019-05-08', value: 60.02},
{time: '2019-05-09', value: 59.34},
{time: '2019-05-10', value: ''},
{time: '2019-05-13', value: '' },
{time: '2019-05-14', value: ''},
{time: '2019-05-15', value: ''},
{time: '2019-05-16', value: ''},
{time: '2019-05-17', value: ''},
{time: '2019-05-20', value: ''},
{time: '2019-05-21', value: ''},
{time: '2019-05-22', value: '' },
{time: '2019-05-23', value: '' },
{time: '2019-05-24', value: '' },
{time: '2019-05-28', value: ''},
];
where from 05-10 till 05-28 no data is available but nonetheless i want to plot the whole time interval.
Like here:
Attempting to open and run all REPL examples on demo page results in the following error:
'Cannot find "/coordinate-space" in [email protected]'
Use pnpm package manager as faster and more isolated npm alternative.
In this task:
I am having a problem where it is returning a null value, this is the data Im using. I dont see why its a problem, I have also tried converting the dateformat.
let temp_data = [
{time: 1661126400000, value: 19510},
{time: 1662336000000, value: 21850},
{time: 1662336000000, value: 18500},
{time: 1662940800000, value: 22794},
{time: 1663545600000, value: 18120},
{time: 1664755200000, value: 20442},
{time: 1665360000000, value: 18156},
{time: 1668988800000, value: 15459},
{time: 1670803200000, value: 18350},
{time: 1667174400000, value: 21466},
{time: 1671408000000, value: 16230},
{time: 1675036800000, value: 24284},
{time: 1675641600000, value: 21451},
{time: 1676246400000, value: 25262},
{time: 1676246400000, value: 21325}
]
<Chart
{...options}
>
<LineSeries
data={temp_data}
priceScaleId="right"
color="rgba(4, 111, 232, 1)"
lineWidth={2}
/>
</Chart>
Under SvelteKit, with 'lightweight-charts' excluded from SSR, like below:
const config = {
kit: {
adapter: adapter(),
vite: {
ssr: {
noExternal: ['lightweight-charts']
}
}
}
};
using:
<Chart height={280} width={220} {...theme.chart} ref={(ref) => (chartApi = ref)}>
<AreaSeries
{data}
topColor="rgba(102, 102, 102, 0.56)"
bottomColor="rgba(102, 102, 102, 0.04)"
lineColor="rgba(171, 71, 188, 1)"
lineWidth={2}
/>
</Chart>
has no effects, i.e. custom colors are not applied.
Component props are not reactive, passing reactive data to the Chart component's options and data to the CandlestickSeries data.
I get reactivity using the API directly, for data apply setData, and for options applyOptions, the watermark property could not also be made reactive to change the watermark
The logic is such that I get data via API and use select to change the data in the series component (props Chart, data CandlestickSeries, props CandlestickSeries)
Make the package compatible with ESM to support modern bundlers.
In this task:
exports
section and type: "module"
to package.json
fileHi I want to share the x-axis with multiple panels where the y-axis can be different.
Here is a simple example of what i mean: https://jsfiddle.net/h0wXD/g75Lmady/
Is there a way to do this in svelte? If yes can you provide a simple example to me.
Hi,
Is it possible add feature to support UNIX timestamp?
I would much appreciated it!
Hi,
I have this issue that the price of the first LineSeries is not shown when i go over with the mouse but for the second LineSeries it works.
Here is an example code to reproduce my problem:
<Chart {...options} width={width} height={height} container={{ref}} on:crosshairMove={handleCrosshairMove} >
<LineSeries data={data1}
color="#d4d9d9"
lineWidth={1.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
/>
<LineSeries data={data2}
color="#A09D00"
lineWidth={1.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
/>
</Chart>
<script>
import {TimeScale, Chart, LineSeries} from 'svelte-lightweight-charts';
import { onMount } from "svelte";
let chart;
let width = 500;
let height =500;
let observer;
let ref;
ref = (element) => {
if (observer) {
observer.disconnect();
}
if (!element) {
return;
}
observer = new ResizeObserver(([entry]) => {
width = entry.contentRect.width;
height = entry.contentRect.height;
});
observer.observe(element);
}
let lineLegend = null;
let displayLegend;
function handleSeriesReference(ref) {
try {
lineLegend = ref;
}
catch (error)
{
//
}
};
function handleCrosshairMove({detail: param}) {
if (param.time)
{
try {
const price = param.seriesPrices.get(lineLegend);
console.log(price)
const dateObj = param.time;
const date = new Date(dateObj.year, dateObj.month - 1, dateObj.day);
const formattedDate = date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' }).replace(/\//g, '.');
//console.log(formattedDate)
displayLegend = {"close": price.toFixed(2), 'date': formattedDate};
}
catch(error)
{
//pass;
}
}
};
let displayData = '3M';
const options = {
layout: {
backgroundColor: '#1A1A27',
textColor: '#FFFFFF',
},
grid: {
vertLines: {
color: '#1A1A27',
visible: false,
},
horzLines: {
color: '#1A1A27',
visible: false,
},
},
crosshair: {
// hide the horizontal crosshair line
horzLine: {
visible: false,
labelVisible: false,
},
// hide the vertical crosshair label
vertLine: {
labelVisible: false,
style: 0,
},
},
rightPriceScale: {
visible: false,
borderColor: 'rgba(197, 203, 206, 0.8)',
},
timeScale: {
borderColor: '#FFFFFF',
textColor: '#FFFFFF',
visible: false,
},
};
const data1 = [
{time: '2018-10-19', value: 75.46},
{time: '2018-10-22', value: 76.69},
{time: '2018-10-23', value: 73.82},
{time: '2018-10-24', value: 71.50},
{time: '2018-10-25', value: 72.74},
{time: '2018-10-26', value: 72.06},
{time: '2018-10-29', value: 70.56},
{time: '2018-10-30', value: 73.47},
{time: '2018-10-31', value: 72.64},
{time: '2018-11-01', value: 74.28},
{time: '2018-11-02', value: 72.86},
{time: '2018-11-05', value: 74.59},
{time: '2018-11-06', value: 75.48},
{time: '2018-11-07', value: 76.82},
{time: '2018-11-08', value: 75.57},
{time: '2018-11-09', value: 74.25},
{time: '2018-11-12', value: 74.42},
{time: '2018-11-13', value: 72.43},
{time: '2018-11-14', value: 72.51},
{time: '2018-11-15', value: 73.06},
{time: '2018-11-16', value: 73.40},
{time: '2018-11-19', value: 71.23},
{time: '2018-11-20', value: 68.18},
{time: '2018-11-21', value: 69.49},
{time: '2018-11-23', value: 67.31},
{time: '2018-11-26', value: 68.43},
{time: '2018-11-27', value: 68.09},
{time: '2018-11-28', value: 69.30},
{time: '2018-11-29', value: 69.91},
{time: '2018-11-30', value: 69.50},
{time: '2018-12-03', value: 72.42},
{time: '2018-12-04', value: 70.78},
{time: '2018-12-06', value: 69.01},
{time: '2018-12-07', value: 68.57},
{time: '2018-12-10', value: 67.67},
{time: '2018-12-11', value: 68.01},
{time: '2018-12-12', value: 68.79},
{time: '2018-12-13', value: 69.75},
{time: '2018-12-14', value: 68.20},
{time: '2018-12-17', value: 67.02},
{time: '2018-12-18', value: 64.75},
{time: '2018-12-19', value: 63.09},
{time: '2018-12-20', value: 62.19},
{time: '2018-12-21', value: 61.42},
{time: '2018-12-24', value: 60.07},
{time: '2018-12-26', value: 62.54},
{time: '2018-12-27', value: 61.67},
{time: '2018-12-28', value: 60.98},
{time: '2018-12-31', value: 61.55},
{time: '2019-01-02', value: 60.91},
{time: '2019-01-03', value: 61.15},
{time: '2019-01-04', value: 62.81},
{time: '2019-01-07', value: 62.55},
{time: '2019-01-08', value: 63.89},
{time: '2019-01-09', value: 65.45},
{time: '2019-01-10', value: 64.86},
{time: '2019-01-11', value: 63.47},
{time: '2019-01-14', value: 62.45},
{time: '2019-01-15', value: 63.45},
{time: '2019-01-16', value: 63.73},
{time: '2019-01-17', value: 63.96},
{time: '2019-01-18', value: 64.93},
{time: '2019-01-22', value: 61.83},
{time: '2019-01-23', value: 61.94},
{time: '2019-01-24', value: 63.22},
{time: '2019-01-25', value: 64.07}
];
const data2= [{time: '2019-01-28', value: 63.20},
{time: '2019-01-29', value: 63.57},
{time: '2019-01-30', value: 64.28},
{time: '2019-01-31', value: 64.27},
{time: '2019-02-01', value: 64.63},
{time: '2019-02-04', value: 64.37},
{time: '2019-02-05', value: 64.57},
{time: '2019-02-06', value: 63.70},
{time: '2019-02-07', value: 63.41},
{time: '2019-02-08', value: 63.37},
{time: '2019-02-11', value: 62.32},
{time: '2019-02-12', value: 62.89},
{time: '2019-02-13', value: 63.72},
{time: '2019-02-14', value: 63.89},
{time: '2019-02-15', value: 64.48},
{time: '2019-02-19', value: 66.38},
{time: '2019-02-20', value: 67.38},
{time: '2019-02-21', value: 66.48},
{time: '2019-02-22', value: 67.54},
{time: '2019-02-25', value: 66.80},
{time: '2019-02-26', value: 67.26},
{time: '2019-02-27', value: 67.25},
{time: '2019-02-28', value: 65.86},
{time: '2019-03-01', value: 65.92},
{time: '2019-03-04', value: 66.04},
{time: '2019-03-05', value: 66.36},
{time: '2019-03-06', value: 65.68},
{time: '2019-03-07', value: 64.41},
{time: '2019-03-08', value: 63.72},
{time: '2019-03-11', value: 64.85},
{time: '2019-03-12', value: 64.96},
{time: '2019-03-13', value: 65.25},
{time: '2019-03-14', value: 64.90},
{time: '2019-03-15', value: 65.12},
{time: '2019-03-18', value: 66.70},
{time: '2019-03-19', value: 67.71},
{time: '2019-03-20', value: 68.60},
{time: '2019-03-21', value: 68.41},
{time: '2019-03-22', value: 66.03},
{time: '2019-03-25', value: 65.06},
{time: '2019-03-26', value: 65.31},
{time: '2019-03-27', value: 64.93},
{time: '2019-03-28', value: 65.49},
{time: '2019-03-29', value: 65.43},
{time: '2019-04-01', value: 66.66},
{time: '2019-04-02', value: 65.92},
{time: '2019-04-03', value: 65.89},
{time: '2019-04-04', value: 66.64},
{time: '2019-04-05', value: 67.28}
];
</script>
How to catch onDestroy and onMounted event in series component? This is necessary in order to kill a websocket connection or, for example, markers in current series.
Hi,
Congrats for your work !
I'm starting a project to to review trades, so I need to be able to draw line segments (entry -> exit) over a chart at specific points.
TV Lightweight-charts would to be perfect for this, except that it does not offer this feature and the only way is to use their heavy "technical analysis chart" lib for this.
I know it is possible to add buy/sell markers, but i really need line segments over the chart.
I'm currently choosing a charting lib and I'd like to be sure it is possible before setting up the whole project.
Do you think it is possible and not so difficult using Svelte & the dom ?
Thank you
Will the package work on Sveltekit? Or is it better to wait for the 4.0 version of lightweight-charts?
Support plugin system.
<CustomSeries>
component that will use IChartApi::addCustomSeries
api.<ChartEx>
component that will use createChartEx
api.<SeriesPrimitive>
component that will use ISeriesApi::attachPrimitive
api.trackingMode
option and kineticScroll
option on <Chart>
autoSize
option on <Chart>
markers
option for <[Type]Series>
componentsA declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.