@dhis2/analytics 21.8.0 → 21.8.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.8.1](https://github.com/dhis2/analytics/compare/v21.8.0...v21.8.1) (2022-08-18)
+
+
+### Bug Fixes
+
+* highcharts legend when exporting (DHIS2-12719) 21.x ([#1311](https://github.com/dhis2/analytics/issues/1311)) ([8015854](https://github.com/dhis2/analytics/commit/80158545b7e2dabb441c71a1989bcc74db6fb720))
+
 # [21.8.0](https://github.com/dhis2/analytics/compare/v21.7.0...v21.8.0) (2022-08-12)
 
 

package/build/cjs/modules/legends.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColorByValueFromLegendSet = exports.getLegendByValueFromLegendSet = exports.LEGEND_DISPLAY_STYLE_TEXT = exports.LEGEND_DISPLAY_STYLE_FILL = exports.LEGEND_DISPLAY_STRATEGY_FIXED = exports.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = void 0;
+exports.getLegendSetByDisplayStrategy = exports.getColorByValueFromLegendSet = exports.getLegendByValueFromLegendSet = exports.LEGEND_DISPLAY_STYLE_TEXT = exports.LEGEND_DISPLAY_STYLE_FILL = exports.LEGEND_DISPLAY_STRATEGY_FIXED = exports.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = void 0;
 const LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = 'BY_DATA_ITEM';
 exports.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM = LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM;
 const LEGEND_DISPLAY_STRATEGY_FIXED = 'FIXED';
@@ -23,4 +23,20 @@ const getColorByValueFromLegendSet = (legendSet, value) => {
   return legend && legend.color;
 };
 
-exports.getColorByValueFromLegendSet = getColorByValueFromLegendSet;
+exports.getColorByValueFromLegendSet = getColorByValueFromLegendSet;
+
+const getLegendSetByDisplayStrategy = ({
+  displayStrategy,
+  legendSets,
+  legendSetId
+}) => {
+  if (displayStrategy === LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
+    return legendSets[0];
+  } else if (displayStrategy === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
+    return legendSets.find(legendSet => legendSet.id === legendSetId);
+  } else {
+    return null;
+  }
+};
+
+exports.getLegendSetByDisplayStrategy = getLegendSetByDisplayStrategy;

package/build/cjs/visualizations/config/adapters/dhis_highcharts/index.js

@@ -70,7 +70,7 @@ function _default({
   extraConfig,
   extraOptions
 }) {
-  var _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _layout$legend, _config$xAxis;
+  var _layout$legend, _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _config$xAxis;
 
   const _layout = getTransformedLayout(layout);
 
@@ -108,16 +108,21 @@ function _default({
     // y-axis
     yAxis: (0, _index7.default)(_layout, series, _extraOptions),
     // series
-    series: (0, _index3.default)(series.slice(), store.data[0].metaData, _layout, stacked, _extraOptions),
+    series: (0, _index3.default)({
+      series: series.slice(),
+      metaData: store.data[0].metaData.items,
+      layout: _layout,
+      isStacked: stacked,
+      extraOptions: _extraOptions,
+      legendSets,
+      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+    }),
     // legend
     legend: (0, _legend.default)({
       isHidden: (_layout$seriesKey = _layout.seriesKey) === null || _layout$seriesKey === void 0 ? void 0 : _layout$seriesKey.hidden,
       fontStyle: (_layout$seriesKey2 = _layout.seriesKey) === null || _layout$seriesKey2 === void 0 ? void 0 : (_layout$seriesKey2$la = _layout$seriesKey2.label) === null || _layout$seriesKey2$la === void 0 ? void 0 : _layout$seriesKey2$la.fontStyle,
       visType: _layout.type,
-      dashboard: _extraOptions.dashboard,
-      legendSets,
-      metaData: store.data[0].metaData.items,
-      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+      dashboard: _extraOptions.dashboard
     }),
     // pane
     pane: (0, _index2.default)(_layout.type),

package/build/cjs/visualizations/config/adapters/dhis_highcharts/legend.js

@@ -7,18 +7,10 @@ exports.default = _default;
 
 var _fontStyle = require("../../../../modules/fontStyle.js");
 
-var _legends = require("../../../../modules/legends.js");
-
 var _visTypes = require("../../../../modules/visTypes.js");
 
-var _colorSets = require("../../../util/colors/colorSets.js");
-
 var _getTextAlignOption = require("./getTextAlignOption.js");
 
-var _type = _interopRequireDefault(require("./type.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const DASHBOARD_ITEM_STYLE = {
   fontSize: '11px',
   fontWeight: 500
@@ -48,96 +40,14 @@ function getLegend(fontStyle, dashboard, visType) {
   });
 }
 
-const getLegendSetByDisplayStrategy = ({
-  displayStrategy,
-  legendSets,
-  legendSetId
-}) => {
-  if (displayStrategy === _legends.LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
-    return legendSets[0];
-  } else if (displayStrategy === _legends.LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
-    return legendSets.find(legendSet => legendSet.id === legendSetId);
-  } else {
-    return null;
-  }
-};
-
-const formatLabel = ({
-  seriesId,
-  seriesColor,
-  seriesName,
-  seriesType,
-  metaData,
-  displayStrategy,
-  legendSets,
-  fontStyle,
-  visType
-}) => {
-  var _metaData$seriesId, _legendSet$legends;
-
-  const legendSet = getLegendSetByDisplayStrategy({
-    displayStrategy,
-    legendSets,
-    legendSetId: (_metaData$seriesId = metaData[seriesId]) === null || _metaData$seriesId === void 0 ? void 0 : _metaData$seriesId.legendSet
-  });
-  const result = []; // Note: Highcharts strips out 'data-test' and similar attributes, hence 'class="data-test-..." was used instead
-
-  result.push('<div style="display: flex; align-items: center; margin-bottom: 4px;" class="data-test-series-key-item">');
-
-  if ((!seriesId || seriesId.startsWith('trendline')) && seriesType === (0, _type.default)(_visTypes.VIS_TYPE_LINE).type) {
-    // trendline
-    result.push("<span style=\"height: ".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 6.5, "px; width: ").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px; background-color: ").concat(seriesColor, "; display: inline-block;\"></span>"));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else if (legendSet !== null && legendSet !== void 0 && (_legendSet$legends = legendSet.legends) !== null && _legendSet$legends !== void 0 && _legendSet$legends.length && (0, _visTypes.isLegendSetType)(visType) && seriesType !== (0, _type.default)(_visTypes.VIS_TYPE_LINE).type) {
-    // item with legend set
-    legendSet.legends.sort((a, b) => a.startValue - b.startValue).forEach((legend, index) => result.push("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" version=\"1.1\"  style=\"margin-right:-5px; z-index: ").concat(legendSet.legends.length - index, "\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(legend.color, "\"></circle>\n                    </svg>")));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else {
-    // regular item (not a trendline, no applied legend set)
-    if ((seriesColor === null || seriesColor === void 0 ? void 0 : seriesColor.patternIndex) !== undefined) {
-      const pattern = _colorSets.colorSets[_colorSets.COLOR_SET_PATTERNS].patterns[seriesColor.patternIndex];
-      result.push("<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: ".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px; width: ").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "px; display: inline-block; margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                <defs>\n                  <pattern id=\"pattern").concat(seriesColor.patternIndex, "\" patternUnits=\"userSpaceOnUse\" width=\"").concat(pattern.width, "\" height=\"").concat(pattern.height, "\">\n                    <path stroke=\"").concat(pattern.color, "\" d=\"").concat(pattern.path, "\"/>\n                  </pattern>\n                </defs>\n                <circle cx=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"url(#pattern").concat(seriesColor.patternIndex, ")\"/>\n              </svg>"));
-    } else {
-      result.push("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE], "\" version=\"1.1\"  style=\"margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[_fontStyle.FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(seriesColor, "\"></circle>\n                    </svg>"));
-    }
-
-    result.push("<span class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  }
-
-  result.push('</div>');
-  return result.join('');
-};
-
 function _default({
   isHidden,
   fontStyle,
   visType,
-  dashboard,
-  legendSets = [],
-  metaData,
-  displayStrategy
+  dashboard
 }) {
   const mergedFontStyle = (0, _fontStyle.mergeFontStyleWithDefault)(fontStyle, _fontStyle.FONT_STYLE_LEGEND);
   return isHidden || visType === _visTypes.VIS_TYPE_SCATTER ? {
     enabled: false
-  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard), {
-    useHTML: true,
-    symbolWidth: 0.001,
-    symbolHeight: 0.001,
-    labelFormatter: function () {
-      var _this$userOptions, _this$userOptions2;
-
-      return formatLabel({
-        seriesId: (_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.id,
-        seriesColor: this.color,
-        seriesName: this.name,
-        seriesType: (_this$userOptions2 = this.userOptions) === null || _this$userOptions2 === void 0 ? void 0 : _this$userOptions2.type,
-        metaData,
-        displayStrategy,
-        legendSets,
-        fontStyle: mergedFontStyle,
-        visType
-      });
-    }
-  });
+  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard));
 }

package/build/cjs/visualizations/config/adapters/dhis_highcharts/series/index.js

@@ -11,6 +11,8 @@ var _axis = require("../../../../../modules/axis.js");
 
 var _axisHasRelativeItems = require("../../../../../modules/layout/axisHasRelativeItems.js");
 
+var _legends = require("../../../../../modules/legends.js");
+
 var _visTypes = require("../../../../../modules/visTypes.js");
 
 var _axisId = require("../../../../util/axisId.js");
@@ -95,12 +97,20 @@ function getIdColorMap(series, layout, extraOptions) {
   }
 }
 
-function getDefault(series, metaData, layout, isStacked, extraOptions) {
+function getDefault({
+  series,
+  metaData,
+  layout,
+  isStacked,
+  extraOptions,
+  legendSets,
+  displayStrategy
+}) {
   const fullIdAxisMap = (0, _customAxes.getFullIdAxisMap)(layout.series, series);
   const idColorMap = getIdColorMap(series, layout, extraOptions);
   const indexColorPatternMap = getIndexColorPatternMap(series, layout, extraOptions);
   series.forEach((seriesObj, index) => {
-    var _seriesObj$custom, _layout$series2;
+    var _seriesObj$custom, _layout$series2, _metaData$seriesObj$i;
 
     // show values
     if (!seriesObj.dataLabels && (layout.showValues || layout.showData)) {
@@ -160,6 +170,15 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
     if (extraOptions.yearlySeries) {
       seriesObj.name = extraOptions.yearlySeries[index];
     }
+
+    seriesObj.legendSet = (0, _legends.getLegendSetByDisplayStrategy)({
+      displayStrategy,
+      legendSets,
+      legendSetId: (_metaData$seriesObj$i = metaData[seriesObj.id]) === null || _metaData$seriesObj$i === void 0 ? void 0 : _metaData$seriesObj$i.legendSet
+    });
+    seriesObj.marker = {
+      enabled: false
+    };
   }); // DHIS2-701: use cumulative values
 
   if (layout.cumulativeValues === true) {
@@ -169,7 +188,15 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
   return series;
 }
 
-function _default(series, metaData, layout, isStacked, extraOptions) {
+function _default({
+  series,
+  metaData,
+  layout,
+  isStacked,
+  extraOptions,
+  legendSets,
+  displayStrategy
+}) {
   switch (layout.type) {
     case _visTypes.VIS_TYPE_PIE:
       series = (0, _pie.default)(series, Object.values(getIdColorMap(series, layout, extraOptions)));
@@ -184,7 +211,15 @@ function _default(series, metaData, layout, isStacked, extraOptions) {
       break;
 
     default:
-      series = getDefault(series, metaData, layout, isStacked, extraOptions);
+      series = getDefault({
+        series,
+        metaData,
+        layout,
+        isStacked,
+        extraOptions,
+        legendSets,
+        displayStrategy
+      });
   }
 
   series.forEach(seriesObj => {

package/build/cjs/visualizations/config/generators/highcharts/index.js

@@ -29,6 +29,38 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 (0, _patternFill.default)(_highcharts.default);
 (0, _boost.default)(_highcharts.default);
 
+function drawLegendSymbolWrap() {
+  const pick = _highcharts.default.pick;
+
+  _highcharts.default.wrap(_highcharts.default.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {
+    var _this$options$legendS, _this$options$legendS2;
+
+    if ((_this$options$legendS = this.options.legendSet) !== null && _this$options$legendS !== void 0 && (_this$options$legendS2 = _this$options$legendS.legends) !== null && _this$options$legendS2 !== void 0 && _this$options$legendS2.length) {
+      const ys = legend.baseline - legend.symbolHeight + 1,
+            // y start
+      x = legend.symbolWidth / 2 > 8 ? legend.symbolWidth / 2 : 8,
+            // x start
+      ye = legend.symbolHeight + ys; // y end
+
+      const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
+      this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
+        fill: legends.at(legends.length >= 5 ? 1 : 0).color
+      }).add(this.legendGroup);
+      this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
+        fill: legends.at(legends.length >= 5 ? -2 : -1).color
+      }).add(this.legendGroup);
+    } else {
+      var options = legend.options,
+          symbolHeight = legend.symbolHeight,
+          square = options.squareSymbol,
+          symbolWidth = square ? symbolHeight : legend.symbolWidth;
+      item.legendSymbol = this.chart.renderer.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, symbolWidth, symbolHeight, pick(legend.options.symbolRadius, symbolHeight / 2)).addClass('highcharts-point').attr({
+        zIndex: 3
+      }).add(item.legendGroup);
+    }
+  });
+}
+
 function _default(config, el) {
   if (config) {
     config.chart.renderTo = el || config.chart.renderTo;
@@ -39,6 +71,7 @@ function _default(config, el) {
       });
     }
 
+    drawLegendSymbolWrap();
     return new _highcharts.default.Chart(config);
   }
 }

package/build/es/modules/legends.js

@@ -7,4 +7,17 @@ export const getLegendByValueFromLegendSet = (legendSet, value) => legendSet.leg
 export const getColorByValueFromLegendSet = (legendSet, value) => {
   const legend = getLegendByValueFromLegendSet(legendSet, value);
   return legend && legend.color;
+};
+export const getLegendSetByDisplayStrategy = ({
+  displayStrategy,
+  legendSets,
+  legendSetId
+}) => {
+  if (displayStrategy === LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
+    return legendSets[0];
+  } else if (displayStrategy === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
+    return legendSets.find(legendSet => legendSet.id === legendSetId);
+  } else {
+    return null;
+  }
 };

package/build/es/visualizations/config/adapters/dhis_highcharts/index.js

@@ -37,7 +37,7 @@ export default function ({
   extraConfig,
   extraOptions
 }) {
-  var _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _layout$legend, _config$xAxis;
+  var _layout$legend, _layout$seriesKey, _layout$seriesKey2, _layout$seriesKey2$la, _config$xAxis;
 
   const _layout = getTransformedLayout(layout);
 
@@ -75,16 +75,21 @@ export default function ({
     // y-axis
     yAxis: getYAxis(_layout, series, _extraOptions),
     // series
-    series: getSeries(series.slice(), store.data[0].metaData, _layout, stacked, _extraOptions),
+    series: getSeries({
+      series: series.slice(),
+      metaData: store.data[0].metaData.items,
+      layout: _layout,
+      isStacked: stacked,
+      extraOptions: _extraOptions,
+      legendSets,
+      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+    }),
     // legend
     legend: getLegend({
       isHidden: (_layout$seriesKey = _layout.seriesKey) === null || _layout$seriesKey === void 0 ? void 0 : _layout$seriesKey.hidden,
       fontStyle: (_layout$seriesKey2 = _layout.seriesKey) === null || _layout$seriesKey2 === void 0 ? void 0 : (_layout$seriesKey2$la = _layout$seriesKey2.label) === null || _layout$seriesKey2$la === void 0 ? void 0 : _layout$seriesKey2$la.fontStyle,
       visType: _layout.type,
-      dashboard: _extraOptions.dashboard,
-      legendSets,
-      metaData: store.data[0].metaData.items,
-      displayStrategy: (_layout$legend = _layout.legend) === null || _layout$legend === void 0 ? void 0 : _layout$legend.strategy
+      dashboard: _extraOptions.dashboard
     }),
     // pane
     pane: getPane(_layout.type),

package/build/es/visualizations/config/adapters/dhis_highcharts/legend.js

@@ -1,9 +1,6 @@
 import { FONT_STYLE_OPTION_FONT_SIZE, FONT_STYLE_OPTION_TEXT_COLOR, FONT_STYLE_OPTION_BOLD, FONT_STYLE_OPTION_ITALIC, FONT_STYLE_OPTION_TEXT_ALIGN, FONT_STYLE_LEGEND, mergeFontStyleWithDefault } from '../../../../modules/fontStyle.js';
-import { LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM, LEGEND_DISPLAY_STRATEGY_FIXED } from '../../../../modules/legends.js';
-import { isLegendSetType, isVerticalType, VIS_TYPE_LINE, VIS_TYPE_SCATTER } from '../../../../modules/visTypes.js';
-import { colorSets, COLOR_SET_PATTERNS } from '../../../util/colors/colorSets.js';
+import { isVerticalType, VIS_TYPE_SCATTER } from '../../../../modules/visTypes.js';
 import { getTextAlignOption } from './getTextAlignOption.js';
-import getType from './type.js';
 const DASHBOARD_ITEM_STYLE = {
   fontSize: '11px',
   fontWeight: 500
@@ -33,96 +30,14 @@ function getLegend(fontStyle, dashboard, visType) {
   });
 }
 
-const getLegendSetByDisplayStrategy = ({
-  displayStrategy,
-  legendSets,
-  legendSetId
-}) => {
-  if (displayStrategy === LEGEND_DISPLAY_STRATEGY_FIXED && legendSets.length) {
-    return legendSets[0];
-  } else if (displayStrategy === LEGEND_DISPLAY_STRATEGY_BY_DATA_ITEM) {
-    return legendSets.find(legendSet => legendSet.id === legendSetId);
-  } else {
-    return null;
-  }
-};
-
-const formatLabel = ({
-  seriesId,
-  seriesColor,
-  seriesName,
-  seriesType,
-  metaData,
-  displayStrategy,
-  legendSets,
-  fontStyle,
-  visType
-}) => {
-  var _metaData$seriesId, _legendSet$legends;
-
-  const legendSet = getLegendSetByDisplayStrategy({
-    displayStrategy,
-    legendSets,
-    legendSetId: (_metaData$seriesId = metaData[seriesId]) === null || _metaData$seriesId === void 0 ? void 0 : _metaData$seriesId.legendSet
-  });
-  const result = []; // Note: Highcharts strips out 'data-test' and similar attributes, hence 'class="data-test-..." was used instead
-
-  result.push('<div style="display: flex; align-items: center; margin-bottom: 4px;" class="data-test-series-key-item">');
-
-  if ((!seriesId || seriesId.startsWith('trendline')) && seriesType === getType(VIS_TYPE_LINE).type) {
-    // trendline
-    result.push("<span style=\"height: ".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 6.5, "px; width: ").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px; background-color: ").concat(seriesColor, "; display: inline-block;\"></span>"));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else if (legendSet !== null && legendSet !== void 0 && (_legendSet$legends = legendSet.legends) !== null && _legendSet$legends !== void 0 && _legendSet$legends.length && isLegendSetType(visType) && seriesType !== getType(VIS_TYPE_LINE).type) {
-    // item with legend set
-    legendSet.legends.sort((a, b) => a.startValue - b.startValue).forEach((legend, index) => result.push("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" version=\"1.1\"  style=\"margin-right:-5px; z-index: ").concat(legendSet.legends.length - index, "\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(legend.color, "\"></circle>\n                    </svg>")));
-    result.push("<span style=\"margin-left: 8px\" class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  } else {
-    // regular item (not a trendline, no applied legend set)
-    if ((seriesColor === null || seriesColor === void 0 ? void 0 : seriesColor.patternIndex) !== undefined) {
-      const pattern = colorSets[COLOR_SET_PATTERNS].patterns[seriesColor.patternIndex];
-      result.push("<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: ".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px; width: ").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "px; display: inline-block; margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                <defs>\n                  <pattern id=\"pattern").concat(seriesColor.patternIndex, "\" patternUnits=\"userSpaceOnUse\" width=\"").concat(pattern.width, "\" height=\"").concat(pattern.height, "\">\n                    <path stroke=\"").concat(pattern.color, "\" d=\"").concat(pattern.path, "\"/>\n                  </pattern>\n                </defs>\n                <circle cx=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"url(#pattern").concat(seriesColor.patternIndex, ")\"/>\n              </svg>"));
-    } else {
-      result.push("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" height=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE], "\" version=\"1.1\"  style=\"margin-right:5px\" class=\"data-test-series-key-item-bullet\">\n                    <circle cx=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" cy=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" r=\"").concat(fontStyle[FONT_STYLE_OPTION_FONT_SIZE] / 2, "\" fill=\"").concat(seriesColor, "\"></circle>\n                    </svg>"));
-    }
-
-    result.push("<span class=\"data-test-series-key-item-name\">".concat(seriesName, "</span>"));
-  }
-
-  result.push('</div>');
-  return result.join('');
-};
-
 export default function ({
   isHidden,
   fontStyle,
   visType,
-  dashboard,
-  legendSets = [],
-  metaData,
-  displayStrategy
+  dashboard
 }) {
   const mergedFontStyle = mergeFontStyleWithDefault(fontStyle, FONT_STYLE_LEGEND);
   return isHidden || visType === VIS_TYPE_SCATTER ? {
     enabled: false
-  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard), {
-    useHTML: true,
-    symbolWidth: 0.001,
-    symbolHeight: 0.001,
-    labelFormatter: function () {
-      var _this$userOptions, _this$userOptions2;
-
-      return formatLabel({
-        seriesId: (_this$userOptions = this.userOptions) === null || _this$userOptions === void 0 ? void 0 : _this$userOptions.id,
-        seriesColor: this.color,
-        seriesName: this.name,
-        seriesType: (_this$userOptions2 = this.userOptions) === null || _this$userOptions2 === void 0 ? void 0 : _this$userOptions2.type,
-        metaData,
-        displayStrategy,
-        legendSets,
-        fontStyle: mergedFontStyle,
-        visType
-      });
-    }
-  });
+  } : Object.assign({}, getLegend(mergedFontStyle, dashboard, visType), getItemStyle(mergedFontStyle, dashboard));
 }

package/build/es/visualizations/config/adapters/dhis_highcharts/series/index.js

@@ -1,6 +1,7 @@
 import { colors } from '@dhis2/ui';
 import { hasCustomAxes } from '../../../../../modules/axis.js';
 import { axisHasRelativeItems } from '../../../../../modules/layout/axisHasRelativeItems.js';
+import { getLegendSetByDisplayStrategy } from '../../../../../modules/legends.js';
 import { VIS_TYPE_PIE, VIS_TYPE_GAUGE, isDualAxisType, isYearOverYear, VIS_TYPE_LINE, VIS_TYPE_SCATTER } from '../../../../../modules/visTypes.js';
 import { getAxisStringFromId } from '../../../../util/axisId.js';
 import { colorSets, COLOR_SET_PATTERNS } from '../../../../util/colors/colorSets.js';
@@ -73,12 +74,20 @@ function getIdColorMap(series, layout, extraOptions) {
   }
 }
 
-function getDefault(series, metaData, layout, isStacked, extraOptions) {
+function getDefault({
+  series,
+  metaData,
+  layout,
+  isStacked,
+  extraOptions,
+  legendSets,
+  displayStrategy
+}) {
   const fullIdAxisMap = getFullIdAxisMap(layout.series, series);
   const idColorMap = getIdColorMap(series, layout, extraOptions);
   const indexColorPatternMap = getIndexColorPatternMap(series, layout, extraOptions);
   series.forEach((seriesObj, index) => {
-    var _seriesObj$custom, _layout$series2;
+    var _seriesObj$custom, _layout$series2, _metaData$seriesObj$i;
 
     // show values
     if (!seriesObj.dataLabels && (layout.showValues || layout.showData)) {
@@ -138,6 +147,15 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
     if (extraOptions.yearlySeries) {
       seriesObj.name = extraOptions.yearlySeries[index];
     }
+
+    seriesObj.legendSet = getLegendSetByDisplayStrategy({
+      displayStrategy,
+      legendSets,
+      legendSetId: (_metaData$seriesObj$i = metaData[seriesObj.id]) === null || _metaData$seriesObj$i === void 0 ? void 0 : _metaData$seriesObj$i.legendSet
+    });
+    seriesObj.marker = {
+      enabled: false
+    };
   }); // DHIS2-701: use cumulative values
 
   if (layout.cumulativeValues === true) {
@@ -147,7 +165,15 @@ function getDefault(series, metaData, layout, isStacked, extraOptions) {
   return series;
 }
 
-export default function (series, metaData, layout, isStacked, extraOptions) {
+export default function ({
+  series,
+  metaData,
+  layout,
+  isStacked,
+  extraOptions,
+  legendSets,
+  displayStrategy
+}) {
   switch (layout.type) {
     case VIS_TYPE_PIE:
       series = getPie(series, Object.values(getIdColorMap(series, layout, extraOptions)));
@@ -162,7 +188,15 @@ export default function (series, metaData, layout, isStacked, extraOptions) {
       break;
 
     default:
-      series = getDefault(series, metaData, layout, isStacked, extraOptions);
+      series = getDefault({
+        series,
+        metaData,
+        layout,
+        isStacked,
+        extraOptions,
+        legendSets,
+        displayStrategy
+      });
   }
 
   series.forEach(seriesObj => {

package/build/es/visualizations/config/generators/highcharts/index.js

@@ -12,6 +12,38 @@ HNDTD(H);
 HE(H);
 HPF(H);
 HB(H);
+
+function drawLegendSymbolWrap() {
+  const pick = H.pick;
+  H.wrap(H.seriesTypes.column.prototype, 'drawLegendSymbol', function (proceed, legend, item) {
+    var _this$options$legendS, _this$options$legendS2;
+
+    if ((_this$options$legendS = this.options.legendSet) !== null && _this$options$legendS !== void 0 && (_this$options$legendS2 = _this$options$legendS.legends) !== null && _this$options$legendS2 !== void 0 && _this$options$legendS2.length) {
+      const ys = legend.baseline - legend.symbolHeight + 1,
+            // y start
+      x = legend.symbolWidth / 2 > 8 ? legend.symbolWidth / 2 : 8,
+            // x start
+      ye = legend.symbolHeight + ys; // y end
+
+      const legends = this.options.legendSet.legends.sort((a, b) => a.startValue - b.startValue);
+      this.chart.renderer.path(['M', x, ys, 'A', 1, 1, 0, 0, 0, x, ye, 'V', ys]).attr({
+        fill: legends.at(legends.length >= 5 ? 1 : 0).color
+      }).add(this.legendGroup);
+      this.chart.renderer.path(['M', x, ye, 'A', 1, 1, 0, 0, 0, x, ys, 'V', ye]).attr({
+        fill: legends.at(legends.length >= 5 ? -2 : -1).color
+      }).add(this.legendGroup);
+    } else {
+      var options = legend.options,
+          symbolHeight = legend.symbolHeight,
+          square = options.squareSymbol,
+          symbolWidth = square ? symbolHeight : legend.symbolWidth;
+      item.legendSymbol = this.chart.renderer.rect(square ? (legend.symbolWidth - symbolHeight) / 2 : 0, legend.baseline - symbolHeight + 1, symbolWidth, symbolHeight, pick(legend.options.symbolRadius, symbolHeight / 2)).addClass('highcharts-point').attr({
+        zIndex: 3
+      }).add(item.legendGroup);
+    }
+  });
+}
+
 export default function (config, el) {
   if (config) {
     config.chart.renderTo = el || config.chart.renderTo;
@@ -22,6 +54,7 @@ export default function (config, el) {
       });
     }
 
+    drawLegendSymbolWrap();
     return new H.Chart(config);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "21.8.0",
+    "version": "21.8.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {