CODEWITHSUNDEEP
reactjstypescriptantv
Zoltán Strcuľa
Zoltán Strcuľa

Reputation: 11

antv Column chart - Is it possible to sort xField values which contain string date?

I am using antv basic Column chart in React app. I am trying to display dates on X axis. All the dates are formatted to DD.MM.YYYY and inputed to chart as string. For some reason It is never sorted correctly.

Please, does anyone encountered this behaviour? Is it somehow possible to add sort method in chart config? I couldn't find anything in documentation.

The image of final graph.

Data loading method:

const [data, setData] = useState<any>(undefined);

const loadValues = useCallback(
  (data) => {
     const array = []
     for (const [day, values] of Object.entries(data)) {
       for (const [type, value] of Object.entries(values as any)) {
         array.push({
           date: moment(day).format('L');,
           value: value
         });
       }
     }
     setData(array)
  }, []
)

Column graph:

<Column
  data=data
  isGroup={true}
  xField="date"
  yField="value"
  isStack={true}
  legend={{
    layout: 'horizontal' as const,
    position: 'bottom' as const,
  }}
/>

Thank you for any information.

EDIT:

I have solved it with data initialization for selected dates.

Initialization function:

const initializeDays = (from: moment.Moment, to: moment.Moment, data: any) => {
  let dateToAdd = from;
  let array: {date: string, value: number}[] = [];
  const dayAfterTo = moment(to).add(1, 'day').format('L');

  while (moment(dateToAdd).format('L') !== dayAfterTo) {
    for (const [day] of Object.entries(data)) {
      if (moment(dateToAdd).format('L') === moment(day).format('L')) {
        array.push({
          date: moment(dateToAdd).format('L'),
          value: 0
        })
      }
    }
    dateToAdd.add(1, 'day')
  }
  return array;
}

Updated data loading method:

const loadValues = useCallback(
    (data) => {
      const array = initializeDays(from, to, data)
      for (const [day, values] of Object.entries(data)) {
        for (const [type, value] of Object.entries(values as any)) {
          array.forEach((item) => {
            if (item.date === moment(day).format('L')) {
              item.value: value;
            }
          })
        }
      }
      setData(array)
    }, []
)

Upvotes: 1

Views: 921

Answers (0)

Related Questions