Large vertical space
-
Hi,
There is a large vertical space before the graph showing the table’s data. How can I reduce this space?
Thanks for your help.
The page I need help with: [log in to see the link]
-
Hello,
Firstly, I sincerely apologize for the delayed response, and thank you for your patience.
Regarding the vertical space above your chart: this is not an issue caused by our plugin, but rather the default layout behavior of the Google Charts engine itself. Specifically, the chart container (
div) reserves a fixed height, which includes space for the chart’s title — even if the title is removed.We tested this on a simple demo page by placing a Google Pie Chart directly beneath a text/image block. As we will show in our following screenshots , the chart container reserves 400px of vertical space by default. When the chart title is present, it uses some of that space. When the title is hidden, the overall height remains the same — meaning the space once used by the title remains visually empty, but still reserved in the DOM.
This is standard behavior for Google Charts.
Now, if we make a simple Google Pie Chart, we reproduce the same default behaviour/style, which is how the Google Chart engine works.
In our example, we first check how it renders when we enable the chart Title (screenshot) :And, now, we will remove/hide the Chart Title from the Chart Wizard options – but it is still ‘reserving’ that vertical space as it was before :
You could try using Chart.js instead of Google Charts, to see if it has a more compact default layout for your use case.
If you’re open to trying our premium Plugin version, it offers additional engines like Highcharts and ApexCharts, which may provide different default styling that better suits your layout needs.
If you have any question about premium features, you can ask our main support – the chat box is in the bottom right corner of our main website(https://wpdatatables.com/).At this time, we don’t offer a built-in setting in the plugin UI to control that space via CSS, but there is a possibility to achieve this through chart callbacks. More details on that in the following text:
Every chart engine has its own layout and settings.We use free libraries for chart engines, and they are limited as to what we can change from within the plugin’s UI. If the options you need are not in the chart creation wizard, you can try to find a custom solution using chart callbacks.
Please note, that using wpDataChart callbacks requires a certain level of programming skills and our included support refers only to advice.
You can check our documentation about wpDataCharts callbacks. We also added a new Documentation called “wpDataTables Developer’s Handbook“, where our devs will keep adding more examples over time.
And, you can check our Video examples on some chart callbacks on our YouTube channel. We will keep adding more examples there, as well.
Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. wpDataChart callbacks allow adding options that are available in Google Charts API, Highcharts API, and Chart.js API.
All necessary resources are available in charts engines API (depends on which one you use). Every engine has a different approach to chart settings. In wpDataChart callbacks, you have to adopt those settings to the wpDataChart object (you can take a look at examples for each engine in our documentation, and also in the Support help center). A huge number of examples for any area of programming can be found on stackoverflow.com (typing your problem in google and at the end add “site: stackoverflow.com” and Google will search only that website). Also, a lot of examples of charts, chart settings, and customization can be found on jsffidle.net (typing in google for example “line chart highcharts jsffidle”)
Please note that using hooks or wpDataTable and wpDataChart callbacks requires a certain level of programming skills and included support refers only to advice.
I hope that helps.
The topic ‘Large vertical space’ is closed to new replies.
