trash-and-fire / svelte-lightweight-charts Goto Github PK

View Code? Open in Web Editor NEW

101.0 5.0 13.0 1.16 MB

Svelte wrapper for financial lightweight charts

License: MIT License

Svelte 69.85% CSS 0.25% TypeScript 25.45% JavaScript 4.45%

canvas charts financial-charts svelte candlestick candlestick-chart stock-chart wrapper-library javascript typescript

svelte-lightweight-charts's People

Contributors

Stargazers

Watchers

Forkers

ti-rudin verata-veritatis evan70 syther-labs szf2020 alenny811 januswork budikxyz roger120981 dc-thanh abhijrathod colerob1776 endenwer

svelte-lightweight-charts's Issues

Time value above the vertical line

I wanted to know if it is possible to add the time x-value above the vertical line (see attachment).

Vertical Price Line

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"?

All REPL examples broken with missing /coordinate-space

Attempting to open and run all REPL examples on demo page results in the following error:

'Cannot find "/coordinate-space" in [email protected]'

Better UX for Mobile Device

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 :)

Lineseries: Uncaught Error: Value is null

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>

Continuous Pulse animation

Hi,

Is it possible to add the functionality that the last value animation is showing continuously the pulse animation?

Fixed time interval

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:

Creating Minicharts

Hi,

I want to create something similar like the picture in your library.
Do you know if it is possible to do so?

Multiples panels

Hi 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.

Web fonts rendering issue

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.

Version: 2.0.0

Iteration plan:

Make package ESM compatible (#46)
Use PNPM as package manager (#47)
Update dependencies (#48)
Update lightweight-chart dependency (#49)
Get rid of unnecessary code (#50)
Make release notes (#51)
Update examples (#52)

Constrain scrolling to future data that does not exist

What should i do when i don't want to see future data that does not exist yet.

Below i have an example

I dont want the user to scroll forward in time when there is no data. Is there a simple way to constrain that?

Update examples

fill between two prices

Is it possible to fill the area between two prices. Here is an example of what i am looking for.

I would appreciate it alot if you can help me out on this

Graph without zooming in

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,
    },
};

Does Lineseries and Candlestick only work with 'yyyy-mm-dd'?

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

Possible nodejs version incompatability?

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.

Update library

Hello, nice package! If you update lightweight-charts to 3.8.0 yourself, will nothing break?

Component props are not reactive

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)

Circular dependency

When npm run dev and hot updates, a warning about "Circular dependency" appears in the log.

Started appearing after the last update of your package.

Move to PNPM

Use pnpm package manager as faster and more isolated npm alternative.

In this task:

Use pnpm
Update github actions to use pnpm
Use corepack

Does not work well in an SSR application

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?

Move to ESM

Make the package compatible with ESM to support modern bundlers.

In this task:

Rewrite each import to have an file exstension
Add exports section and type: "module" to package.json file
Setup linter to ensure files extension in imports

Sveltekit

Will the package work on Sveltekit? Or is it better to wait for the 4.0 version of lightweight-charts?

Draw line segments over the chart ?

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

Is it possible to add priceline dynamically?

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(...)?

Show Price in Legend

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>

SvelteKit - AreaSeries props not honored

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.

Chart dom element container

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.

Update dependencies

Get rid of unnecessary code

remove deprecated exports
remove collection code

Height of histogram series

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 } }

Right price scale when changing the symbol

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 } })

test

Feature Request: Add Tracking Mode for mobile devices

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!

not an issue feature question

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?

Feature Request

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

Not an Issue - feature suggestion

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

Series Markers?

How do you implement Series Markers?

Always show the newest data at first

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?

Update chart

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

Support plugins

Support plugin system.

Implement a <CustomSeries> component that will use IChartApi::addCustomSeries api.
Implement a <ChartEx> component that will use createChartEx api.
Implement a <SeriesPrimitive> component that will use ISeriesApi::attachPrimitive api.

I want to optionally apply rightPriceScale in LineSeries

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!

Plot data with API call

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?

2.1.0

Support trackingMode option and kineticScroll option on <Chart>
Support autoSize option on <Chart>
Reduce layout shift on SSR
Add markers option for <[Type]Series> components
Update README and CHANGELOG

Feature Request: Support Unix Timestamp

Hi,

Is it possible add feature to support UNIX timestamp?