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.

Sign up for GitHub

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

Jump to bottom

autoSize doesn't work on Firefox #1601

Open
crazysurajit opened this issue May 18, 2024 · 1 comment
Open

autoSize doesn't work on Firefox #1601

crazysurajit opened this issue May 18, 2024 · 1 comment

Comments

@crazysurajit
Copy link

Lightweight Charts™ Version: 4.1.4

Steps/code to reproduce:

<html>
  <head>
    <script charset="utf-8" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
  </head>
  <body>
    <script>
      var chart = LightweightCharts.createChart(document.body, { autoSize: true });
      var lineSeries = chart.addLineSeries();
      lineSeries.setData([
        { time: '2019-04-11', value: 80.01 },
        { time: '2019-04-12', value: 96.63 },
        { time: '2019-04-13', value: 76.64 },
        { time: '2019-04-14', value: 81.89 },
        { time: '2019-04-15', value: 74.43 },
        { time: '2019-04-16', value: 80.01 },
        { time: '2019-04-17', value: 96.63 },
        { time: '2019-04-18', value: 76.64 },
        { time: '2019-04-19', value: 81.89 },
        { time: '2019-04-20', value: 74.43 },
      ]);
    </script>
  </body>
</html>

Actual behavior:

It doesn't show any chart and doesn't show any error log either in the Firefox Console. Everything is just blank.

It works on Chrome. I've noticed this after switching to Firefox as my primary browser. I'm using the latest Firefox (firefox-126.0-5.fc39.src.rpm)

Expected behavior:

For it to work I have to specify a fixed height (or document.body.clientHeight) together with autoSize, even specifying width along with autoSize doesn't work, it just requires height.

If I initialize the chart as below it works:
var chart = LightweightCharts.createChart(document.body, { autoSize: true, height: 300 });
@SlicedSilver
Copy link
Contributor

It is likely that the default styles defined by the Firefox browser are different for the body element such that it is not filling the screen as you expect.
The autosize option in Lightweight Charts attempts to fill the size of the containing element, which in your example is the body element. So to fix this issue, you can define some css for the body element to be size you expect.

Here is an example: https://glitch.com/edit/#!/moored-daily-haumea

It is good to specify the height and width properties anyway as mentioned here in the docs for autosize:
https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptionsBase#autosize

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@SlicedSilver @crazysurajit