Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

X-Axis Tick Misalignment in Bar Chart #4858

Closed
lovasoa opened this issue Dec 10, 2024 · 4 comments
Closed

X-Axis Tick Misalignment in Bar Chart #4858

lovasoa opened this issue Dec 10, 2024 · 4 comments
Labels
bug Something isn't working verified

Comments

@lovasoa
Copy link

lovasoa commented Dec 10, 2024 •
edited
Loading

Description

The x-axis ticks in the provided bar chart are misaligned with their respective bar groups. This causes an increasing offset as you progress along the axis.

Steps to Reproduce

  1. Open the chart using this link: https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/yyBJvMq
  2. Examine the x-axis ticks and their alignment with the bar groups.

Expected Behavior

  • Each tick on the x-axis should align with the center of its respective group of bars.
  • The alignment should remain consistent across all ticks.

Actual Behavior

  • While the x-axis starts aligned, the groups of bars are slightly wider than the axis expects.
  • This results in x-axis ticks progressively shifting to the left of their corresponding groups.
  • After 12 ticks, the misalignment becomes so significant that ticks appear under incorrect bar groups.

Refer to the attached chart image for a clearer understanding of the issue.

Impact

This misalignment leads to confusion when interpreting data, as labels appear to correspond to the wrong bar groups.

Screenshots

image

Reproduction Link

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/yyBJvMq

Chart options

{
  "chart": {
    "type": "bar",
    "fontFamily": "inherit",
    "parentHeightOffset": 0,
    "height": "250px",
    "stacked": false,
    "toolbar": {
      "show": false
    },
    "animations": {
      "enabled": false
    },
    "zoom": {
      "enabled": false
    }
  },
  "theme": {
    "palette": "palette4"
  },
  "dataLabels": {
    "enabled": true,
    "dropShadow": {
      "enabled": true,
      "color": "#f6f8fb"
    }
  },
  "fill": {
    "type": "solid"
  },
  "stroke": {
    "width": 1,
    "lineCap": "round",
    "curve": "smooth"
  },
  "xaxis": {
    "tooltip": {
      "enabled": false
    },
    "tickAmount": 11,
    "title": {
      "text": "Heures"
    },
    "labels": {
      "datetimeUTC": false
    },
    "convertedCatToNumeric": false
  },
  "yaxis": [
    {
      "show": true,
      "showAlways": false,
      "showForNullSeries": true,
      "opposite": false,
      "reversed": false,
      "logarithmic": false,
      "logBase": 10,
      "tickAmount": null,
      "stepSize": null,
      "forceNiceScale": false,
      "floating": false,
      "labels": {
        "show": true,
        "showDuplicates": false,
        "minWidth": 0,
        "maxWidth": 160,
        "offsetX": 0,
        "offsetY": 0,
        "rotate": 0,
        "padding": 20,
        "style": {
          "colors": [
            null,
            null,
            null,
            null,
            null,
            null
          ],
          "fontSize": "11px",
          "fontWeight": 400,
          "cssClass": ""
        }
      },
      "axisBorder": {
        "show": false,
        "color": "#e0e0e0",
        "width": 1,
        "offsetX": 0,
        "offsetY": 0
      },
      "axisTicks": {
        "show": false,
        "color": "#e0e0e0",
        "width": 6,
        "offsetX": 0,
        "offsetY": 0
      },
      "title": {
        "text": "Revenue (k€)",
        "rotate": -90,
        "offsetY": 0,
        "offsetX": 0,
        "style": {
          "fontSize": "11px",
          "fontWeight": 900,
          "cssClass": ""
        }
      },
      "tooltip": {
        "enabled": false,
        "offsetX": 0
      },
      "crosshairs": {
        "show": true,
        "position": "front",
        "stroke": {
          "color": "#b6b6b6",
          "width": 1,
          "dashArray": 0
        }
      }
    }
  ],
  "zaxis": {
    "title": {}
  },
  "markers": {
    "size": 5,
    "strokeWidth": 0,
    "hover": {
      "sizeOffset": 5
    }
  },
  "tooltip": {
    "fillSeriesColor": false,
    "y": {}
  },
  "plotOptions": {
    "bar": {
      "horizontal": false,
      "borderRadius": 5
    },
    "bubble": {
      "minBubbleRadius": 5
    }
  },
  "colors": [
    "#4299e1",
    "#d63939",
    "#74b816",
    "#ae3ec9",
    "#f59f00",
    "#667382",
    "#f76707",
    "#d6336c",
    "#0ca678",
    "#4263eb",
    "#17a2b8",
    "#2fb344",
    "#e6eef6",
    "#fef5e6",
    "#fbebf0",
    "#eaf7ec",
    "#fef0e6",
    "#0054a6",
    "#929dab",
    "#bbc3cd",
    "#dadfe5",
    "#eef1f4",
    "#f6f8fb",
    "#fcfdfe",
    "#000000"
  ],
  "series": [
    {
      "name": "last year",
      "data": [
        {
          "x": 10,
          "y": 1.5
        },
        {
          "x": 11,
          "y": 1.7
        },
        {
          "x": 12,
          "y": 2.5
        },
        {
          "x": 13,
          "y": 3.5
        },
        {
          "x": 14,
          "y": 7.5
        },
        {
          "x": 15,
          "y": 1.5
        },
        {
          "x": 16,
          "y": 5.5
        },
        {
          "x": 17,
          "y": 8.5
        },
        {
          "x": 18,
          "y": 2.5
        },
        {
          "x": 19,
          "y": 3.5
        },
        {
          "x": 20,
          "y": 6.5
        },
        {
          "x": 21,
          "y": 3.5
        }
      ],
      "group": "apexcharts-axis-0"
    },
    {
      "name": "this year",
      "data": [
        {
          "x": 10,
          "y": 2
        },
        {
          "x": 11,
          "y": 1.9
        },
        {
          "x": 12,
          "y": 3
        },
        {
          "x": 13,
          "y": 4
        },
        {
          "x": 14,
          "y": 3
        },
        {
          "x": 15,
          "y": 10
        },
        {
          "x": 16,
          "y": 3
        },
        {
          "x": 17,
          "y": 7
        },
        {
          "x": 18,
          "y": 2
        },
        {
          "x": 19,
          "y": 5
        },
        {
          "x": 20,
          "y": 3
        },
        {
          "x": 21,
          "y": 8
        }
      ],
      "group": "apexcharts-axis-0"
    }
  ],
  "annotations": {
    "yaxis": [],
    "xaxis": [],
    "points": []
  }
}

Initially reported in sqlpage/SQLPage#733
@lovasoa lovasoa added the bug Something isn't working label Dec 10, 2024
@lovasoa lovasoa mentioned this issue Dec 10, 2024
Closed
@lovasoa
Copy link
Author

lovasoa commented Dec 10, 2024

Oh, and I had not even noticed, but the tick for hour 15 appears twice on the chart !

@lovasoa
Copy link
Author

lovasoa commented Dec 11, 2024

Thank you for the fix, @junedchhipa ! When do you think you can release this ?

@junedchhipa
Copy link
Contributor

Probably next week

@lovasoa
Copy link
Author

lovasoa commented Dec 21, 2024

I updates, and the alignment is much better, but it still seems off in the middle of the chart, doesn"t it ?

image

image

image

https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/yyBJvMq

"tickAmount": 12 seems to produce 13 ticks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working verified
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lovasoa @junedchhipa