WPIntell

Source evidence

Unwanted fixed height on chart

Chartify – WordPress Chart Plugin · support · 2025-03-20T15:04:00+00:00

mixedsentiment
mediumseverity
0.85relevance
9replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

4 / 32 rows with source links

12.5% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

28 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
metisdreams resolved
After creating a bar chart, it appears to have a fixed height of 200px at slightly narrower than laptop screens or when first viewing a page but after the browser is opened slightly it adjusts to the height that is assigned in the chart settings. I can replicate this issue whether the chart settings height is 100% height or a fixed pixel height, for example 600px. When I view the source code the svg has a height of 200px. Once the browser is opened a little bit, it will refresh and enlarge to the correct height and proportions. I have tried adding a CSS style that explicitly spells out a taller height but in multiple scenarios and different themes, it does this. Is it possible to not get the chart to not display at this 200 pixel fixed height? Dear @metisdreams , Thank you for your topic. For further investigation of your case, we would like to ask you to provide us with a link, where the given chart is located. Looking forward to hearing from you. Thank you. Dear @metisdreams , We’re closing this ticket for now as we last heard from you 1 week ago. If the query is unresolved, drop us a line and we’ll get back to you at the earliest and the ticket will be re-opened. For a new query, feel free to open a new topic. Our Customer Care Specialists will be happy to help you. Thank you. Hi Jasmine, Please re-open this ticket. Here is a link to an example of a chart in which this issue is occurring: https://secretariat-intl.com/testsite/insights/rebuilding-ukraine-test/ Thank you. Dear @metisdreams , Thank you for your response. Please try to add the ays-load-chart-source class to this tab: View post on imgur.com Please add the class, check the case again, and let us know whether the problem has been fixed or not. Thank you. Hi Jasmine, I added the class to the tab and it did not fix the issue. Thanks, Sherri Dear @metisdreams , Thank you for your reply. Please try adding the same class to the <a> tag, as shown in the example below: View post on imgur.com Please check this and let us know about the outcome. Thank you. Dear Jasmine, The <a> tag is not accessible from the editing interface as it is part of the plugin code. However, in order to test this solution, I created a fully functioning static version, updated the <a> tag and uploaded it to a test server: https://clients.herrmann.com/sec2/ It does not appear to have solved the issue here. Additionally, if it did resolve it, it would require editing the plugin to allow editing of that <a> tag, which would be problematic every time the plugin was updated. That said, what does this class do and is there a way we can target the <a> tag via CSS without actually editing it, meaning add the class to the parent tab (which it is already there) but then target the child <a> tag? Or if the class is controlled via a script, can that be done via a custom script? Thanks again. Dear @metisdreams , Thanks for the reply. Please add the below script in the functions.php file as shown in the screenshot below: View post on imgur.com The script: function custom_tab_resize_script() { ?> <script> setTimeout(function () { var tabLinks = document.querySelectorAll('.tab a'); tabLinks.forEach(function (link) { link.addEventListener('click', function () { setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 300); }); }); }, 500); </script> <?php } add_action('wp_footer', 'custom_tab_resize_script'); Please clear the caches and try again with different browsers and with an Incognito mode. Let us know how it goes for you. Thank you. Dear @metisdreams , We’re closing this ticket for now as we last heard from you 2 weeks ago. If the query is unresolved, drop us a line and we’ll get back to you at the earliest and the ticket will be re-opened. For a new query, feel free to open a new topic. Our Customer Care Specialists will be happy to help you. Thank you.

Comments

9 shown
Jasmine 2025-03-21T06:48:00+00:00

Dear @metisdreams , Thank you for your topic. For further investigation of your case, we would like to ask you to provide us with a link, where the given chart is located. Looking forward to hearing from you. Thank you.

Jasmine 2025-03-31T06:02:00+00:00

Dear @metisdreams , We’re closing this ticket for now as we last heard from you 1 week ago. If the query is unresolved, drop us a line and we’ll get back to you at the earliest and the ticket will be re-opened. For a new query, feel free to open a new topic. Our Customer Care Specialists will be happy to help you. Thank you.

metisdreams 2025-04-04T12:14:00+00:00

Hi Jasmine, Please re-open this ticket. Here is a link to an example of a chart in which this issue is occurring: https://secretariat-intl.com/testsite/insights/rebuilding-ukraine-test/ Thank you.

Jasmine 2025-04-04T13:50:00+00:00

Dear @metisdreams , Thank you for your response. Please try to add the ays-load-chart-source class to this tab: View post on imgur.com Please add the class, check the case again, and let us know whether the problem has been fixed or not. Thank you.

metisdreams 2025-04-11T18:01:00+00:00

Hi Jasmine, I added the class to the tab and it did not fix the issue. Thanks, Sherri

Jasmine 2025-04-14T11:46:00+00:00

Dear @metisdreams , Thank you for your reply. Please try adding the same class to the <a> tag, as shown in the example below: View post on imgur.com Please check this and let us know about the outcome. Thank you.

metisdreams 2025-04-16T13:33:00+00:00

Dear Jasmine, The <a> tag is not accessible from the editing interface as it is part of the plugin code. However, in order to test this solution, I created a fully functioning static version, updated the <a> tag and uploaded it to a test server: https://clients.herrmann.com/sec2/ It does not appear to have solved the issue here. Additionally, if it did resolve it, it would require editing the plugin to allow editing of that <a> tag, which would be problematic every time the plugin was updated. That said, what does this class do and is there a way we can target the <a> tag via CSS without actually editing it, meaning add the class to the parent tab (which it is already there) but then target the child <a> tag? Or if the class is controlled via a script, can that be done via a custom script? Thanks again.

Jasmine 2025-04-16T14:47:00+00:00

Dear @metisdreams , Thanks for the reply. Please add the below script in the functions.php file as shown in the screenshot below: View post on imgur.com The script: function custom_tab_resize_script() { ?> <script> setTimeout(function () { var tabLinks = document.querySelectorAll('.tab a'); tabLinks.forEach(function (link) { link.addEventListener('click', function () { setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 300); }); }); }, 500); </script> <?php } add_action('wp_footer', 'custom_tab_resize_script'); Please clear the caches and try again with different browsers and with an Incognito mode. Let us know how it goes for you. Thank you.

Jasmine 2025-05-05T06:07:00+00:00

Dear @metisdreams , We’re closing this ticket for now as we last heard from you 2 weeks ago. If the query is unresolved, drop us a line and we’ll get back to you at the earliest and the ticket will be re-opened. For a new query, feel free to open a new topic. Our Customer Care Specialists will be happy to help you. Thank you.