Apexcharts Timeline in Dashboard - Annotations and Url links

John commented on Mar 2

I can't find a way to add annotations and url links to my timeline tasks. I searched apexcharts documentation but i couldn't find something. Can you help?

John commented on Mar 2

I tried this for annotations >> https://www.koolreport.com/examples/reports/apexcharts/line/annotations/ but it seems it can not be applied to timeline...

Sebastian Morales commented on Mar 4

You are right. Right now annotations option doesn't work when chart type is Timeline. There's no information when ApexCharts js will support this so the roadmap for Timeline annotations is unclear.

I think there might be an alternative solution that is using patterned bar chart with annotations:

https://www.koolreport.com/examples/reports/apexcharts/bar/patterned/

You can use transparent/white patterns for some ranges to make the bars look like timeline. It's not perfect but could substitute timeline in some cases.

John commented on Mar 6

I found this >>

https://codepen.io/jenniarg21/pen/abyqwMN

It shows that annotations are working on apexcharts timeline somehow.. They added an indication for a day (today) which is exactly what i want to do. What do you think?

Sebastian Morales commented on Mar 7

The example you mentioned is very interesting. We will test it to see if we could reproduce its use of annotations for ApexCharts' TimeLineChart.

Sebastian Morales commented on Mar 7

You could probably add an annotation to a TimeLineChart with datetime xaxis like this:

            "options" => [
                "annotations" => [
                    "xaxis" => [[
                        "x" => strtotime('2019-03-05') * 1000, // use unix time * 1000 here instead of a datetime string

Let us know how this works for your case.

John commented on Mar 7

Wow it works! I had tried almost the same, but my mistake was that i used just a number instead of strtotime function.

Now i tried this, just perfect:

           'annotations' => [
                'xaxis' => [
                    [
                        'x' => strtotime('2024-03-07') * 1000,
                        'strokeDashArray' => 1,
                        'borderColor' => '#775DD0',
                        'label' => [
                            'borderColor' => '#775DD0',
                            'style' => [
                                'color' => '#fff',
                                'background' => '#775DD0'
                            ],
                            'text' => 'TODAY'
                        ]
                    ], ]],

Now i have to find how to add url links..

KoolReport's Forum

Apexcharts Timeline in Dashboard - Annotations and Url links #3257

Build Your Excellent Data Report