X-Axis scale different from data labels

[WidleStudioLLP]

Hey @engineering-tajir,

If you want the x-axis to display only the dates (e.g., May 23, May 24) but show a detailed tooltip on hover like:

May 23, 14:00 → Quantity: 5

You can achieve this in two steps:

---

---

Data Transformer (for x-axis values)

Use a transformer to separate the date and hour from your timestamp, so the x-axis only shows the date, while the full timestamp remains available for tooltips.

Here’s a sample transformer code:

return {{ query38.data.map(row => {
  const [date, hour] = row.timestamp.split(', ');
  return {
    date,                            // May 21
    hourLabel: `${date}, ${hour}`,   // May 21, 17:00
    lahore_kam: row.lahore_kam,
    lahore_rhn: row.lahore_rhn
  };
}) }};

This will:
Set date as the x-axis value
Keep hourLabel available for use in the tooltip

Customizing the Tooltip (hover labels)

In your chart settings, go to:
Add-ons → Tooltip

Use a custom template or formatter like:

<b>%{x}</b><br>
<b>%{fullData.name}:</b> %{y}<extra></extra>

This will display:

• The full time (from hourLabel)
• The series name (lahore_kam or lahore_rhn)
• The value (y)

Alternative: Data Labels on the Chart

If you want to display the value directly on the chart instead of in a hover tooltip, go to:
Add-ons → Data Labels

There, you can configure what’s shown on top of each point/bar.

---

---