@Tejasai
You can use a Highchart visual with “dumbbell” type to achieve the same visualization.
For example, say I have a dataset for call center call logs as follows:
| agent-id | start | end |
|---|---|---|
| 1 | 24/01/2025 09:00:30 | 24/01/2025 09:01:40 |
| 1 | 24/01/2025 09:05:00 | 24/01/2025 09:08:00 |
| 1 | 24/01/2025 09:09:00 | 24/01/2025 09:10:00 |
| 2 | 24/01/2025 09:00:10 | 24/01/2025 09:02:50 |
| 2 | 24/01/2025 09:06:25 | 24/01/2025 09:09:00 |
| 2 | 24/01/2025 09:11:00 | 24/01/2025 09:13:00 |
I put the following chart code:
{
"chart": {
"type": "dumbbell",
"inverted": true
},
"legend": {
"enabled": true
},
"xAxis": {
"type": "category",
"title": {
"text": "Agent ID"
}
},
"yAxis": {
"type": "datetime",
"title": {
"text": "Time"
}
},
"series": [
{
"name": "duration",
"type": "dumbbell",
"data": [
"map",
["getColumn",0,1,2],
{
"name":["get",["item"],0],
"low":["get",["item"],1],
"high":["get",["item"],2]
}
],
"lowMarker": {
"enabled": true,
"symbol": "round"
},
"lowColor": "#5ce65c",
"connectorColor": "#5ce65c",
"marker": {
"enabled": true,
"symbol": "round"
},
"color": "#ffb5c0"
}
]
}
And I get the following visual:
Please mark this 
solution if this solves your problem.
Thank You @ytakahr , let me try to implement this and see how it comes.
Can you please share like what are column used in X axis and Y axis
Hi @ytakahr , I tried representing the same data as you shared but I was unable to succeded, can you please explain the values that are coming in the duration.
In duration we need when the call has started and when did it ends
And i want to show the total seconds the call has run (in the middle of the line).Please help me out
Thanks & Regards
Tejasai
Hi @Tejasai, thanks for trying it out. I understand you want to show call start / end / duration in the tooltip. In order to achieve this, you can further perform the following steps.
-
Create a calculated field “duration-in-seconds”
dateDiff(start, end, "SS") -
Place the newly created calculated field to the value field well as follows.
-
Replace the Highcharts chart code with the following update one
{ "chart": { "type": "dumbbell", "inverted": true }, "legend": { "enabled": true }, "xAxis": { "type": "category", "title": { "text": "Agent ID" } }, "yAxis": { "type": "datetime", "title": { "text": "Time" } }, "series": [ { "name": "duration", "type": "dumbbell", "data": [ "map", ["getColumn",0,1,2,3], { "name":["get",["item"],0], "low":["get",["item"],1], "high":["get",["item"],2], "duration":["get",["item"],3] } ], "lowMarker": { "enabled": true, "symbol": "round" }, "lowColor": "#5ce65c", "connectorColor": "#5ce65c", "marker": { "enabled": true, "symbol": "round" }, "color": "#ffb5c0" } ], "tooltip": { "Start: {point.low:%H:%M:%S}<br>End: {point.high:%H:%M:%S}<br>Duration: {point.duration} s", "useHTML": true, "shared": false } }
The following is the resulting visual. (my dataset was updated to include more data points)
However, the tooltip behavior is not so great in that it doesn’t properly capture the mouse position and it can display the information of different data points on the same X-axis (Agent ID as the axes are inverted). Perhaps this might be a current limitation of Highcharts visual in Quick Sight but I suggest you try this out on your own dataset first.
Hi @ytakahr ,Thanks for in detail explanation. Let me try in my dataset and see how it comes.
Hi @ytakahr , this is how it has came from my end. I’m having just one question finally, can we change the X axis label points (like making 5 mins difference to 2 or 1 min).
Thanks & Regards,
Tejasai
@Tejasai You can add tickInterval parameter to the yAxis block.
"yAxis": {
"type": "datetime",
"title": {
"text": "Time"
},
"tickInterval": 60000
},
Note that the tickInterval on datetime axis is based on milliseconds, so one minute interval should be 60000. Also, the actual interval drawn on the chart is subject to the density, so the Highcharts might not display the ticks as granular as specified in the chart code. In my example for instance, it displays only down to two minute interval at maximum due to the high density.
@ytakahr , thank you very much for your help.
Hi @ytakahr , the visual which dumbell chart which I had creating is working correctly for CST, but for IST it is showing 1hr extra.
Here the actual call happened was at 3.20PM IST. But the high visual chart is showing 4.20PM IST. It is showing correctly for CST.
Can you please help me to solve this.
Hi @Tejasai. You can add time block in the chart code to adjust the time zone. The following is the example of IST (Asia/Calcutta) time zone which is 5:30 ahead of UTC.
"time": {
"timezone": "Asia/Calcutta"
},
Actually we can not define the timezone because it should be dynamic. Clients are from different locations, so location should be dynamic based on local time. Example : America(CST), India (IST).
I’m sorry, but I don’t think it’s possible to make it dynamic unfortunately. The datetime in Highcharts doesn’t pick up the current time zone from the browser as other visuals do at the moment.
@ytakahr Thanks for your support 
Hi @Tejasai, regarding the following point:
I got an advice from my kind co-worker that we can set findNearestPointBy to xy so that the mouse hover picks up the nearest datapoint.
Here is the updated complete chart code:
{
"chart": {
"type": "dumbbell",
"inverted": true
},
"legend": {
"enabled": true
},
"xAxis": {
"type": "category",
"title": {
"text": "Agent ID"
}
},
"yAxis": {
"type": "datetime",
"title": {
"text": "Time"
},
"tickInterval": 60000
},
"time": {
"timezone": "Asia/Tokyo"
},
"series": [
{
"name": "duration",
"type": "dumbbell",
"data": [
"map",
["getColumn",0,1,2,3],
{
"name":["get",["item"],0],
"low":["get",["item"],1],
"high":["get",["item"],2],
"duration":["get",["item"],3]
}
],
"lowMarker": {
"enabled": true,
"symbol": "round"
},
"lowColor": "#5ce65c",
"connectorColor": "#5ce65c",
"marker": {
"enabled": true,
"symbol": "round"
},
"findNearestPointBy": "xy",
"color": "#ffb5c0"
}
],
"tooltip": {
"pointFormat": "Start: {point.low:%H:%M:%S}<br>End: {point.high:%H:%M:%S}<br>Duration: {point.duration} s",
"useHTML": true,
"shared": false
}
}
Reference - findNearestPointBy
Determines whether the series should look for the nearest point in both dimensions or just the x-dimension when hovering the series. Defaults to ‘xy’ for scatter series and ‘x’ for most other series. If the data has duplicate x-values, it is recommended to set this to ‘xy’ to allow hovering over all points.
Applies only to series types using nearest neighbor search (not direct hover) for tooltip.
Defaults to x.