Skip to content

Commit

Permalink
remove attribution logo step from the customisation tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
SlicedSilver committed Jul 26, 2024
1 parent 501d5ad commit ff92798
Show file tree
Hide file tree
Showing 3 changed files with 1 addition and 83 deletions.
29 changes: 1 addition & 28 deletions website/tutorials/customization/assets/step10.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,38 +27,11 @@
/* Add a background color to match the chart */
background-color: #222;
}

/* Styles for attribution message */
.lw-attribution {
position: absolute;
left: 0px;
top: 0px;
z-index: 3; /* place above the charts */
padding: 10px 0px 0px 12px;
font-family: "Roboto", sans-serif;
font-size: 0.8em;
}
.lw-attribution a {
cursor: pointer;
color: rgb(54, 116, 217);
opacity: 0.8;
}
.lw-attribution a:hover {
color: rgb(54, 116, 217);
opacity: 1;
}
</style>
</head>

<body>
<div id="container" style="position: absolute; width: 100%; height: 100%">
<!-- Lightweight Charts Attribution Message and Link -->
<div class="lw-attribution">
<a href="https://tradingview.github.io/lightweight-charts/"
>Powered by Lightweight Charts</a
>
</div>
</div>
<div id="container" style="position: absolute; width: 100%; height: 100%"></div>
<script type="text/javascript">
// Function to generate a sample set of Candlestick datapoints
function generateCandlestickData() {
Expand Down
54 changes: 0 additions & 54 deletions website/tutorials/customization/finishing-touches.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,60 +44,6 @@ chart.applyOptions({
});
```

## Adding an attribution link

We can add an attribution link to the top left corner of the chart to let the world know that your chart is powered by Lightweight Charts™. As thanks for creating this product, we'd be grateful if you add it in a prominent place.

First, we need to add a few css class rules to the `<style>` tag as follows:

```html
<style>
body {
padding: 0;
margin: 0;
/* Add a background color to match the chart */
background-color: #222;
}
/* highlight-start */
/* Styles for attribution message */
.lw-attribution {
position: absolute;
left: 0px;
top: 0px;
z-index: 3; /* place above the charts */
padding: 10px 0px 0px 12px;
font-family: "Roboto", sans-serif;
font-size: 0.8em;
}
.lw-attribution a {
cursor: pointer;
color: rgb(54, 116, 217);
opacity: 0.8;
}
.lw-attribution a:hover {
color: rgb(54, 116, 217);
opacity: 1;
}
/* highlight-end */
</style>
```

and then add the following `<div>` element within the container element used for the chart.

```html
<div id="container" style="position: absolute; width: 100%; height: 100%">
<!-- highlight-start -->
<!-- Lightweight Charts Attribution Message and Link -->
<div class="lw-attribution">
<a href="https://tradingview.github.io/lightweight-charts/"
>Powered by Lightweight Charts™</a
>
</div>
<!-- highlight-end -->
</div>
```

## Result

🎉 Congrats! At this point you should have the final chart which looks like this:
Expand Down
1 change: 0 additions & 1 deletion website/tutorials/customization/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ The following topics will be covered within the tutorial:
- Customising the Crosshair
- Adding a second series
- Customising the appearance of a few data points
- Adding a simple attribution message
- Setting a different font

## Prerequisite knowledge
Expand Down

0 comments on commit ff92798

Please sign in to comment.