Sorry, that heading should read "Add padding inside border to enable final x-axis label".
Hi, using chart.js. Line graph hides last x-axis label as there is insufficient space. How do I resolve? Is the solution to add some padding inside the border? How can I do this?
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
This is the default behaviour of the Chart.JS engine and how their Chart library behaves.
For our Charts, we use the free libraries and there is little 'fine tuning' we can do for a specific issue like this.
I can see you have placed the Chart next to this element on the right side Text on the page, so as you said, it seems the main issue is that the Chart does not have enough 'horizontal room' to properly show everything.
Did you try to check what happens if you just place this Chart on it's own "block" without any other element taking up horizontal space - i presume in that case all the X axis labels fully show?
If that is the case, that is an issue from the Chart.JS itself, sadly,
but we will see if we can devise any workaround perhaps with any Custom CSS or anything like that.
-
Please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue.
We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties.
You can write credentials here just check PRIVATE Reply so nobody can see them except us.
To begin, I want to extend my heartfelt apologies for the delayed reply,
which is due to an unexpectedly high volume of inquiries.
We truly value your patience during this period.
-
Thank you for the Admin Access, we inspected the back end setup as well as your front-end Page with this Chart,
and we tried adding different Custom CSS to the Chart,
but unfortunately , despite best efforts we are not able to find the correct CSS which might make the Chart somehow 'shrink the width' in order to allow showing the entire X axis data without getting it 'cut off'.
That is the issue currently coming from the Chart Engine itself, and we don't have a lot of 'fine tuning' we can do from our Plugin's end, sadly.
So at this point, you can only try to use a Custom Chart Hook to try and change this behaviour.
We will elaborate more about that :
Every chart engine has its own layout and its settings.
We use free libraries for chart engines, and they are limited as to what we can change from within the plugin's UI.
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.
Sorry, that heading should read "Add padding inside border to enable final x-axis label".
Hi, using chart.js. Line graph hides last x-axis label as there is insufficient space. How do I resolve? Is the solution to add some padding inside the border? How can I do this?
Many thanks.
Phil.
Attached files: Trail graph.png
Hi Phil,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
-
This is the default behaviour of the Chart.JS engine and how their Chart library behaves.
For our Charts, we use the free libraries and there is little 'fine tuning' we can do for a specific issue like this.
I can see you have placed the Chart next to this element on the right side Text on the page, so as you said, it seems the main issue is that the Chart does not have enough 'horizontal room' to properly show everything.
Did you try to check what happens if you just place this Chart on it's own "block" without any other element taking up horizontal space - i presume in that case all the X axis labels fully show?
If that is the case, that is an issue from the Chart.JS itself, sadly,
but we will see if we can devise any workaround perhaps with any Custom CSS or anything like that.
-
Please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue.
We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties.
You can write credentials here just check PRIVATE Reply so nobody can see them except us.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
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
Hi Phil,
To begin, I want to extend my heartfelt apologies for the delayed reply,
which is due to an unexpectedly high volume of inquiries.
We truly value your patience during this period.
-
Thank you for the Admin Access, we inspected the back end setup as well as your front-end Page with this Chart,
and we tried adding different Custom CSS to the Chart,
but unfortunately , despite best efforts we are not able to find the correct CSS which might make the Chart somehow 'shrink the width' in order to allow showing the entire X axis data without getting it 'cut off'.
That is the issue currently coming from the Chart Engine itself, and we don't have a lot of 'fine tuning' we can do from our Plugin's end, sadly.
So at this point, you can only try to use a Custom Chart Hook to try and change this behaviour.
We will elaborate more about that :
Every chart engine has its own layout and its settings.
We use free libraries for chart engines, and they are limited as to what we can change from within the plugin's UI.
You can check out all the available chart engines and examples of wpDataCharts documentation here .
If the options you need are not in the chart creation wizard, you can try to find a custom solution using chart callbacks.
You can check our documentation about wpDataCharts callbacks.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
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
Thanks Milos.
It sounds like a fairly complex solution. I'd like to leave it that point and live with the display issue.
Many thanks for investigating.
Phil.
Hi Phil,
No problem, i completely understand that decision,
to be honest, I would do the same in this situation.
Maybe you can try to somehow slightly change the design of the Page, to allow a bit more width for the Chart,
rather than going through all those complex options of customizing/modifying the Chart Engine's default behaviour and look through a callback.
We will certainly pass this to our developers, and going to try to make some kind of an improvement in our future updates,
but we can't say an ETA or exactly what they might modify.
I know they will do their best, as always.
Please don't hesitate to open new tickets if you notice anything else we should take a look at , or to advise.
Thank you.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
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