Apexcharts Timeline in Dashboard - Color and duration

John commented on Feb 29, 2024

I have 2 things in Timeline apexchart (in Dashboard) that i can't find how to configure:

Change font color in bar text (pls see image below, i want to turn 'Code: 2 days' to black)
Most tasks (75%) have duration 1 day (e.g. start 01/03 & end 01/03, i mean the same day), but i can't find how to view these on timeline.

I think your examples are wrong as far as it concerns the duration. E.g. on image below, when a task starts 02/03 and ends 04/03, its duration is 3 days and not 2 (02, 03 and 04/03 = 3 days).

Can you help?

John commented on Feb 29, 2024

I found how to set color in bar text.

It's 'style | colors' => ['#000'] (for dataLabels)

So only the one day duration remains...

John commented on Feb 29, 2024

I managed to fix the duration text by adding >> var upddiff = diff + 1 in 'formatter' => "function(val, opts). So now the only thing is how to view the bar of one day duration tasks.

Sebastian Morales commented on Mar 1, 2024

To display one day duration in timeline you have 2 options:

Add one more day to the end time:

                "Coding",
                "2019/3/7",
                "2019/3/8", //add 1 day to the end time

Add the hour, minute, and second part to the end time:

                "Coding",
                '2019-03-07T00:00:00',
                '2019-03-07T23:59:59',

If there's any issue let us know.

John commented on Mar 1, 2024

Thanks, i tried these. One day duration tasks are appeared in chart area, but all task dates changed by one day which is not good (as i want them to be accurate).

Sebastian Morales commented on Mar 4, 2024

I guess datetime format in javascipt is a bit complicated. When adding time next to date, you might want to append timezone as well to the formatted value like this to address the displayed date issue:

                "Coding",
                '2019-03-07T00:00:00+00:00', // UTC time, change +00 to your timezone if you want
                '2019-03-07T23:59:59+00:00',

KoolReport's Forum

Apexcharts Timeline in Dashboard - Color and duration #3255

Build Your Excellent Data Report