Multiples panels about svelte-lightweight-charts HOT 8 CLOSED

Try the <details> tag or conditional rendering.

from svelte-lightweight-charts.

Your fiddle uses an unofficial fork of lightweight-charts with the moveCrosshair extension method. You can provide it to svelte-lightweight-charts via a bundler alias or a package manager alias.

I can only give an example of charts with synchronized scroll.

from svelte-lightweight-charts.

Yes it is possible.

<div id="chart" on:mousemove={handleChartContainerMouseMove}>
    <Chart on:crosshairMove={handleChartCrosshairMove} ref={(ref) => chart = ref}>
        <BarSeries/>
        <TimeScale on:visibleLogicalRangeChange={syncWithAxis}/>
    </Chart>
</div>
<div id="axis" on:mousemove={handleAxisContainerMouseMove}>
    <Chart on:crosshairMove={handleAxisCrosshairMove} ref={(ref) => axis = ref}>
        <LineSeries/>
        <TimeScale on:visibleLogicalRangeChange={syncWithChart}/>
    </Chart>
</div>

from svelte-lightweight-charts.

Example of event handler:

<TimeScale on:visibleLogicalRangeChange={(e) => axis.timeScale().setVisibleLogicalRange(e.detail)}/>

from svelte-lightweight-charts.

Your request is quite interesting, I will add the full implementation to the gallery of examples a bit later.

from svelte-lightweight-charts.

thanks for the solution. Please keep up the updates. The repo is really good.

Another question. Is it possible to close one of the multiple panes. For example the first graph is the main graph that shows the stock movement. Below is the second graph that is a indicator of that stock. I want to close the second graph with a button. How should i do this in svelte-lightweight-charts?

from svelte-lightweight-charts.

Yes it is possible.

<div id="chart" on:mousemove={handleChartContainerMouseMove}>
    <Chart on:crosshairMove={handleChartCrosshairMove} ref={(ref) => chart = ref}>
        <BarSeries/>
        <TimeScale on:visibleLogicalRangeChange={syncWithAxis}/>
    </Chart>
</div>
<div id="axis" on:mousemove={handleAxisContainerMouseMove}>
    <Chart on:crosshairMove={handleAxisCrosshairMove} ref={(ref) => axis = ref}>
        <LineSeries/>
        <TimeScale on:visibleLogicalRangeChange={syncWithChart}/>
    </Chart>
</div>

Can you provide a full simple example of how to use it. Since i dont know how syncwithCart, handleAxisCrosshairMove etc are defined

from svelte-lightweight-charts.

Just for the record. If you have more than two graphs (e.g. Chart, RSI and MACD) and you want them sync then you have to modify the above code in the following way:

`
let axisRSI;
let axisMACD;
let chart;

const handleChartLogicalRangeChange = (e) => {
    const range = e.detail;
    try
    { 
    axisRSI.timeScale().setVisibleLogicalRange(range);
    }
    catch(error) {
      //pass;
    }

    try
    { 
    axisMACD.timeScale().setVisibleLogicalRange(range);
    }
    catch(error) {
      //pass;
    }
}

const handleAxisLogicalRangeChange = (e) => {
    const range = e.detail;
    chart.timeScale().setVisibleLogicalRange(range)
}`

from svelte-lightweight-charts.