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 Support help center). 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 certain level of programming skills and included support refers only to advice.
Google Charts experience the worst behavior when it comes to padding and margins. Other engines do allow some CSS tweaks, but Google Charts offer very little.
Unfortunately, until we include more options (when our developers create them) the only way to reduce this is with custom code or wpDataChart callbacks.
Highcharts SVG charts do not stay inside of their respective divs when the browser window is made smaller.
Is there any way to fix this so they can work properly across various responsive resolutions?
See attached gif that should illustrate what I mean.
https://share.getcloudapp.com/jkueyjDe if the gif does not load.
Hello mahmood
Thank you for your purchase.
Unfortunately, this is related to the free chart library we're using. They don't like changing the container's size, so they are not very responsive.
Changing this behavior would have to be done with wpDataCharts callbacks.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
I'm not understanding why this behavior occurs for all 3 charting libraries. Chart.js and Google Charts are free, but still have the same problem.
Hi again mahmood
Google Charts experience the worst behavior when it comes to padding and margins. Other engines do allow some CSS tweaks, but Google Charts offer very little.
Unfortunately, until we include more options (when our developers create them) the only way to reduce this is with custom code or wpDataChart callbacks.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables