Incorrect values order on the X-axis

Hello,
The X-axis values are ordered Alphabetically (Ascending), but the visualization is incorrect (see image attached):

Here is the visState:

{
  "title": "Characters damages  per a day after registration",
  "type": "line",
  "params": {
    "addLegend": true,
    "addTimeMarker": false,
    "addTooltip": true,
    "categoryAxes": [
      {
        "id": "CategoryAxis-1",
        "labels": {
          "filter": true,
          "show": true,
          "truncate": 100,
          "rotate": 0
        },
        "position": "bottom",
        "scale": {
          "type": "linear"
        },
        "show": true,
        "style": {},
        "title": {},
        "type": "category"
      }
    ],
    "dimensions": {
      "x": {
        "accessor": 1,
        "format": {
          "id": "terms",
          "params": {
            "id": "number",
            "otherBucketLabel": "Other",
            "missingBucketLabel": "Missing"
          }
        },
        "params": {},
        "aggType": "terms"
      },
      "y": [
        {
          "accessor": 2,
          "format": {
            "id": "number"
          },
          "params": {},
          "aggType": "avg"
        },
        {
          "accessor": 3,
          "format": {
            "id": "number"
          },
          "params": {},
          "aggType": "avg"
        }
      ],
      "splitRow": [
        {
          "accessor": 0,
          "format": {
            "id": "terms",
            "params": {
              "id": "string",
              "otherBucketLabel": "Other",
              "missingBucketLabel": "Missing"
            }
          },
          "params": {},
          "aggType": "terms"
        }
      ]
    },
    "grid": {
      "categoryLines": false,
      "valueAxis": "ValueAxis-1"
    },
    "labels": {
      "show": true
    },
    "legendPosition": "top",
    "orderBucketsBySum": false,
    "radiusRatio": 75,
    "seriesParams": [
      {
        "data": {
          "id": "1",
          "label": "Damage dealt"
        },
        "drawLinesBetweenPoints": true,
        "interpolate": "linear",
        "mode": "normal",
        "show": "true",
        "showCircles": true,
        "type": "histogram",
        "valueAxis": "ValueAxis-1"
      },
      {
        "data": {
          "id": "2",
          "label": "Damage received"
        },
        "drawLinesBetweenPoints": true,
        "interpolate": "linear",
        "mode": "normal",
        "show": true,
        "showCircles": true,
        "type": "histogram",
        "valueAxis": "ValueAxis-1"
      }
    ],
    "times": [],
    "type": "line",
    "valueAxes": [
      {
        "id": "ValueAxis-1",
        "labels": {
          "filter": false,
          "rotate": 0,
          "show": true,
          "truncate": 100
        },
        "name": "LeftAxis-1",
        "position": "left",
        "scale": {
          "defaultYExtents": false,
          "mode": "normal",
          "type": "linear"
        },
        "show": true,
        "style": {},
        "title": {
          "text": "Average damage_dealt_amount"
        },
        "type": "value"
      }
    ],
    "thresholdLine": {
      "show": false,
      "value": 10,
      "width": 1,
      "style": "full",
      "color": "#34130C"
    }
  },
  "aggs": [
    {
      "id": "1",
      "enabled": true,
      "type": "avg",
      "schema": "metric",
      "params": {
        "field": "damage_dealt_amount",
        "customLabel": "Damage dealt"
      }
    },
    {
      "id": "2",
      "enabled": true,
      "type": "avg",
      "schema": "metric",
      "params": {
        "field": "damage_received_amount",
        "customLabel": "Damage received"
      }
    },
    {
      "id": "3",
      "enabled": true,
      "type": "terms",
      "schema": "segment",
      "params": {
        "field": "days_after_registration",
        "orderBy": "_key",
        "order": "asc",
        "size": 99999,
        "otherBucket": true,
        "otherBucketLabel": "Other",
        "missingBucket": true,
        "missingBucketLabel": "Missing"
      }
    },
    {
      "id": "4",
      "enabled": true,
      "type": "terms",
      "schema": "split",
      "params": {
        "field": "character_name.keyword",
        "orderBy": "_key",
        "order": "asc",
        "size": 12,
        "otherBucket": true,
        "otherBucketLabel": "Other",
        "missingBucket": true,
        "missingBucketLabel": "Missing",
        "row": true
      }
    }
  ]
}

What's the problem?

It looks like your days_after_registration is being treated as text instead of a number, where the first character matters. So for example, 100 is sorted before 20 because the character 1 comes first. So you have two options:

  1. Change this to a number field
  2. Use a scripted field to change the data type to a number

Once it's a number, the sorting will be numeric.

The field is already marked as number:


An even if it was not a number, the order of X-axis values is not alphabetical (see the highlighted areas):

Looked into this a bit more, and my setup is basically the same except that I have denser data than you do. You might be experiencing some kind of bug in our chart library, and my guess is that the split chart is causing it. What happens if you remove the split chart, does it sort correctly?

Yes, it seems that you're right! I've removed the split chart

I filed a bug report for this. I think your use of alphabetical sorting is not a case we had considered. https://github.com/elastic/kibana/issues/55089