Skip to content

Line chart: Numeric X-axis missing last tick, points misaligned #5015

Open
@lovasoa

Description

@lovasoa

Description

The x-axis in line charts doesn't display all tick values correctly, especially when using numeric values as x values across multiple series. The last x value (5) is missing from the axis, and data points are misaligned with their corresponding tick marks.

I had previously reported a similar issue regarding x-axis tick misalignment in bar charts: #4858

Steps to Reproduce

  1. Create a line chart with multiple series
  2. Use numeric values as x values (1, 2, 4, 5)
  3. Observe the x-axis rendering and data point alignment

Expected Behavior

The x-axis should display all unique x values (1, 2, 4, 5) as tick marks, and data points should align with their corresponding tick marks.

Actual Behavior

The x-axis only shows 1, 2, 3, 4 as ticks, omitting 5. Additionally:

  • The data point for 2 appears before the 2 tick mark
  • The data point for 5 is incorrectly positioned above the 4 tick mark

Screenshots

Screencast.From.2025-04-21.19-20-16.mp4

Reproduction Link

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/pvvygbg?editors=0010

var options = {
  "chart": {
    "type": "line"
  },
  "series": [
    {
      "name": "A",
      "data": [
        {
          "x": 1,
          "y": 1
        },
        {
          "x": 2,
          "y": 2
        }
      ],
    },
    {
      "name": "B",
      "data": [
        {
          "x": 4,
          "y": 4
        },
        {
          "x": 5,
          "y": 5
        }
      ],
    }
  ]
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

Initially reported in sqlpage/SQLPage#883

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions