Y-Axis Repeating on Line Chart

[klautier]

I have a line chart that has dates on the x-axis and amounts on the y-axis (spend per month). When the result set has 0 for all the months, the line chart is displaying 2 x $1 and 2x $-1. As can be seen from the result set below, the data itself looks fine.

Is there a way to stop this behaviour?

[WidleStudioLLP]

Hey @klautier ,

I totally understand your issue — it looks like you’re trying to achieve a specific chart style/multiple values shown in axis that the default Retool chart options can’t fully replicate.

To get more control and customize your visualization exactly how you want, I recommend using a Plotly JSON Chart inside Retool. With Plotly, you can fully customize colors, labels, backgrounds, and more.

Here’s an example based on your dataset and the chart you shared in your image

Chart Transformer Code

const raw = [
  { Invoiced: "2024-08-01", Spend: 0 },
  { Invoiced: "2024-09-01", Spend: 0 },
  { Invoiced: "2024-10-01", Spend: 0 },
  { Invoiced: "2024-11-01", Spend: 0 },
  { Invoiced: "2024-12-01", Spend: 0 },
  { Invoiced: "2025-01-01", Spend: 0 },
  { Invoiced: "2025-02-01", Spend: 0 },
  { Invoiced: "2025-03-01", Spend: 0 },
  { Invoiced: "2025-04-01", Spend: 0 },
  { Invoiced: "2025-05-01", Spend: 0 },
  { Invoiced: "2025-06-01", Spend: 0 },
  { Invoiced: "2025-07-01", Spend: 0 },
  { Invoiced: "2025-08-01", Spend: 0 },
  { Invoiced: "2025-09-01", Spend: 0 },
  { Invoiced: "2025-10-01", Spend: 0 }
];

// Map data
const x = raw.map(d => d.Invoiced);
const y = raw.map(d => d.Spend);

// Define trace
const traces = [
  {
    name: "Spend",
    type: "scatter",
    mode: "lines+markers+text",
    x,
    y,
    line: { color: "#f5a623", width: 3 }, // orange line
    marker: { size: 6, color: "#0047ff" }, // blue dots
    text: y.map(v => `$${v}`), // dollar labels
    textposition: "top center"
  }
];

// Return chart config
return {
  data: traces,
  layout: {
    title: {
      text: "Monthly Invoice Spend",
      font: { size: 18, color: "#111" }
    },
    plot_bgcolor: "#ffffff",
    paper_bgcolor: "#ffffff",
    font: { color: "#111" },
    xaxis: {
      title: "",
      tickangle: -45,
      showgrid: true,
      gridcolor: "#e5e5e5"
    },
    yaxis: {
      title: "",
      showgrid: true,
      gridcolor: "#e5e5e5",
      tickprefix: "$"
    },
    margin: { l: 40, r: 20, t: 50, b: 60 }
  },
  config: { responsive: true }
};

Chart result:

Hope this helps!

[ChiEn]

Hey @klautier, thanks for flagging the issue with duplicate Y axis values on your line chart when all data points are zero. I was able to reproduce this bug as well and it only happens when all data points are zero. It seems to be a regression of a fix we shipped about 11 months ago.

A few follow up questions to help me investigate further:

1. Just to confirm, you are NOT using the Chart (legacy) component, right?
2. From your other post, it looks like you’re on self hosted, version 3.284.0, correct?
3. When did you first notice this issue reappearing? Was it after a recent update or change?
4. Does the issue happen with all datasets, or only when every value is zero?

If it is easy, an app export of a minimal repro also helps me test quickly. Thank you!

[klautier]

In response:

1. No, I am using the standard line chart component
2. Yes
3. I noticed this after upgrading to 3.284.0, but could not say if the issue also existed prior to that.
4. It only occurs when all values are 0

[ChiEn]

Thanks for the clarification, that’s really helpful. It looks like a regression from a fix we shipped about 11 months ago. I’ve added this regression to the existing ticket and will keep you updated. Thanks again for your patience!

[WidleStudioLLP]

Hey @klautier ,

Following up on my previous message — this time I tried using the Line Chart component in Retool instead of the Plotly JSON chart.

I created a simple mock data transformer to match your dataset:

return [
  { Invoiced: "2024-08-01", Spend: 0 },
  { Invoiced: "2024-09-01", Spend: 0 },
  { Invoiced: "2024-10-01", Spend: 0 },
  { Invoiced: "2024-11-01", Spend: 0 },
  { Invoiced: "2024-12-01", Spend: 0 },
  { Invoiced: "2025-01-01", Spend: 0 },
  { Invoiced: "2025-02-01", Spend: 0 },
  { Invoiced: "2025-03-01", Spend: 0 },
  { Invoiced: "2025-04-01", Spend: 0 },
  { Invoiced: "2025-05-01", Spend: 0 },
  { Invoiced: "2025-06-01", Spend: 0 },
  { Invoiced: "2025-07-01", Spend: 0 },
  { Invoiced: "2025-08-01", Spend: 0 },
  { Invoiced: "2025-09-01", Spend: 0 },
  { Invoiced: "2025-10-01", Spend: 0 }
]

After applying a few styling tweaks in the chart settings (axis formatting, gridlines, and color adjustments), the result closely resembles the layout and feel of your original chart.

Here’s a quick preview of how it looks:

This setup gives a clean and simple way to visualize your data directly in Retool without extra configuration.