How to sort the labels on the x-axis of a combo chart?
Published: 2024-05-08 07:35:23

## Problem Description

  In the following combined chart, the x-axis labels are not sorted by time. Can the sorting effect be achieved through `sortDataByAxis`?


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ooogn5jq0137xq50s2yf.png)



  


## Solution

The function of `sortDataByAxis` is to sort the data of the series along the axis without affecting the sorting of the axis itself. To display the content on the axis in the desired order, there are two solutions:

1.  Configure the fields in the data to set the domain order of the data to be displayed:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxr5akixkm7pn4xmqwxg.png)



2.  Sort the data in advance according to the display order.

  


## Code Examples

```
const spec = {
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      fields: {
        x: {
          domain: ['2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25', '2024-03-26'],
          sortIndex: 0
        }
      },
      values: [
        { x: '2024-03-21', type: '需求建议', y: 14 },
        { x: '2024-03-21', type: '功能缺陷', y: 27 },
        { x: '2024-03-21', type: '其他', y: 1 },
        { x: '2024-03-21', type: '操作咨询', y: 16 },
        { x: '2024-03-26', type: '功能缺陷', y: 26 },
        { x: '2024-03-26', type: '需求建议', y: 9 },
        { x: '2024-03-26', type: '操作咨询', y: 17 },
        { x: '2024-03-26', type: '其他', y: 1 },
        { x: '2024-03-25', type: '功能缺陷', y: 23 },
        { x: '2024-03-25', type: '操作咨询', y: 19 },
        { x: '2024-03-25', type: '需求建议', y: 11 },
        { x: '2024-03-22', type: '需求建议', y: 6 },
        { x: '2024-03-22', type: '功能缺陷', y: 22 },
        { x: '2024-03-22', type: '操作咨询', y: 14 },
        { x: '2024-03-22', type: '其他', y: 2 },
        { x: '2024-03-27', type: '功能缺陷', y: 16 },
        { x: '2024-03-27', type: '其他', y: 3 },
        { x: '2024-03-27', type: '需求建议', y: 8 },
        { x: '2024-03-27', type: '操作咨询', y: 8 },
        { x: '2024-03-23', type: '需求建议', y: 2 },
        { x: '2024-03-23', type: '功能缺陷', y: 2 },
        { x: '2024-03-20', type: '操作咨询', y: 2 },
        { x: '2024-03-20', type: '功能缺陷', y: 2 },
        { x: '2024-03-24', type: '需求建议', y: 1 }
      ]
    },
    {
      id: 'id1',
      fields: {
        x: {
          domain: ['2024-03-20', '2024-03-21', '2024-03-22', '2024-03-23', '2024-03-24', '2024-03-25', '2024-03-26'],
          sortIndex: 0
        }
      },
      values: [
        { x: '2024-03-21', type: '负面反馈比例', y: 55 },
        { x: '2024-03-26', type: '负面反馈比例', y: 57 },
        { x: '2024-03-25', type: '负面反馈比例', y: 62 },
        { x: '2024-03-22', type: '负面反馈比例', y: 63 },
        { x: '2024-03-27', type: '负面反馈比例', y: 57 },
        { x: '2024-03-23', type: '负面反馈比例', y: 75 },
        { x: '2024-03-20', type: '负面反馈比例', y: 75 },
        { x: '2024-03-24', type: '负面反馈比例', y: 100 }
      ]
    }
  ],
  stackSort: true,
  series: [
    {
      type: 'bar',
      id: 'bar',
      label: { visible: true },
      seriesField: 'type',
      dataIndex: 0,
      xField: 'x',
      yField: 'y',
      stack: true,
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false,
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0] },
    {
      orient: 'right',
      seriesId: ['line'],
      gird: { visible: false },
      min: 0,
      max: 100,
      title: { visible: true, text: '%', position: 'start' }
    },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
  legends: { visible: true, orient: 'bottom' }
};
```

## Result Presentation


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oipk4xzf4p3fadrb81wm.png)



## Related documents

-   [Tutorial on Data Types and Data Definitions](https://www.visactor.com/vchart/guide/tutorial_docs/Chart_Concepts/Data/Data_Types_and_Interface)
-   [VChart github](https://github.com/VisActor/VChart)