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

fix: graph rendering too wide when heading title is too long #812

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

brokeh
Copy link

@brokeh brokeh commented Nov 10, 2024

The graph would previously render at the max width of either the card or the header, which if the header was too wide for the display would mean part of the graph would render outside of the card.

For me, I use small apex charts inside of Grid Cards and while the title of some of my charts easily fit in the charts on larger screens like computers and tables, on mobile phones the title is wider than the card and so part of the graph is rending outside of the card and is hidden even with only 1 or 2 words in the title.

Here is an example dashboard showing the problem. The only difference between the 2 charts is the length of the title.

views:
  - title: Apex Testing
    cards: null
    type: sections
    max_columns: 2
    sections:
      - type: grid
        cards:
          - type: custom:apexcharts-card
            header:
              show: true
              title: >-
                A super duper extra really long title to make the title too long
                for the card
            yaxis:
              - max: 144
            series:
              - entity: sensor.sun_next_dawn
                data_generator: |
                  const now = new Date();
                  const data = [];
                  for(let i = 0; i <= 24; i++) {
                    data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor(((i-12) * (i-12)))])
                  }
                  return data.reverse();
      - type: grid
        cards:
          - type: custom:apexcharts-card
            header:
              show: true
              title: A shorter title that fits in the card
            yaxis:
              - max: 144
            series:
              - entity: sensor.sun_next_dawn
                data_generator: |
                  const now = new Date();
                  const data = [];
                  for(let i = 0; i <= 24; i++) {
                    data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor(((i-12) * (i-12)))])
                  }
                  return data.reverse();

Before this change, it looks like this. Notice the parabola on the left is missing part of the right-hand side
image

And after this change, it displays the whole chart
image

The graph would previously render at the max width of either the card or the header, which if the header was too wide for the display would mean part of the graph would render outside of the card
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

Successfully merging this pull request may close these issues.

1 participant