mdt-charts 1.31.0 → 1.33.0

package/lib/config/config.d.ts

@@ -294,15 +294,29 @@ export interface TwoDimensionalChartData {
     valueFields: TwoDimValueField[];
     valueGroup?: TwoDimensionalValueGroup;
 }
-export declare type ValueLabelsPositionMode = "after" | "center";
+export declare type ValueLabelsPositionOptions = {
+    mode: "afterHead" | "beforeHead";
+    /** @default 10 */
+    offsetSize?: number;
+} | {
+    mode?: "center";
+};
+export declare type ValueLabelsPositionMode = ValueLabelsPositionOptions["mode"];
+export interface ValueLabelsContentSetterOptions {
+    dataRow: MdtChartsDataRow;
+    field: MdtChartsValueField;
+}
+export declare type ValueLabelsContentSetter = (options: ValueLabelsContentSetterOptions) => {
+    textContent: string | number;
+};
 export interface TwoDimensionalChartValueLabels {
     on: boolean;
-    position?: {
-        mode?: ValueLabelsPositionMode;
-    };
+    position?: ValueLabelsPositionOptions;
     format?: ValueLabelsFormatter;
     rotation?: ValueLabelsRotationOptions;
     handleElement?: ValueLabelsHandleElement;
+    renderForFields?: MdtChartsFieldName[];
+    setContent?: ValueLabelsContentSetter;
 }
 export declare type ValueLabelsHandleElement = (elInfo: {
     element: SVGTextElement;

package/lib/engine/features/valueLabels/valueLabels.js

@@ -24,14 +24,18 @@ export class ChartValueLabels {
     render(scales, data) {
         if (this.chart.isSegmented) {
             const preparedData = getStackedData(data, this.chart);
-            preparedData.forEach((segment, segmentIndex) => {
+            preparedData
+                .filter((segment) => { var _a; return this.options.forFields.includes((_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName); })
+                .forEach((segment, segmentIndex) => {
                 if (!segment[0])
                     return;
                 this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, "1", (d) => d.data);
             });
         }
         else {
-            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+            this.chart.data.valueFields
+                .filter((field) => this.options.forFields.includes(field.name))
+                .forEach((valueField, vfIndex) => {
                 this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, (d) => d);
             });
         }
@@ -41,14 +45,18 @@ export class ChartValueLabels {
         this.options = updatedOptions;
         if (this.chart.isSegmented) {
             const preparedData = getStackedData(newData, this.chart);
-            preparedData.forEach((segment, segmentIndex) => {
+            preparedData
+                .filter((segment) => { var _a; return this.options.forFields.includes((_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName); })
+                .forEach((segment, segmentIndex) => {
                 var _a;
                 const promise = this.updateByGroupIndex(scales, segmentIndex, segment, "1", (d) => d.data, (_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName);
                 updatePromises.push(promise);
             });
         }
         else {
-            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+            this.chart.data.valueFields
+                .filter((field) => this.options.forFields.includes(field.name))
+                .forEach((valueField, vfIndex) => {
                 const promise = this.updateByGroupIndex(scales, vfIndex, newData, valueField.name, (d) => d, valueField.name);
                 updatePromises.push(promise);
             });
@@ -59,7 +67,7 @@ export class ChartValueLabels {
         let valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data).enter().append("text");
         valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
         const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor);
-        this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
+        this.setAttrs(valueLabels, attrs, valueFieldName, this.options.setContent, dataRowAccessor);
         this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
     }
     updateByGroupIndex(scales, groupIndex, data, datumField, dataRowAccessor, valueFieldName) {
@@ -74,21 +82,34 @@ export class ChartValueLabels {
             let newValueLabels = valueLabels.enter().append("text");
             newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
             const mergedValueLabels = newValueLabels.merge(valueLabels);
-            this.setAttrs(newValueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
+            this.setAttrs(newValueLabels, attrs, valueFieldName, this.options.setContent, dataRowAccessor);
             this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
-            this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor, true, resolve);
+            this.setAttrs(valueLabels, attrs, valueFieldName, this.options.setContent, dataRowAccessor, true, resolve);
         });
     }
     getAllValueLabelsOfChart(vfIndex) {
         const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
         return block.selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
     }
-    setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
+    setAttrs(valueLabels, attrs, valueFieldName, setContent, dataRowAccessor, animate = false, onEndAnimation) {
         const animationName = "labels-updating";
         let selection = valueLabels
-            .text((d) => formatter(dataRowAccessor(d)[valueFieldName]))
             .attr("dominant-baseline", attrs.dominantBaseline)
             .attr("text-anchor", attrs.textAnchor);
+        selection.each(function (d) {
+            select(this).selectAll("tspan").remove();
+            const content = setContent({ dataRow: dataRowAccessor(d), fieldName: valueFieldName });
+            content.rows.forEach((row, rowIndex) => {
+                const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+                // Pass empty string to count this element for correct working of dy
+                // https://stackoverflow.com/questions/34078357/empty-tspan-not-rendered-dy-value-ignored
+                tspan.textContent = row.toString() || " ";
+                if (rowIndex !== 0)
+                    tspan.setAttribute("dy", `1em`);
+                tspan.setAttribute("x", attrs.x(d).toString());
+                this.appendChild(tspan);
+            });
+        });
         if (animate) {
             selection = selection
                 .interrupt(animationName)

package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.d.ts

@@ -1,21 +1,22 @@
 import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
 import { BoundingRect } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
-import { Size, ValueLabelsPositionMode, ValueLabelsRotationOptions } from "../../../config/config";
+import { MdtChartsDataRow, Size, ValueLabelsPositionMode, ValueLabelsPositionOptions, ValueLabelsRotationOptions } from "../../../config/config";
 interface ValueLabelAlignment {
     dominantBaseline: ValueLabelDominantBaseline;
     textAnchor: ValueLabelAnchor;
 }
-export declare const OFFSET_SIZE_PX = 10;
+export declare const VALUE_LABEL_OFFSET_ABS_SIZE_PX = 10;
 export declare const BORDER_OFFSET_SIZE_PX = 2;
 export declare class ValueLabelCoordinateCalculator {
     private readonly keyAxisOrient;
     private readonly margin;
     private readonly offsetSizePx;
-    constructor(positionMode: ValueLabelsPositionMode | undefined, keyAxisOrient: Orient, margin: BlockMargin);
+    constructor(positionOptions: ValueLabelsPositionOptions | undefined, keyAxisOrient: Orient, margin: BlockMargin);
     getValueLabelY(scaledValue: number): number;
     getValueLabelX(scaledValue: number): number;
 }
 export declare function calculateValueLabelAlignment(keyAxisOrient: Orient, positionMode?: ValueLabelsPositionMode, rotation?: ValueLabelsRotationOptions): ValueLabelAlignment;
+export declare function handleScaledValue(dataRow: MdtChartsDataRow, datumField: string, isSegmented: boolean, positionMode?: ValueLabelsPositionMode): number;
 export declare function hasCollisionLeftSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
 export declare function hasCollisionRightSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
 export declare function hasCollisionTopSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;

package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.js

@@ -1,10 +1,19 @@
-export const OFFSET_SIZE_PX = 10;
+export const VALUE_LABEL_OFFSET_ABS_SIZE_PX = 10;
 export const BORDER_OFFSET_SIZE_PX = 2;
 export class ValueLabelCoordinateCalculator {
-    constructor(positionMode, keyAxisOrient, margin) {
+    constructor(positionOptions, keyAxisOrient, margin) {
         this.keyAxisOrient = keyAxisOrient;
         this.margin = margin;
-        this.offsetSizePx = positionMode === "center" ? 0 : OFFSET_SIZE_PX;
+        let offsetAbsSize = VALUE_LABEL_OFFSET_ABS_SIZE_PX;
+        if (((positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.mode) === "beforeHead" || (positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.mode) === "afterHead") &&
+            (positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.offsetSize) != null)
+            offsetAbsSize = positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.offsetSize;
+        if (!(positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.mode) || positionOptions.mode === "afterHead")
+            this.offsetSizePx = offsetAbsSize;
+        else if (positionOptions.mode === "beforeHead")
+            this.offsetSizePx = -offsetAbsSize;
+        else
+            this.offsetSizePx = 0;
     }
     getValueLabelY(scaledValue) {
         switch (this.keyAxisOrient) {
@@ -28,7 +37,9 @@ export class ValueLabelCoordinateCalculator {
     }
 }
 export function calculateValueLabelAlignment(keyAxisOrient, positionMode, rotation) {
-    if ((positionMode !== null && positionMode !== void 0 ? positionMode : "after") === "after" && !(rotation === null || rotation === void 0 ? void 0 : rotation.angle)) {
+    if (rotation === null || rotation === void 0 ? void 0 : rotation.angle)
+        return { dominantBaseline: "middle", textAnchor: "middle" };
+    if (!positionMode || positionMode === "afterHead") {
         switch (keyAxisOrient) {
             case "top":
                 return { dominantBaseline: "hanging", textAnchor: "middle" };
@@ -40,9 +51,30 @@ export function calculateValueLabelAlignment(keyAxisOrient, positionMode, rotati
                 return { dominantBaseline: "middle", textAnchor: "end" };
         }
     }
-    else {
-        return { dominantBaseline: "middle", textAnchor: "middle" };
+    else if (positionMode === "beforeHead") {
+        switch (keyAxisOrient) {
+            case "top":
+                return { dominantBaseline: "auto", textAnchor: "middle" };
+            case "bottom":
+                return { dominantBaseline: "hanging", textAnchor: "middle" };
+            case "left":
+                return { dominantBaseline: "middle", textAnchor: "end" };
+            case "right":
+                return { dominantBaseline: "middle", textAnchor: "start" };
+        }
+    }
+    return { dominantBaseline: "middle", textAnchor: "middle" };
+}
+export function handleScaledValue(dataRow, datumField, isSegmented, positionMode) {
+    if (!positionMode || positionMode === "afterHead" || positionMode === "beforeHead")
+        return dataRow[datumField];
+    if (positionMode === "center") {
+        if (isSegmented)
+            return dataRow[datumField] - (dataRow[datumField] - dataRow["0"]) / 2;
+        else
+            return dataRow[datumField] / 2;
     }
+    throw new Error("Invalid position mode");
 }
 export function hasCollisionLeftSide(labelClientRect, margin) {
     return labelClientRect.x - labelClientRect.width / 2 <= margin.left;

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -3,7 +3,7 @@ import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendM
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
 import { AxisType } from "../../modelBuilder";
 import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
-import { OFFSET_SIZE_PX } from "../../featuresModel/valueLabelsModel/valueLabelsModel";
+import { VALUE_LABEL_OFFSET_ABS_SIZE_PX } from "../../featuresModel/valueLabelsModel/valueLabelsModel";
 import { ScaleModel } from "../../featuresModel/scaleModel/scaleModel";
 import { Scale } from "../../../engine/features/scale/scale";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 12;
@@ -110,7 +110,7 @@ export class TwoDimMarginModel {
             top: "bottom",
             bottom: "top"
         };
-        canvasModel.increaseMarginSide(axisMarginMapping[keyAxisOrient], valueLabelFontSize + OFFSET_SIZE_PX);
+        canvasModel.increaseMarginSide(axisMarginMapping[keyAxisOrient], valueLabelFontSize + VALUE_LABEL_OFFSET_ABS_SIZE_PX);
     }
     getValueAxisLabels(scaleModel) {
         const scale = Scale.getScaleValue(scaleModel);

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement, MdtChartsFieldName } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 import { BoundingRect } from "../engine/features/valueLabelsCollision/valueLabelsCollision";
 declare type AxisType = "key" | "value";
@@ -398,13 +398,21 @@ export interface TwoDimensionalChartDataModel {
 export interface ValueField extends Field {
     title: string;
 }
+export interface ValueLabelsInnerContentSetterOptions {
+    dataRow: MdtChartsDataRow;
+    fieldName: MdtChartsFieldName;
+}
+export declare type ValueLabelsInnerContentSetter = (options: ValueLabelsInnerContentSetterOptions) => {
+    rows: (string | number)[];
+};
 export interface TwoDimChartValueLabelsOptions {
     show: boolean;
     handleX: (scaledValue: number) => number;
     handleY: (scaledValue: number) => number;
     textAnchor: ValueLabelAnchor;
+    forFields: MdtChartsFieldName[];
     dominantBaseline: ValueLabelDominantBaseline;
-    format: ValueLabelsFormatter;
+    setContent: ValueLabelsInnerContentSetter;
     handleScaledValue: (dataRow: MdtChartsDataRow, datumField: string) => number;
     rotation?: ValueLabelsRotationOptions;
     handleElement?: ValueLabelsHandleElement;

package/lib/model/modelInstance/configReader.js

@@ -73,7 +73,7 @@ export class TwoDimConfigReader {
         return this.options.charts.some((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.on; });
     }
     areValueLabelsNeedIncreaseMargin() {
-        return !this.options.charts.every((chart) => { var _a, _b; return ((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) === "center"; });
+        return this.options.charts.some((chart) => { var _a, _b, _c, _d; return !((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) || ((_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode) === "afterHead"; });
     }
     getValueLabelsStyleModel() {
         var _a, _b, _c, _d, _e, _f, _g, _h;

package/lib/model/notations/twoDimensionalModel.js

@@ -4,7 +4,7 @@ import { AxisModel } from "../featuresModel/axis/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
-import { calculateValueLabelAlignment, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { calculateValueLabelAlignment, handleScaledValue, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 import { createRecordOverflowModel } from "../featuresModel/recordOverflowModel/recordOverflowModel";
@@ -95,10 +95,10 @@ export class TwoDimensionalModel {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
             const style = styleModel.getChartStyle(chart, index);
-            const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode, keyAxisOrient, canvasModel.getMargin());
-            const valueLabelsAlignment = calculateValueLabelAlignment(keyAxisOrient, (_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode, (_e = chart.valueLabels) === null || _e === void 0 ? void 0 : _e.rotation);
+            const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position, keyAxisOrient, canvasModel.getMargin());
+            const valueLabelsAlignment = calculateValueLabelAlignment(keyAxisOrient, (_c = (_b = chart.valueLabels) === null || _b === void 0 ? void 0 : _b.position) === null || _c === void 0 ? void 0 : _c.mode, (_d = chart.valueLabels) === null || _d === void 0 ? void 0 : _d.rotation);
             chartsModel.push({
                 type: chart.type,
                 isSegmented: chart.isSegmented,
@@ -111,44 +111,50 @@ export class TwoDimensionalModel {
                     styles: {
                         highlighted: {
                             size: {
-                                radius: (_h = (_g = (_f = designerConfig.canvas.markers) === null || _f === void 0 ? void 0 : _f.highlighted) === null || _g === void 0 ? void 0 : _g.radius) !== null && _h !== void 0 ? _h : 4,
+                                radius: (_g = (_f = (_e = designerConfig.canvas.markers) === null || _e === void 0 ? void 0 : _e.highlighted) === null || _f === void 0 ? void 0 : _f.radius) !== null && _g !== void 0 ? _g : 4,
                                 borderSize: "3.5px"
                             }
                         },
                         normal: {
                             size: {
-                                radius: (_l = (_k = (_j = designerConfig.canvas.markers) === null || _j === void 0 ? void 0 : _j.normal) === null || _k === void 0 ? void 0 : _k.radius) !== null && _l !== void 0 ? _l : 3,
-                                borderSize: `${(_p = (_o = (_m = designerConfig.canvas.markers) === null || _m === void 0 ? void 0 : _m.normal) === null || _o === void 0 ? void 0 : _o.borderSize) !== null && _p !== void 0 ? _p : 2}px`
+                                radius: (_k = (_j = (_h = designerConfig.canvas.markers) === null || _h === void 0 ? void 0 : _h.normal) === null || _j === void 0 ? void 0 : _j.radius) !== null && _k !== void 0 ? _k : 3,
+                                borderSize: `${(_o = (_m = (_l = designerConfig.canvas.markers) === null || _l === void 0 ? void 0 : _l.normal) === null || _m === void 0 ? void 0 : _m.borderSize) !== null && _o !== void 0 ? _o : 2}px`
                             }
                         }
                     }
                 },
                 lineLikeViewOptions: {
-                    dashedStyles: parseDashStyles((_q = chart.lineStyles) === null || _q === void 0 ? void 0 : _q.dash),
-                    strokeWidth: (_s = (_r = chart.lineStyles) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : LINE_CHART_DEFAULT_WIDTH,
+                    dashedStyles: parseDashStyles((_p = chart.lineStyles) === null || _p === void 0 ? void 0 : _p.dash),
+                    strokeWidth: (_r = (_q = chart.lineStyles) === null || _q === void 0 ? void 0 : _q.width) !== null && _r !== void 0 ? _r : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
                 barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {
-                    show: (_u = (_t = chart.valueLabels) === null || _t === void 0 ? void 0 : _t.on) !== null && _u !== void 0 ? _u : false,
+                    show: (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.on) !== null && _t !== void 0 ? _t : false,
                     handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
                     handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
                     handleScaledValue: (dataRow, datumField) => {
-                        var _a, _b, _c, _d;
-                        if (!((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) || ((_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode) === "after")
-                            return dataRow[datumField];
-                        if (chart.isSegmented)
-                            return dataRow[datumField] - (dataRow[datumField] - dataRow["0"]) / 2;
-                        else
-                            return dataRow[datumField] / 2;
+                        var _a, _b;
+                        return handleScaledValue(dataRow, datumField, chart.isSegmented, (_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode);
                     },
                     textAnchor: valueLabelsAlignment.textAnchor,
                     dominantBaseline: valueLabelsAlignment.dominantBaseline,
-                    format: configReader.getValueLabelFormatterForChart(index),
-                    rotation: (_v = chart.valueLabels) === null || _v === void 0 ? void 0 : _v.rotation,
-                    handleElement: (_w = chart.valueLabels) === null || _w === void 0 ? void 0 : _w.handleElement
+                    rotation: (_u = chart.valueLabels) === null || _u === void 0 ? void 0 : _u.rotation,
+                    handleElement: (_v = chart.valueLabels) === null || _v === void 0 ? void 0 : _v.handleElement,
+                    forFields: (_x = (_w = chart.valueLabels) === null || _w === void 0 ? void 0 : _w.renderForFields) !== null && _x !== void 0 ? _x : chart.data.valueFields.map((field) => field.name),
+                    setContent: ({ dataRow, fieldName }) => {
+                        var _a;
+                        if ((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.setContent) {
+                            const content = chart.valueLabels.setContent({
+                                dataRow,
+                                field: chart.data.valueFields.find((field) => field.name === fieldName)
+                            });
+                            return { rows: content.textContent.toString().split("\n") };
+                        }
+                        return { rows: [configReader.getValueLabelFormatterForChart(index)(dataRow[fieldName])] };
+                    }
                 },
                 areaViewOptions: getAreaViewOptions(chart, index, style, modelInstance.version.getVersionNumber()),
                 dotViewOptions: {
@@ -156,7 +162,7 @@ export class TwoDimensionalModel {
                         type: "line",
                         handleEndCoordinate: (v) => v + 2,
                         handleStartCoordinate: (v) => v - 2,
-                        width: (_z = (_y = (_x = chart.dotLikeStyles) === null || _x === void 0 ? void 0 : _x.shape) === null || _y === void 0 ? void 0 : _y.width) !== null && _z !== void 0 ? _z : LINE_CHART_DEFAULT_WIDTH
+                        width: (_0 = (_z = (_y = chart.dotLikeStyles) === null || _y === void 0 ? void 0 : _y.shape) === null || _z === void 0 ? void 0 : _z.width) !== null && _0 !== void 0 ? _0 : LINE_CHART_DEFAULT_WIDTH
                     }
                 }
             });

package/lib/style/charts-main.css

@@ -290,4 +290,4 @@
 /* Value Labels */
 .mdt-charts-value-label {
     letter-spacing: -0.4px;
-}
+}

package/lib/style/charts-main.less

@@ -290,4 +290,4 @@
 /* Value Labels */
 .mdt-charts-value-label {
     letter-spacing: -0.4px;
-}
+}

package/package.json

@@ -1,12 +1,11 @@
 {
 	"name": "mdt-charts",
-	"version": "1.31.0",
+	"version": "1.33.0",
 	"description": "",
 	"main": "lib/main.js",
 	"scripts": {
-		"dev": "npx webpack --mode development",
+		"dev": "npx webpack --mode development --watch",
 		"build": "npx webpack --mode production",
-		"watch": "npx webpack --mode development --watch",
 		"test": "jest",
 		"build-lib": "shx rm -rf lib && npm run build-ts && npm run build-style",
 		"build-ts": "npx tsc -p tsconfig.production.json",