diff --git a/dist/charting.js b/dist/charting.js
index eebc4010..7703fa4d 100644
--- a/dist/charting.js
+++ b/dist/charting.js
@@ -60821,6 +60821,7 @@ var LatLonPolyLine = /*#__PURE__*/function (_Draw$PolyLine) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LEGEND_POSITIONS; });
+/* unused harmony export SORT_DIRECTION */
 /* harmony export (immutable) */ __webpack_exports__["b"] = getLegendStateFromChart;
 /* harmony export (immutable) */ __webpack_exports__["h"] = handleLegendToggle;
 /* harmony export (immutable) */ __webpack_exports__["g"] = handleLegendSort;
@@ -60864,6 +60865,10 @@ var LEGEND_POSITIONS = {
   TOP_RIGHT: "top-right",
   BOTTOM_LEFT: "bottom-left"
 };
+var SORT_DIRECTION = {
+  ASCENDING: "asc",
+  DESCENDING: "desc"
+};
 var OTHER_KEY = "Other";
 var hasLegendOpenProp = function hasLegendOpenProp(color) {
   return _typeof(color.legend) === "object" && color.legend.hasOwnProperty("open");
@@ -60988,6 +60993,11 @@ function getUpdatedDomainRange(newDomain, oldDomain, range, defaultColor) {
     newRange: _toConsumableArray(newDomainRange.values())
   };
 }
+var sortDomain = function sortDomain(sortDirection, domain) {
+  return domain.sort(function (a, b) {
+    return sortDirection === SORT_DIRECTION.ASCENDING ? a.localeCompare(b) : b.localeCompare(a);
+  });
+};
 function getLegendStateFromChart(_x4, _x5, _x6) {
   return _getLegendStateFromChart.apply(this, arguments);
 }
@@ -61054,7 +61064,7 @@ function _getLegendStateFromChart() {
                         color = layer.getState().encoding.color;
                         color_legend_descriptor = null;
                         if (!((layers.length > 1 || __WEBPACK_IMPORTED_MODULE_0_lodash__["isEqual"](selectedLayer, layerState)) && typeof color !== "undefined")) {
-                          _context2.next = 39;
+                          _context2.next = 40;
                           break;
                         }
                         if (!(_typeof(color.scale) === "object" && color.scale.domain === "auto")) {
@@ -61066,7 +61076,7 @@ function _getLegendStateFromChart() {
                             domain: layer.colorDomain()
                           })
                         });
-                        _context2.next = 37;
+                        _context2.next = 38;
                         break;
                       case 21:
                         if (!(typeof color.scale === "undefined" && color.domain === "auto")) {
@@ -61076,17 +61086,20 @@ function _getLegendStateFromChart() {
                         color_legend_descriptor = _objectSpread(_objectSpread({}, color), {}, {
                           domain: layer.colorDomain()
                         });
-                        _context2.next = 37;
+                        _context2.next = 38;
                         break;
                       case 25:
                         if (!(color.type === "ordinal")) {
-                          _context2.next = 36;
+                          _context2.next = 37;
                           break;
                         }
                         _context2.next = 28;
                         return getTopValues(layer, layer_name, color.domain.length);
                       case 28:
                         colValues = _context2.sent;
+                        if (color.sorted) {
+                          colValues = sortDomain(color.sorted, colValues);
+                        }
                         _ref4 = colValues ? getUpdatedDomainRange(colValues, color.domain, color.range, color.defaultOtherRange) : {}, newDomain = _ref4.newDomain, newRange = _ref4.newRange; // don't show the other category when new domain is smaller than original max
                         color.otherActive = false;
                         if (!color.hideOther && newDomain.length < color.domain.length) {
@@ -61104,20 +61117,20 @@ function _getLegendStateFromChart() {
                           domain: newDomain,
                           range: newRange
                         }) : _objectSpread({}, color);
-                        _context2.next = 37;
+                        _context2.next = 38;
                         break;
-                      case 36:
-                        color_legend_descriptor = _objectSpread({}, color);
                       case 37:
-                        _context2.next = 40;
-                        break;
-                      case 39:
                         color_legend_descriptor = _objectSpread({}, color);
+                      case 38:
+                        _context2.next = 41;
+                        break;
                       case 40:
+                        color_legend_descriptor = _objectSpread({}, color);
+                      case 41:
                         return _context2.abrupt("return", _objectSpread(_objectSpread({}, color_legend_descriptor), {}, {
                           version: 1.0
                         }));
-                      case 41:
+                      case 42:
                       case "end":
                         return _context2.stop();
                     }
@@ -61177,12 +61190,12 @@ function handleLegendSort() {
     otherActive = color.otherActive;
   var currentDomain = filteredDomain !== null && filteredDomain !== void 0 ? filteredDomain : domain;
   var currentRange = filteredRange !== null && filteredRange !== void 0 ? filteredRange : range;
-  var sortedDomain = currentDomain.filter(function (d) {
+
+  // Toggle sort order, or set to ascending initially
+  color.sorted = sorted === SORT_DIRECTION.DESCENDING || !sorted ? SORT_DIRECTION.ASCENDING : SORT_DIRECTION.DESCENDING;
+  var sortedDomain = sortDomain(color.sorted, currentDomain.filter(function (d) {
     return d !== OTHER_KEY;
-  }).sort(function (a, b) {
-    return sorted === "asc" ? b.localeCompare(a) : a.localeCompare(b);
-  });
-  color.sorted = sorted === "asc" ? "desc" : "asc";
+  }));
   var _getUpdatedDomainRang = getUpdatedDomainRange(sortedDomain, currentDomain, currentRange, defaultOtherRange),
     newDomain = _getUpdatedDomainRang.newDomain,
     newRange = _getUpdatedDomainRang.newRange;
diff --git a/src/chart-addons/stacked-legend.js b/src/chart-addons/stacked-legend.js
index f37e4168..882f726e 100644
--- a/src/chart-addons/stacked-legend.js
+++ b/src/chart-addons/stacked-legend.js
@@ -9,6 +9,11 @@ export const LEGEND_POSITIONS = {
   BOTTOM_LEFT: "bottom-left"
 }
 
+export const SORT_DIRECTION = {
+  ASCENDING: "asc",
+  DESCENDING: "desc"
+}
+
 const OTHER_KEY = "Other"
 
 const hasLegendOpenProp = color =>
@@ -131,6 +136,10 @@ function getUpdatedDomainRange(newDomain, oldDomain, range, defaultColor) {
   }
 }
 
+const sortDomain = (sortDirection, domain) => domain.sort((a, b) =>
+      sortDirection === SORT_DIRECTION.ASCENDING ? a.localeCompare(b) : b.localeCompare(a)
+  )
+
 export async function getLegendStateFromChart(chart, useMap, selectedLayer) {
   // the getLegendStateFromChart in _doRender gets called from few different options
   // and some of them are calling with all layers in chart.
@@ -211,11 +220,16 @@ export async function getLegendStateFromChart(chart, useMap, selectedLayer) {
                 domain: layer.colorDomain()
               }
             } else if (color.type === "ordinal") {
-              const colValues = await getTopValues(
+              let colValues = await getTopValues(
                 layer,
                 layer_name,
                 color.domain.length
               )
+
+              if (color.sorted) {
+                colValues = sortDomain(color.sorted, colValues)
+              }
+
               const { newDomain, newRange } = colValues
                 ? getUpdatedDomainRange(
                     colValues,
@@ -301,13 +315,11 @@ export function handleLegendSort(index = 0) {
   const currentDomain = filteredDomain ?? domain
   const currentRange = filteredRange ?? range
 
-  const sortedDomain = currentDomain
-    .filter(d => d !== OTHER_KEY)
-    .sort((a, b) =>
-      sorted === "asc" ? b.localeCompare(a) : a.localeCompare(b)
-    )
+  // Toggle sort order, or set to ascending initially
+  color.sorted = sorted === SORT_DIRECTION.DESCENDING || !sorted ? SORT_DIRECTION.ASCENDING : SORT_DIRECTION.DESCENDING
 
-  color.sorted = sorted === "asc" ? "desc" : "asc"
+  const sortedDomain = sortDomain(color.sorted, currentDomain
+    .filter(d => d !== OTHER_KEY))
 
   const { newDomain, newRange } = getUpdatedDomainRange(
     sortedDomain,