Multiple background colors

[RaenonX]

Is your feature request related to a problem? Please describe.

Futures trading hours are long, and can be separated into a few sections. Having such ability helps distinguishing the sessions.

Describe the solution you'd like

Similar way as we add things like addCandlestickSeries or createPriceLine.

Additional context

With multiple background colors.

WithOUT multiple background colors.

Yellow indicating pre-market hours/Europe trading hours;

Blue indicating post-market hours;

Transparent indicating regular trading hours.

Comparing the images, the upper one clearly helps the viewer to identify the current trading session.

[RaenonX]

Sorry for pinging you out of nowhere @kirchet, is this something similar as #1101?

[kirchet]

Hm, not sure. I think it would be better to create a new type of series like BackgroundSeries. Because in this case we can change the type of the first series without changing the background.

In any case we can disscuss it.

[Javid-Izadfar]

Any updates guys?

[VilleKokkarinen]

i'd also love to be able to set multiple background colors vertically. or have a gradient work as in css styles where i can set it to start and end at certain percentages.

for example if i want to highlight an area from 30-70 on a chart scale of 0-100. but have another bg color for 0-30 and 70-30;

[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 (see above links):

• Session Highlighting
• Shaded Background Series

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.