Sort barchart data

packages/desktop-client/src/components/reports/graphs/BarGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState, type CSSProperties } from 'react';
+import React, { useMemo, useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
@@ -207,6 +207,12 @@ export function BarGraph({
 
   const leftMargin = Math.abs(largestValue) > 1000000 ? 20 : 0;
 
+  // Sort the data in the bar chart
+  const unsortedData = data[splitData];
+  const sortedData = useMemo(() => {
+    return unsortedData.sort((a, b) => a[balanceTypeOp] - b[balanceTypeOp]);
+  }, [unsortedData, balanceTypeOp]);
+
   return (
     <Container
       style={{
@@ -223,7 +229,7 @@ export function BarGraph({
                 width={width}
                 height={height}
                 stackOffset="sign"
-                data={data[splitData]}
+                data={sortedData}
                 style={{ cursor: pointer }}
                 margin={{
                   top: labelsMargin,

upcoming-release-notes/4072.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [matt-fidd]
+---
+
+Sort barchart data