lightweight-charts
lightweight-charts copied to clipboard
Customizing width of the histogram & candlestick charts
I need adjust width of column, help me!
What do you mean? Can you please provide more details?
+1
The histogram chart can be used for different purposes. For example, displaying user profit per day. Accordingly, the number of columns may require a small amount on the screen 7, 10, etc.
If you use the current chart, there will be a lot of free space on the chart and the graph itself will not be across the width of the screen with a given columns.
Examples/screenshots would be appreciated 🙂 Do you want to change width of the histogram within bar width?
Do you want to change width of the histogram within bar width?
Let bar width be adaptive in the number of bars and width of the parent element. Important for this approach to be able to indent between bars.
Looks like answer is yes 😂 Then we need proposal here. Actually it could be pretty easy to modify it, but the biggest concern here is in which units that width should be? Pixels? Percents? Some strategy? Something else? Should there be min/max restrictions for width? etc etc etc
As sample https://www.chartjs.org/docs/latest/charts/bar.html
As sample chartjs.org/docs/latest/charts/bar.html
Thanks for pointing the example. Looks like we can't modify width there, right? It's hardcoded, but a bit smaller than in lightweight-charts? (I'd say we have only 1px, but there it's percentage, but I'm not sure)
@timocov sure in %, which based on count bars and width of the chart workspace. Pixels not for this task i think.
would it be possible to provide a style option for each histogram stick? This prop can be added into HistogramStyleOptions
as barStyle
and allows you to add standard div props like width
margin
padding
backgroundColor
.
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:
- Stacked Bars Series: This example demonstrates how to create a custom series which renders columns. Demo
- Grouped Bars Series. 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.