search

trash-and-fire / svelte-lightweight-charts

Svelte wrapper for financial lightweight charts
MIT License
108 stars 15 forks source link

Show Price in Legend #65

Closed MuslemRahimi closed 1 year ago

MuslemRahimi commented 1 year ago

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>
trash-and-fire commented 1 year ago 
const price = param.seriesPrices.get(lineLegend);

seriesPrices was removed in lightweight-charts@4.0.0 and svelte-lightweight-charts@2.0.0

You should use seriesData in the new version. Look at the demo: https://svelte.dev/repl/1b431bf3d75948769855d14c55bbc5f7

What version of svelte-lightweight-charts are you using?

trash-and-fire commented 1 year ago

Also you need to store series referencies in different variables.

<LineSeries data={data1}
    color="#d4d9d9"
    lineWidth={1.5}
    priceScaleId="right"
    crosshairMarkerVisible={false}
    priceLineVisible= {false}

    ref={(ref) => series1 = ref}
/>

<LineSeries data={data2}
    color="#A09D00"
    lineWidth={1.5}
    priceScaleId="right"
    crosshairMarkerVisible={false}
    priceLineVisible= {false}

    ref={(ref) => series2 = ref}
/>

Then you will be able to get prices for each series using:

    const { value: price1 } = param.seriesData.get(series1);
    const { value: price2 } = param.seriesData.get(series2);

Or If you are using older version:

    const price1 = param.seriesPrices.get(series1);
    const price2 = param.seriesPrices.get(series2);
MuslemRahimi commented 1 year ago

thank you very much. Now I understand it