Hi,

Please take a look at the test site/URL https://aialphalab.com/fund-interest-gammel/. I have inserted line charts using Google and ApexCharts.

I need to be able to edit the dates on the x-axis. It looks rather weird now. Google per standard use the first letter of some months...Apex is just...crowded!

As far as I have been able to read I need to use callbacks. No idea what it is but it involves inserting some code somewhere. 

Can you tell me:

• Where do I insert this code (I use Elementor for building the site)
• What does the callback code look like for Google and ApexCharts? You don't have to write the entire code, but please get me started, then I can fiddle with it myself.

Best,

Morten

Hi Milos,

I got a bit further. I'm using Google Charts and have used the callback function to remove the padding Google adds to the chart as standard (which makes the chart fill out only 50% of the container) and made the tooltip include both graphs.

As I have no coding background I'm pretty satisfied with myself so far :-) You can see the chart here. The code looks like this:

<script type="text/javascript">
jQuery(window).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[4] = function(obj){ 
        obj.options.chartArea = {left:135,top:30,width:'100%',height:'75%'};
        obj.options.focusTarget = ['category'];
    }
});
</script>

But...I have not been able to solve the issue with the horizontal axis. I want to be able to control which dates goes in the horizontal axis. I have been looking in the Google API documentation and found the object I need (hAxis.ticks) but I just can't make it work. No matter what I do, It has zero impact on the dates shown.

This is the code I'm working with now:

<script type="text/javascript">
jQuery(window).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[4] = function(obj){ 
        obj.options.hAxis.ticks = hAxis: {
                                                     ticks: [new Date(2020,1,1), new Date(2021,1,1), new Date(2022,1,1), new Date(2023,1,1)]

    }
});
</script>

Can you help me?

Best,

Morten

Hi again,

Managed to solve the question below. This code works:

<script type="text/javascript">
jQuery(window).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[4] = function(obj){ 
        obj.options.chartArea = {left:135,top:30,width:'100%',height:'75%'};
        obj.options.focusTarget = ['category'];
        obj.options.hAxis.ticks = [{v: new Date(2020, 1, 1), f: '2020'}, {v: new Date(2021, 1, 1), f: '2021'}, {v: new Date(2022, 1, 1), f: '2022'}, {v: new Date(2023, 1, 1), f: '2023'}];
    }
});
</script>

Only thing that remains now is how I get each year to center under each of the vertical gridlines? Right now the year/text starts at the gridline - if it makes sense.

Do you know?

Alright, I will try Stackoverflow. They also helped me with the code below :-)

Let's close this ticket.

Best,

Morten