Ability to fill area between line series

[bmatusiak]

Is it possible to have a "Area" with a range to color between 2 points

like this

[bmatusiak]

so after thinking a little harder, there would be 2 more options needed colorHigh & colorLow im guessing API would be similar or integrated into AreaSeries

---

think of the value as

{
value : [2,1]
}

first point is HIGH so colorHigh would be the fill color

---

{
value : [1,2]
}

first point is LOW so colorLow would be the fill color

---

and if value are the same,, there is no area to color between

[bmatusiak]

here is a fiddle for an example case,, https://jsfiddle.net/vfcped0z/27/ the goal for the fiddle is to color inside the triangles using blue as a baseline, the top triangle should be a different color fill then below

[putraxor]

any progress on this?

[timocov]

@putraxor No. If you need this feature, you can try to provide proposal here how it could be implemented from API side (not internally of course) to cover all cases (or almost all). I hope it can be our start point of the discussion.

[s2x]

here is a fiddle for an example case,, https://jsfiddle.net/vfcped0z/27/ the goal for the fiddle is to color inside the triangles using blue as a baseline, the top triangle should be a different color fill then below

I realize that this is not the best solution - but currently I use candles to generate the kumo cloud in my projects. An example below in the link:

https://jsfiddle.net/xwvs1gb4/

[rudin-kr]

Is this only the way to fill between two lines?

[AIOStudio]

how to do it any idea with kotlin?

[arunpresdo]

This would be pretty useful. Any chance this will be implemented soon?

[edew]

We're happy to add something like this but we don't have any immediate plan to implement it.

@putraxor No. If you need this feature, you can try to provide proposal here how it could be implemented from API side (not internally of course) to cover all cases (or almost all). I hope it can be our start point of the discussion.

Likewise if you have any suggestion about how the public API for this could look then please feel free to suggest it.

[ziofat]

A reasonable solution is to change baseline series to support dynamic baseline values.

[UweR70]

Based on https://jsfiddle.net/vfcped0z/27/ I´ve made minimal changes and created https://jsfiddle.net/w49zmrx2/

Notice lines 59 to 68.

Basic idea is to fill the area via drawing vertical lines ...

So it nails down to the question: How to draw vertical lines?

[joshuaochia]

Just moved from chartjs to light lightweight-charts - any progress on this?

[UweR70]

Yeah, I´ve wrote my own Ichimoku indicator - without any help from lightweight-charts :-(

See: https://github.com/tradingview/lightweight-charts/discussions/1369

So my suggestion is to move back to chartjs.

I´ve also stopped my private project ... it makes no sense at all because there are provider which are finally fulfilling my requirements. So what?!

[SlicedSilver]

Thank you for your feature request for Lightweight Charts. In order to keep the library lightweight and maintain a narrow focus, we strive to include only strictly required features in the core library. As a result, we have decided that this requested feature should be implemented as a plugin instead, and will be closing this issue as a result.

We recently introduced the ability to write plugins for Lightweight Charts, allowing users like you to extend the functionality of the library without adding it to the core. We highly recommend implementing your feature request as a plugin to achieve the desired functionality while keeping the core bundle size smaller for all users.

To get started with plugins, please refer to our Plugins Documentation for a better understanding of what is possible and how plugins work. You can also explore our collection of plugin examples (with a preview hosted here) for inspiration and guidance on implementing specific functionality.

For your particular feature request, we suggest taking a look at the following examples: • HLC Area Series: This example demonstrates how to create a new series types which fills the area between two lines. Demo • Bands indicator: This example showcases how to add an indicator to an existing series which plots a filled area between two lines. Demo

To help you get started quickly, we have created an NPM package called create-lwc-plugin, which sets up a plugin project for you. This way, you can hit the ground running with your plugin development.

If you do create a plugin based on your feature request, we would appreciate it if you could publish it on GitHub or NPM and let us know. This way, we can share it with the rest of the community. It would be helpful if you could prefix your NPM package name with lwc-plugin- for easier discoverability by others.

Thank you for your understanding and support. We believe implementing your feature request as a plugin will greatly benefit both you and the Lightweight Charts community.