Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to add HTML to the top left of charts? #13

Open
wozhendeai opened this issue Aug 26, 2023 · 3 comments
Open

Is it possible to add HTML to the top left of charts? #13

wozhendeai opened this issue Aug 26, 2023 · 3 comments

Comments

@wozhendeai
Copy link

wozhendeai commented Aug 26, 2023

For example, see here:
https://tradingview.github.io/lightweight-charts/tutorials/customization/finishing-touches
image

@trash-and-fire
Copy link
Owner

Yes. You can start with "legend" or "moving everage" examples on the demo page

@trash-and-fire
Copy link
Owner

Oh I should update the examples in the code-sandbox to match version 4.0.0 =(

@trash-and-fire
Copy link
Owner

So the idea is to wrap the chart component in a relative div and place whatever you want on the chart using absolute position.

            <div className={styles.container}>
                <Chart height={300} width={600}>
                    <AreaSeries data={data}/>
                </Chart>
                <div className={styles.legend}>{legend}</div>
            </div>
.container {
   position: relative;
}

.legend {
   position: absolute;
   left: 12px;
   top: 12px;
   z-index: 1;
   font-size: 12px;
   line-height: 18px;
   font-weight: 300;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants