Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #3485016
Add padding insidew border to enable final y-axis label
Closed

Comments

  • Phil Cox started the conversation

    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

  •  1,692
    Miloš replied

    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.

    9502859348.png

    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

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •   Phil Cox replied privately
  •  1,692
    Miloš replied

    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

    • 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 APIHighcharts 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.



    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Phil replied

    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.

  •  1,692
    Miloš replied

    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.smile.png


    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

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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