mdt-charts 1.20.0 → 1.20.1

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware.js

@@ -0,0 +1,9 @@
+export class LineLikeGeneratorDefinedMiddleware {
+    constructor(options) {
+        this.options = options;
+    }
+    handle(generator) {
+        generator.defined(d => this.options.definedFn(this.options.dataRowGetter(d), this.options.valueFieldNameGetter(d)));
+        return generator;
+    }
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorMiddleware.d.ts

@@ -0,0 +1,5 @@
+import { Line as ILine, Area as IArea } from "d3-shape";
+import { MdtChartsDataRow } from "../../../../config/config";
+export interface LineLikeGeneratorMiddleware {
+    handle(generator: ILine<MdtChartsDataRow> | IArea<MdtChartsDataRow>): ILine<MdtChartsDataRow> | IArea<MdtChartsDataRow>;
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorMiddleware.js

@@ -0,0 +1 @@
+export {};

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.d.ts

@@ -4,6 +4,7 @@ import { Block } from "../block/block";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
 import { Engine } from "../engine";
 export declare class TwoDimensionalManager implements ChartContentManager {
+    private canvasValueLabels?;
     render(engine: Engine, model: Model<TwoDimensionalOptionsModel>): void;
     updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -13,6 +13,7 @@ import { Bar } from "./bar/bar";
 import { BarHelper } from "./bar/barHelper";
 import { TwoDimRecordOverflowAlert } from "./extenders/twoDimRecordOverflowAlert";
 import { Line } from "./line/line";
+import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -38,6 +39,19 @@ export class TwoDimensionalManager {
             if (e.target === engine.block.getSvg().node())
                 engine.block.filterEventManager.clearKeysFor2D(options);
         });
+        this.canvasValueLabels = new CanvasValueLabels({
+            elementAccessors: {
+                getBlock: () => engine.block,
+            },
+            data: {
+                keyFieldName: options.data.keyField.name
+            },
+            canvas: {
+                keyAxisOrient: options.axis.key.orient,
+                valueLabels: options.valueLabels,
+            }
+        });
+        this.canvasValueLabels.render(scales, options.charts, engine.data, options.data);
     }
     updateData(block, model, data) {
         block.transitionManager.interruptTransitions();
@@ -63,6 +77,8 @@ export class TwoDimensionalManager {
             hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
             chartOrientation: options.orient
         });
+        if (this.canvasValueLabels)
+            this.canvasValueLabels.update(scales, options.charts, data, model.options.data);
     }
     updateColors(block, model) {
         Legend.get().updateColors(block, model.options);
@@ -72,7 +88,7 @@ export class TwoDimensionalManager {
             else if (chart.type === 'line')
                 Line.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
             else if (chart.type === 'area')
-                Area.updateColors(block, chart);
+                Area.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
         });
     }
     renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings, blockSize) {
@@ -86,7 +102,7 @@ export class TwoDimensionalManager {
             else if (chart.type === 'line')
                 Line.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             else if (chart.type === 'area')
-                Area.render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
+                Area.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
         });
         EmbeddedLabels.raiseGroups(block);
     }
@@ -103,7 +119,7 @@ export class TwoDimensionalManager {
                 proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             }
             else if (chart.type === 'area') {
-                proms = Area.update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
+                proms = Area.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
             }
             promises.push(...proms);
         });

package/lib/model/featuresModel/axisModel.js

@@ -19,7 +19,7 @@ export class AxisModel {
             cssClass: 'key-axis',
             ticks: axisConfig.ticks,
             labels: {
-                maxSize: AxisModel.getLabelSizeLegacy(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
+                maxSize: AxisModel.getLabelSize(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
                 position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length, axisConfig),
                 visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
                 defaultTooltip: tooltipSettings.position === 'fixed',
@@ -137,6 +137,8 @@ export class AxisModel {
         const sign = Math.sign(value);
         if (absValue < 10)
             return value;
+        if (absValue < 100)
+            return sign * Math.floor(absValue / 10) * 10;
         const valueStr = absValue.toString();
         const firstTwoDigits = Math.floor(absValue / Math.pow(10, valueStr.length - 2));
         const roundedFirstTwoDigits = firstTwoDigits < 10 ? firstTwoDigits : Math.floor(firstTwoDigits / 5) * 5;

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

@@ -0,0 +1,9 @@
+import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
+interface ValueLabelAlignment {
+    dominantBaseline: ValueLabelDominantBaseline;
+    textAnchor: ValueLabelAnchor;
+}
+export declare function getValueLabelY(scaledValue: number, keyAxisOrient: Orient, margin: BlockMargin): number;
+export declare function getValueLabelX(scaledValue: number, keyAxisOrient: Orient, margin: BlockMargin): number;
+export declare function calculateValueLabelAlignment(keyAxisOrient: Orient): ValueLabelAlignment;
+export {};

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

@@ -0,0 +1,33 @@
+const OFFSET_SIZE_PX = 10;
+export function getValueLabelY(scaledValue, keyAxisOrient, margin) {
+    switch (keyAxisOrient) {
+        case 'bottom':
+            return scaledValue - OFFSET_SIZE_PX + margin.top;
+        case 'top':
+            return scaledValue + OFFSET_SIZE_PX + margin.top;
+        default:
+            return scaledValue + margin.top;
+    }
+}
+export function getValueLabelX(scaledValue, keyAxisOrient, margin) {
+    switch (keyAxisOrient) {
+        case 'right':
+            return scaledValue - OFFSET_SIZE_PX + margin.left;
+        case 'left':
+            return scaledValue + OFFSET_SIZE_PX + margin.left;
+        default:
+            return scaledValue + margin.left;
+    }
+}
+export function calculateValueLabelAlignment(keyAxisOrient) {
+    switch (keyAxisOrient) {
+        case 'top':
+            return { dominantBaseline: "hanging", textAnchor: "middle" };
+        case "bottom":
+            return { dominantBaseline: "auto", textAnchor: "middle" };
+        case "left":
+            return { dominantBaseline: "middle", textAnchor: "start" };
+        case "right":
+            return { dominantBaseline: "middle", textAnchor: "end" };
+    }
+}

package/lib/model/helpers/modelHelper.d.ts

@@ -1,4 +1,5 @@
 export declare class ModelHelper {
+    private static readonly defaultBaseFontSize;
     private static baseFontSize;
     private static getBaseFontSize;
     static getSum(items: number[]): number;

package/lib/model/helpers/modelHelper.js

@@ -3,7 +3,7 @@ export class ModelHelper {
     static getBaseFontSize() {
         if (!this.baseFontSize)
             this.baseFontSize = parseInt(DomHelper.getCssPropertyValue(document.documentElement, '--chart-base-font-size'));
-        return this.baseFontSize;
+        return (!this.baseFontSize || isNaN(this.baseFontSize)) ? this.defaultBaseFontSize : this.baseFontSize;
     }
     static getSum(items) {
         return items.reduce((acc, item) => acc + item, 0);
@@ -17,7 +17,7 @@ export class ModelHelper {
         // Number width == lower case letter width
         const fontSize = this.getBaseFontSize();
         let score = 0;
-        const upperLetterScore = fontSize / 13;
+        const upperLetterScore = fontSize / 10;
         const lowerLetterScore = fontSize / 15;
         const digitScore = fontSize / 15;
         const otherSymbolScore = fontSize / 23;
@@ -37,3 +37,4 @@ export class ModelHelper {
         return score;
     }
 }
+ModelHelper.defaultBaseFontSize = 13;

package/lib/model/helpers/twoDimensionalModelHelper.d.ts

@@ -0,0 +1,5 @@
+import { MdtChartsDataRow, MdtChartsTwoDimensionalChart } from "../../config/config";
+import { MarkDotDatumItem } from "../model";
+export declare class TwoDimensionalModelHelper {
+    static shouldMarkerShow(chart: MdtChartsTwoDimensionalChart, dataRows: MdtChartsDataRow[], valueFieldName: string, currentRow: MarkDotDatumItem, keyFieldName: string): boolean;
+}

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -0,0 +1,16 @@
+export class TwoDimensionalModelHelper {
+    static shouldMarkerShow(chart, dataRows, valueFieldName, currentRow, keyFieldName) {
+        if (chart.markers.show || dataRows.length === 1)
+            return true;
+        const rowIndex = dataRows.findIndex(row => row[keyFieldName] === currentRow[keyFieldName]);
+        if (rowIndex === -1)
+            return false;
+        const isFirst = rowIndex === 0;
+        const isLast = rowIndex === dataRows.length - 1;
+        const previousRow = dataRows[rowIndex - 1];
+        const nextRow = dataRows[rowIndex + 1];
+        const hasNullNeighborsRows = !isFirst && !isLast &&
+            (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) === null && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) === null;
+        return (isFirst && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) === null) || (isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) === null) || hasNullNeighborsRows;
+    }
+}

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollision } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
@@ -10,6 +10,8 @@ export declare type DataOptions = {
     [option: string]: any;
 };
 export declare type UnitsFromConfig = "%" | "px";
+export declare type ValueLabelAnchor = "start" | "middle" | "end";
+export declare type ValueLabelDominantBaseline = "hanging" | "middle" | "auto";
 export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
 export interface Model<O = OptionsModel> {
     blockCanvas: BlockCanvas;
@@ -49,6 +51,7 @@ export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel
     additionalElements: AdditionalElementsOptions;
     orient: ChartOrientation;
     chartSettings: TwoDimChartElementsSettings;
+    valueLabels: TwoDimensionalValueLabels;
 }
 export interface PolarOptionsModel extends GraphicNotationOptionsModel {
     type: "polar";
@@ -171,6 +174,9 @@ interface LineLikeChartCurveOptions {
 interface BarLikeChartHatchOptions {
     on: boolean;
 }
+export interface TwoDimensionalValueLabels {
+    collision: ValueLabelsCollision;
+}
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;
@@ -215,14 +221,14 @@ export interface TwoDimensionalChartLegendLineModel extends Omit<TwoDimensionalL
     width: number;
 }
 interface TwoDimensionalLineLikeChartModel {
-    lineViewOptions: TwoDimensionalLineLikeChartViewModel;
+    lineLikeViewOptions: TwoDimensionalLineLikeChartViewModel;
     markersOptions: MarkersOptions;
 }
 interface TwoDimensionalLineLikeChartViewModel {
     dashedStyles: LineLikeChartDashOptions;
-    renderForKey: LineLikeChartRenderOptions;
+    renderForKey: LineLikeChartRenderFn;
 }
-export declare type LineLikeChartRenderOptions = (dataRow: MdtChartsDataRow, valueFieldName: string) => boolean;
+export declare type LineLikeChartRenderFn = (dataRow: MdtChartsDataRow, valueFieldName: string) => boolean;
 interface TwoDimensionalBarLikeChartModel {
     barViewOptions: TwoDimensionalBarLikeChartViewModel;
 }
@@ -236,6 +242,7 @@ export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLine
     embeddedLabels: EmbeddedLabelTypeModel;
     isSegmented: boolean;
     legend: ChartLegendModel;
+    valueLabels?: TwoDimChartValueLabelsOptions;
 }
 export interface IntervalChartModel extends Omit<ChartModel, "legend"> {
     type: IntervalChartType;
@@ -253,10 +260,26 @@ export interface TwoDimensionalChartDataModel {
 export interface ValueField extends Field {
     title: string;
 }
-export interface MarkersOptions {
+export interface TwoDimChartValueLabelsOptions {
     show: boolean;
+    handleX: (scaledValue: number) => number;
+    handleY: (scaledValue: number) => number;
+    textAnchor: ValueLabelAnchor;
+    dominantBaseline: ValueLabelDominantBaseline;
+    format: ValueLabelsFormatter;
+}
+export declare type ValueLabelsFormatter = (value: number) => string;
+export interface MarkersOptions {
+    show: MarkersOptionsShow;
     styles: MarkersStyleOptions;
 }
+export declare type MarkDotDatumItem = MdtChartsDataRow | {
+    "1": any;
+} & Array<number>;
+export declare type MarkersOptionsShow = (options: {
+    row: MarkDotDatumItem;
+    valueFieldName: string;
+}) => boolean;
 export interface MarkersStyleOptions {
     highlighted: MarkerStyle;
     normal: MarkerStyle;

package/lib/model/modelInstance/configReader.d.ts

@@ -1,4 +1,4 @@
-import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup } from "../../config/config";
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup, ValueLabelsFormatter } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { DataRepositoryModel } from "../../model/modelInstance/dataModel/dataRepository";
 interface BaseConfigReader {
@@ -20,6 +20,7 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
         chartType: TwoDimensionalChartType;
     }[];
     containsSecondaryAxis(): boolean;
+    getValueLabelFormatterForChart(chartIndex: number): ValueLabelsFormatter;
     private calculateBiggestValueAndDecremented;
     private calculateAxisLabelFormatter;
 }

package/lib/model/modelInstance/configReader.js

@@ -54,6 +54,23 @@ export class TwoDimConfigReader {
     containsSecondaryAxis() {
         return !!this.options.axis.valueSecondary && this.options.charts.some(chart => chart.data.valueGroup === 'secondary');
     }
+    getValueLabelFormatterForChart(chartIndex) {
+        var _a, _b, _c;
+        const chart = this.options.charts[chartIndex];
+        const axis = this.options.axis;
+        if (chart.valueLabels.format)
+            return chart.valueLabels.format;
+        if (chart.data.valueGroup === "secondary") {
+            if ((_a = axis.valueSecondary.labels) === null || _a === void 0 ? void 0 : _a.format)
+                return axis.valueSecondary.labels.format;
+            else if ((_b = axis.value.labels) === null || _b === void 0 ? void 0 : _b.format)
+                return axis.value.labels.format;
+        }
+        else if ((_c = axis.value.labels) === null || _c === void 0 ? void 0 : _c.format)
+            return axis.value.labels.format;
+        const valueFieldFormat = chart.data.valueFields[0].format;
+        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+    }
     calculateBiggestValueAndDecremented(repository, domain, fields) {
         const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
         if (resolvedDomain && resolvedDomain.end !== -1) {

package/lib/model/notations/twoDimensionalModel.js

@@ -5,12 +5,14 @@ import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 import { getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
+import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
+        var _a;
         let secondaryScaleValueInfo;
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
-        const resolvedTitle = getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows());
         const scaleModel = new ScaleModel();
         const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
@@ -20,19 +22,21 @@ export class TwoDimensionalModel {
             secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
             secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
         }
+        const keyAxis = AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0));
         return {
             legend: canvasModel.legendCanvas.getModel(),
-            title: resolvedTitle,
+            title: getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows()),
             selectable: !!options.selectable,
             orient: options.orientation,
             scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
-            axis: Object.assign({ key: AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)), value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
+            axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
             type: options.type,
             data: Object.assign({}, options.data),
-            charts: this.getChartsModel(options.charts, options.orientation, designerConfig, modelInstance.dataModel.repository),
+            charts: this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name),
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
-            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
+            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
+            valueLabels: (_a = options.valueLabels) !== null && _a !== void 0 ? _a : { collision: { mode: "none" } }
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
@@ -57,22 +61,14 @@ export class TwoDimensionalModel {
             lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
         };
     }
-    static getChartsModel(charts, chartOrientation, designerConfig, dataModelRep) {
+    static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName) {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            chartsModel.push({
-                type: chart.type,
-                isSegmented: chart.isSegmented,
-                data: Object.assign({}, chart.data),
-                tooltip: chart.tooltip,
-                cssClasses: ChartStyleModelService.getCssClasses(index),
-                style: styleModel.getChartStyle(chart, index),
-                embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
-                markersOptions: {
-                    show: dataModelRep.getScopedRows().length === 1 ? true : chart.markers.show,
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            chartsModel.push(Object.assign({ type: chart.type, isSegmented: chart.isSegmented, data: Object.assign({}, chart.data), tooltip: chart.tooltip, cssClasses: ChartStyleModelService.getCssClasses(index), style: styleModel.getChartStyle(chart, index), embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation), markersOptions: {
+                    show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
                             size: { radius: (_c = (_b = (_a = designerConfig.canvas.markers) === null || _a === void 0 ? void 0 : _a.highlighted) === null || _b === void 0 ? void 0 : _b.radius) !== null && _c !== void 0 ? _c : 4, borderSize: '3.5px' }
@@ -84,15 +80,19 @@ export class TwoDimensionalModel {
                             }
                         }
                     }
-                },
-                lineViewOptions: {
+                }, lineLikeViewOptions: {
                     dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
-                },
-                barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } },
-                legend: getLegendMarkerOptions(chart),
-                index
-            });
+                }, barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } }, legend: getLegendMarkerOptions(chart), index }, (((_p = chart.valueLabels) === null || _p === void 0 ? void 0 : _p.on) && {
+                valueLabels: {
+                    show: true,
+                    handleX: (scaledValue) => getValueLabelX(scaledValue, keyAxisOrient, canvasModel.getMargin()),
+                    handleY: (scaledValue) => getValueLabelY(scaledValue, keyAxisOrient, canvasModel.getMargin()),
+                    textAnchor: calculateValueLabelAlignment(keyAxisOrient).textAnchor,
+                    dominantBaseline: calculateValueLabelAlignment(keyAxisOrient).dominantBaseline,
+                    format: configReader.getValueLabelFormatterForChart(index),
+                }
+            })));
         });
         return chartsModel;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.20.0",
+  "version": "1.20.1",
   "description": "",
   "main": "lib/main.js",
   "scripts": {