KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Apexcharts Timeline in Dashboard - Color and duration #3255

Open John opened this topic on on Feb 29 - 5 comments

John commented on Feb 29

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

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

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

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

  1. Add one more day to the end time:
                "Coding",
                "2019/3/7",
                "2019/3/8", //add 1 day to the end time
  1. 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

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

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',

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

ApexCharts