apexcharts 8.2.0 → 8.3.0

package/src/charts/common/bar/DataLabels.js

@@ -2,7 +2,6 @@
 import Graphics from '../../../modules/Graphics'
 import DataLabels from '../../../modules/DataLabels'
 import { resolveDataLabelOffset } from '../../../modules/helpers/DataLabelOffset'
-import { datumKey } from '../../../modules/animations/LengthTransition'
 
 export default class BarDataLabels {
   /**
@@ -42,6 +41,7 @@ export default class BarDataLabels {
       barYPosition,
       visibleSeries,
       hl,
+      noLabel,
     } = opts
     const w = this.w
     const graphics = new Graphics(this.barCtx.w)
@@ -224,19 +224,21 @@ export default class BarDataLabels {
       }
     }
 
-    dataLabels = this.drawCalculatedDataLabels({
-      x: dataLabelsPos.dataLabelsX,
-      y: dataLabelsPos.dataLabelsY,
-      neg: params.neg,
-      val,
-      text,
-      i: realIndex,
-      j,
-      barWidth: params.barWidth,
-      barHeight: params.barHeight,
-      textRects,
-      dataLabelsConfig,
-    })
+    dataLabels = noLabel
+      ? null
+      : this.drawCalculatedDataLabels({
+          x: dataLabelsPos.dataLabelsX,
+          y: dataLabelsPos.dataLabelsY,
+          neg: params.neg,
+          val,
+          text,
+          i: realIndex,
+          j,
+          barWidth: params.barWidth,
+          barHeight: params.barHeight,
+          textRects,
+          dataLabelsConfig,
+        })
 
     if (
       w.config.chart.stacked &&
@@ -327,8 +329,8 @@ export default class BarDataLabels {
   }
 
   /**
-   * The running stack at this column's x (BarStacked `tops`, columns only) on
-   * a numeric axis, where columns stack by x rather than by index.
+   * The running stack at this bar's x (BarStacked `tops`) on a numeric axis,
+   * where bars stack by x rather than by index.
    * @param {number} realIndex @param {number} j
    */
   xStackTop(realIndex, j) {
@@ -341,6 +343,22 @@ export default class BarDataLabels {
     )
   }
 
+  /**
+   * The stacked total's text box, measured in the total's own font.
+   * @param {number} realIndex @param {number} j
+   */
+  totalRects(realIndex, j) {
+    const s = this.barCtx.barOptions.dataLabels.total.style
+    return new Graphics(this.w).getTextRects(
+      this.getStackedTotalDataLabel({ realIndex, j }),
+      s.fontSize,
+      s.fontFamily,
+      undefined,
+      true,
+      s.fontWeight,
+    )
+  }
+
   /** @param {{realIndex: any, j: any}} opts */
   getStackedTotalDataLabel({ realIndex, j }) {
     const w = this.w
@@ -364,7 +382,6 @@ export default class BarDataLabels {
   calculateColumnsDataLabelsPosition(opts) {
     const w = this.w
     let {
-      i,
       j,
       realIndex,
       y,
@@ -374,7 +391,6 @@ export default class BarDataLabels {
       textRects,
       dataLabelsX,
       dataLabelsY,
-      dataLabelsConfig,
       barDataLabelsConfig,
       barTotalDataLabelsConfig,
       strokeWidth,
@@ -392,7 +408,7 @@ export default class BarDataLabels {
       w.config.plotOptions.bar.dataLabels.orientation === 'vertical'
 
     const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
-      i,
+      i: realIndex,
       j,
     })
 
@@ -423,7 +439,7 @@ export default class BarDataLabels {
         dataLabelsX + textRects.height / 2 - strokeWidth / 2 - offsetDLX
     }
 
-    const valIsNegative = opts.neg ?? w.seriesData.series[i][j] < 0
+    const valIsNegative = opts.neg ?? w.seriesData.series[realIndex][j] < 0
 
     let newY = y
     if (this.barCtx.isReversed) {
@@ -505,28 +521,17 @@ export default class BarDataLabels {
     if (this.hlt) lowestPrevY = this.hlt.edge
 
     if (this.drawsStackedTotal(realIndex) && barTotalDataLabelsConfig.enabled) {
-      const ADDITIONAL_OFFY = 18
-
-      const graphics = new Graphics(this.barCtx.w)
-      const totalLabeltextRects = graphics.getTextRects(
-        this.getStackedTotalDataLabel({ realIndex, j }),
-        dataLabelsConfig.fontSize,
-      )
+      // The baseline sits clear of the stack end by a share of the text
+      // height, so a large total neither sinks into its own stack nor floats
+      // off it (a fixed 18px suited 11px text only).
+      const h = this.totalRects(realIndex, j).height
 
       if (valIsNegative) {
         totalDataLabelsY =
-          lowestPrevY -
-          totalLabeltextRects.height / 2 -
-          offY -
-          barTotalDataLabelsConfig.offsetY +
-          ADDITIONAL_OFFY
+          lowestPrevY + h * 0.77 - offY - barTotalDataLabelsConfig.offsetY
       } else {
         totalDataLabelsY =
-          lowestPrevY +
-          totalLabeltextRects.height +
-          offY +
-          barTotalDataLabelsConfig.offsetY -
-          ADDITIONAL_OFFY
+          lowestPrevY - h * 0.3 + offY + barTotalDataLabelsConfig.offsetY
       }
 
       // width divided into equal parts
@@ -575,7 +580,6 @@ export default class BarDataLabels {
     const w = this.w
     let {
       x,
-      i,
       j,
       realIndex,
       bcy,
@@ -593,7 +597,7 @@ export default class BarDataLabels {
 
     const dataPointsDividedHeight = w.layout.gridHeight / w.globals.dataPoints
     const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({
-      i,
+      i: realIndex,
       j,
     })
 
@@ -632,7 +636,7 @@ export default class BarDataLabels {
     let totalDataLabelsY
     let totalDataLabelsAnchor = 'start'
 
-    const valIsNegative = opts.neg ?? w.seriesData.series[i][j] < 0
+    const valIsNegative = opts.neg ?? w.seriesData.series[realIndex][j] < 0
 
     let newX = x
     if (this.barCtx.isReversed) {
@@ -678,7 +682,13 @@ export default class BarDataLabels {
     let lowestPrevX = newX
     // This series' own group only — see the matching note in the column path.
     const totalGroupCtx = this.getTotalGroupContext(realIndex)
-    const stacks = /** @type {any} */ (this.barCtx).stacks || []
+    const top = this.xStackTop(realIndex, j)
+    const stacks = top ? [] : /** @type {any} */ (this.barCtx).stacks || []
+    if (top) {
+      lowestPrevX = valIsNegative
+        ? Math.min(newX, top[4])
+        : Math.max(newX, top[5])
+    }
     stacks.forEach((/** @type {any} */ g, /** @type {number} */ gi) => {
       if (totalGroupCtx && gi !== totalGroupCtx.groupIndex) return
       g.prevX.forEach((/** @type {any} */ arr) => {
@@ -692,11 +702,7 @@ export default class BarDataLabels {
     if (this.hlt) lowestPrevX = this.hlt.edge
 
     if (this.drawsStackedTotal(realIndex) && barTotalDataLabelsConfig.enabled) {
-      const graphics = new Graphics(this.barCtx.w)
-      const totalLabeltextRects = graphics.getTextRects(
-        this.getStackedTotalDataLabel({ realIndex, j }),
-        dataLabelsConfig.fontSize,
-      )
+      const totalLabeltextRects = this.totalRects(realIndex, j)
       if (valIsNegative) {
         totalDataLabelsX =
           lowestPrevX - strokeWidth - offX - barTotalDataLabelsConfig.offsetX
@@ -817,12 +823,13 @@ export default class BarDataLabels {
     // way down while every other slice keeps its number.
     const isSeriesCollapsing =
       (w.globals.collapsingSeriesIndices || []).indexOf(i) > -1
+    const dlKey = `${i}::${this.barCtx._keys(i)[j]}`
 
     if (isSeriesCollapsing) {
       // Its series has already been zero-filled, so `val` is 0 (or blank) even
       // though the bar on screen is still at its old height. Label it with what
       // it was until it has finished shrinking away.
-      const prev = w.globals.prevDataLabels?.get(`${i}::${datumKey(w, i, j)}`)
+      const prev = w.globals.prevDataLabels?.get(dlKey)
       if (prev && isFinite(prev.val)) {
         val = prev.val
         text = undefined
@@ -840,10 +847,7 @@ export default class BarDataLabels {
       // frame across a data update. Only scalar (non-range) values count up.
       const dlCfg = w.config.dataLabels
       if (dlCfg.animate?.enabled || dlCfg.countUp?.enabled) {
-        elDataLabelsWrap.node.setAttribute(
-          'data:dlKey',
-          `${i}::${datumKey(w, i, j)}`,
-        )
+        elDataLabelsWrap.node.setAttribute('data:dlKey', dlKey)
         elDataLabelsWrap.node.setAttribute('data:dlJ', String(j))
         if (typeof val === 'number' && isFinite(val)) {
           elDataLabelsWrap.node.setAttribute('data:dlVal', String(val))
@@ -865,34 +869,26 @@ export default class BarDataLabels {
         text = ''
       }
 
-      const valIsNegative = neg ?? w.seriesData.series[i][j] < 0
-      const position = w.config.plotOptions.bar.dataLabels.position
+      // A vertical label's anchor is resolved per label. Writing it into the
+      // shared config re-anchored every later label, line labels included.
+      let anchor = dataLabelsConfig.textAnchor
       if (w.config.plotOptions.bar.dataLabels.orientation === 'vertical') {
-        if (position === 'top') {
-          if (valIsNegative) dataLabelsConfig.textAnchor = 'end'
-          else dataLabelsConfig.textAnchor = 'start'
-        }
-        if (position === 'center') {
-          dataLabelsConfig.textAnchor = 'middle'
-        }
-        if (position === 'bottom') {
-          if (valIsNegative) dataLabelsConfig.textAnchor = 'end'
-          else dataLabelsConfig.textAnchor = 'start'
-        }
+        anchor =
+          w.config.plotOptions.bar.dataLabels.position === 'center'
+            ? 'middle'
+            : (neg ?? w.seriesData.series[i][j] < 0)
+              ? 'end'
+              : 'start'
       }
 
+      // hide the datalabel if it cannot fit into the rect (measured in the
+      // drawn font, weight included)
       if (
         this.barCtx.isRangeBar &&
-        this.barCtx.barOptions.dataLabels.hideOverflowingLabels
+        this.barCtx.barOptions.dataLabels.hideOverflowingLabels &&
+        barWidth < textRects.width
       ) {
-        // hide the datalabel if it cannot fit into the rect
-        const txRect = graphics.getTextRects(
-          text,
-          parseFloat(dataLabelsConfig.style.fontSize).toString(),
-        )
-        if (barWidth < txRect.width) {
-          text = ''
-        }
+        text = ''
       }
 
       if (
@@ -918,14 +914,13 @@ export default class BarDataLabels {
 
       const modifiedDataLabelsConfig = {
         ...dataLabelsConfig,
+        textAnchor: anchor,
       }
-      if (this.barCtx.isHorizontal) {
-        if (val < 0) {
-          if (dataLabelsConfig.textAnchor === 'start') {
-            modifiedDataLabelsConfig.textAnchor = 'end'
-          } else if (dataLabelsConfig.textAnchor === 'end') {
-            modifiedDataLabelsConfig.textAnchor = 'start'
-          }
+      if (this.barCtx.isHorizontal && val < 0) {
+        if (anchor === 'start') {
+          modifiedDataLabelsConfig.textAnchor = 'end'
+        } else if (anchor === 'end') {
+          modifiedDataLabelsConfig.textAnchor = 'start'
         }
       }
 
@@ -1000,7 +995,7 @@ export default class BarDataLabels {
         const { groupIndex } = this.barCtx.barHelpers.getGroupIndex(realIndex)
         totalDataLabelText.node.setAttribute(
           'data:dlTotalKey',
-          `${groupIndex}::${datumKey(this.w, realIndex, j)}`,
+          `${groupIndex}::${this.barCtx._keys(realIndex)[j]}`,
         )
         totalDataLabelText.node.setAttribute(
           'data:dlTotalSeries',

package/src/charts/common/bar/Helpers.js

@@ -2,6 +2,7 @@
 import Graphics from '../../../modules/Graphics'
 import Series from '../../../modules/Series'
 import Fill from '../../../modules/Fill'
+import CoreUtils from '../../../modules/CoreUtils'
 import Utils from '../../../utils/Utils'
 
 /**
@@ -33,9 +34,11 @@ export default class Helpers {
 
   /**
    * @param {any[]} series
+   * @param {any} [seriesIndex] a combo's real indices of `series`
    */
-  initVariables(series) {
+  initVariables(series, seriesIndex) {
     const w = this.w
+    this.seriesIndex = seriesIndex
     this.barCtx.series = series
     this.barCtx.totalItems = 0
     this.barCtx.seriesLen = 0
@@ -62,6 +65,18 @@ export default class Helpers {
       }
     }
 
+    // A horizontal bar on a numeric axis sits in the band labelled with its
+    // own x (Range.setXRange). Where every series has the bands' x at the
+    // same position, the band is the index, as on a category axis.
+    const labels = w.labelData.labels
+    this.rows =
+      w.globals.isBarHorizontal &&
+      w.axisFlags.isXNumeric &&
+      !this.barCtx.isRangeBar &&
+      w.seriesData.seriesX.some((s) => s?.some((x, j) => x !== labels[j]))
+        ? new Map(labels.map((x, r) => [x, r]))
+        : null
+
     this.arrBorderRadius = this.createBorderRadiusArr(w.seriesData.series)
 
     if (Utils.isSafari()) {
@@ -138,17 +153,21 @@ export default class Helpers {
    * Collapsed series count too, exactly as they did for `minXDiff`. Skipping
    * them would widen every bar the moment someone hid the tightest-spaced
    * series from the legend, so bar geometry would depend on legend state.
+   * In a combo only this renderer's own series count: a line's x values say
+   * nothing about how wide a column may be.
    *
    * @returns {number}
    */
   _unionMinXGap() {
     const w = this.w
     const seriesX = w.seriesData.seriesX || []
+    const own = this.seriesIndex
 
     /** @type {any[][]} */
     const arrays = []
     for (let i = 0; i < seriesX.length; i++) {
       const xs = seriesX[i]
+      if (own && own.indexOf(i) < 0) continue
       if (Array.isArray(xs) && xs.length > 0) {
         arrays.push(
           xs.some((v, n) => v < xs[n - 1])
@@ -196,6 +215,15 @@ export default class Helpers {
     return isFinite(min) ? min : 0
   }
 
+  /**
+   * The band a horizontal bar is drawn in: its x's band when the series do
+   * not line up by index (see initVariables), else its index.
+   * @param {number} realIndex @param {number} j
+   */
+  barRow(realIndex, j) {
+    return this.rows?.get(this.w.seriesData.seriesX[realIndex]?.[j]) ?? j
+  }
+
   /**
    * @param {number} realIndex
    */
@@ -374,7 +402,7 @@ export default class Helpers {
     // fill for this bar alone, so each row gets its own gradient rather than
     // one chart-wide one pointing whichever way the first row happened to go.
     const connectorFill = this.getDumbbellConnectorFill(i, j)
-    const datumFill = connectorFill || w.config.series[i].data[j]?.fill
+    const datumFill = connectorFill || w.config.series[realIndex].data[j]?.fill
 
     // A named connector colour is a plain join instead of that gradient. Its
     // opacity rides with it and is NOT applied otherwise, so a range bar drawn
@@ -569,7 +597,8 @@ export default class Helpers {
       !this.w.config.chart.stacked || w.config.plotOptions.bar.borderRadius <= 0
 
     const numSeries = series.length
-    const numColumns = series[0]?.length | 0
+    // the longest series: a short first one left later points unassigned
+    const numColumns = Math.max(0, ...series.map((s) => s?.length | 0))
     const output = Array.from({ length: numSeries }, () =>
       Array(numColumns).fill(alwaysApplyRadius ? 'top' : 'none')
     )
@@ -829,10 +858,13 @@ export default class Helpers {
     }
 
     if (w.config.chart.stacked) {
+      // A point past the end of a short series is undefined, which reads as
+      // neither sign, so the layer above restarted at the axis. It stacks as
+      // a null, as the padded series would.
       const _ctx = this.barCtx.groupCtx
       _ctx.yArrj.push(y2 - strokeCenter * direction)
       _ctx.yArrjF.push(Math.abs(y1 - y2 + r.strokeWidth * direction))
-      _ctx.yArrjVal.push(this.barCtx.series[i][j])
+      _ctx.yArrjVal.push(this.barCtx.series[i][j] ?? null)
     }
 
     return {
@@ -1123,7 +1155,7 @@ export default class Helpers {
       const _ctx = this.barCtx.groupCtx
       _ctx.xArrj.push(x2 + strokeCenter * direction)
       _ctx.xArrjF.push(Math.abs(x1 - x2 - r.strokeWidth * direction))
-      _ctx.xArrjVal.push(this.barCtx.series[i][j])
+      _ctx.xArrjVal.push(this.barCtx.series[i][j] ?? null)
     }
     return {
       pathTo,
@@ -1187,6 +1219,10 @@ export default class Helpers {
      * @param {Record<string, any>} attrs
      */
     const pushGoal = (value, attrs) => {
+      // the bars are drawn in log space on a logarithmic axis, so is the goal
+      if (!w.globals.invalidLogScale) {
+        value = new CoreUtils(w).getLogValAtSeriesIndex(value, i)
+      }
       goals.push({
         [type]:
           type === 'x'
@@ -1543,11 +1579,11 @@ export default class Helpers {
      * @param {number} _si
      */
     seriesIndices.forEach((/** @type {any} */ _si) => {
-      const val = w.globals.seriesPercent[_si][j]
+      const val = w.seriesData.series[_si][j]
       if (val) {
         nonZeroColumns++
       }
-      if (_si < i && val === 0) {
+      if (_si < i && !val) {
         zeroEncounters++
       }
     })

package/src/charts/common/line/Helpers.js

@@ -1,5 +1,4 @@
 // @ts-check
-import CoreUtils from '../../../modules/CoreUtils'
 import Utils from '../../../utils/Utils'
 
 export default class Helpers {
@@ -12,26 +11,24 @@ export default class Helpers {
   }
 
   /**
-   * @param {number} i
+   * @param {number} i index into `series`, the rows this draw call renders
    * @param {any[]} series
+   * @param {number} realIndex index into the config / fill options
    */
-  sameValueSeriesFix(i, series) {
+  sameValueSeriesFix(i, series, realIndex) {
     const w = this.w
+    const s = series[i]
 
+    // applied only to LINE chart
+    // a small adjustment to allow gradient line to draw correctly for all same values
+    /* #fix https://github.com/apexcharts/apexcharts.js/issues/358 */
     if (
-      w.config.fill.type === 'gradient' ||
-      w.config.fill.type[i] === 'gradient'
+      (w.config.fill.type === 'gradient' ||
+        w.config.fill.type[realIndex] === 'gradient') &&
+      s.every((/** @type {any} */ v) => v === s[0])
     ) {
-      const coreUtils = new CoreUtils(this.lineCtx.w)
-
-      // applied only to LINE chart
-      // a small adjustment to allow gradient line to draw correctly for all same values
-      /* #fix https://github.com/apexcharts/apexcharts.js/issues/358 */
-      if (coreUtils.seriesHaveSameValues(i)) {
-        const gSeries = series[i].slice()
-        gSeries[gSeries.length - 1] = gSeries[gSeries.length - 1] + 0.000001
-        series[i] = gSeries
-      }
+      series[i] = s.slice()
+      series[i][s.length - 1] += 0.000001
     }
     return series
   }

package/src/charts/common/partition/NodeTooltip.js

@@ -70,6 +70,13 @@ export class NodeTooltip {
     const groupBg = w.config.tooltip.fillSeriesColor
       ? `background-color:${node._color};`
       : ''
+    // tooltip.y.formatter when given (a node has no dataPointIndex, so it gets
+    // -1 and the node itself), else the value without float noise.
+    const ty = w.config.tooltip.y
+    const fmt = (Array.isArray(ty) ? ty[0] : ty)?.formatter
+    const val = fmt
+      ? fmt(node.value, { seriesIndex: 0, dataPointIndex: -1, w, node })
+      : +node.value.toPrecision(12)
 
     t.innerHTML =
       `<div class="apexcharts-tooltip-series-group apexcharts-active" style="display:flex;${groupBg}">` +
@@ -77,7 +84,7 @@ export class NodeTooltip {
       `<div class="apexcharts-tooltip-text">` +
       `<div class="apexcharts-tooltip-y-group">` +
       `<span class="apexcharts-tooltip-text-y-label">${node.name}: </span>` +
-      `<span class="apexcharts-tooltip-text-y-value">${node.value} (${pctParent}% of parent, ${pctTotal}% of total)</span>` +
+      `<span class="apexcharts-tooltip-text-y-value">${val} (${pctParent}% of parent, ${pctTotal}% of total)</span>` +
       `</div></div></div>`
     t.classList.add('apexcharts-active')
     t.style.opacity = '1'

package/src/charts/common/partition/Partition.js

@@ -23,6 +23,7 @@
  *
  * @module charts/common/partition/Partition
  */
+import { Environment } from '../../../utils/Environment.js'
 
 /**
  * Place one node and everything under it into `[t0, t1]`.
@@ -118,7 +119,7 @@ export function placeTree({ roots, nodesAll, focus, t0, t1, cap }) {
  *
  * Call it once after the values are filled, not inside the placement recursion,
  * which re-runs on every zoom. `_key` is assigned at build time from the
- * authored index, so sorting never changes a node's identity and an update
+ * authored names, so sorting never changes a node's identity and an update
  * still morphs the right shapes.
  *
  * @param {any[]} roots
@@ -259,6 +260,37 @@ export function resolveFocus(node, current, roots) {
   return { changed: true, focus: next }
 }
 
+/**
+ * The focus a re-render restores from its stored key (the chart instance is
+ * rebuilt every render), under resolveFocus's rules: a key that no longer
+ * exists, a branch turned leaf or the lone root is no focus.
+ * @param {any} key
+ * @param {any[]} nodesAll
+ * @param {any[]} roots
+ * @returns {any}
+ */
+export function focusByKey(key, nodesAll, roots) {
+  const f = key && nodesAll.find((n) => n._key === key)
+  return f && f.children?.length && !(roots.length === 1 && f === roots[0])
+    ? f
+    : null
+}
+
+/**
+ * A node offers the pointer only while clicking it would change the view: a
+ * leaf under the focus, or the lone root, resolves to the view the reader is
+ * already on. Asked on every layout, because a zoom changes every answer.
+ * @param {any} chart  an icicle or sunburst instance
+ * @param {any} node
+ */
+export function setZoomCursor(chart, node) {
+  if (!Environment.isBrowser() || chart.cfg.zoomOnClick === false) return
+  node._el.node.style.cursor = resolveFocus(node, chart._focus, chart._roots)
+    .changed
+    ? 'pointer'
+    : 'default'
+}
+
 /**
  * Read a px number or a `'%'` string against a maximum.
  *

package/src/charts/common/treemap/Helpers.js

@@ -2,7 +2,6 @@
 import Utils from '../../../utils/Utils'
 import Graphics from '../../../modules/Graphics'
 import DataLabels from '../../../modules/DataLabels'
-import { resolveDataLabelOffset } from '../../../modules/helpers/DataLabelOffset'
 
 export default class TreemapHelpers {
   /**
@@ -209,17 +208,10 @@ export default class TreemapHelpers {
         class: 'apexcharts-data-labels',
       })
 
-      // offsets may be a function evaluated per data point
-      const offX = resolveDataLabelOffset(dataLabelsConfig.offsetX, w, i, j)
-      const offY = resolveDataLabelOffset(dataLabelsConfig.offsetY, w, i, j)
-
-      const dataLabelsX = x + offX
-      const dataLabelsY =
-        y + parseFloat(dataLabelsConfig.style.fontSize) / 3 + offY
-
+      // plotDataLabelsText applies offsetX/offsetY itself
       dataLabels.plotDataLabelsText({
-        x: dataLabelsX,
-        y: dataLabelsY,
+        x,
+        y: y + parseFloat(dataLabelsConfig.style.fontSize) / 3,
         text,
         i,
         j,

package/src/locales/en.json

@@ -50,7 +50,8 @@
       "zoomOut": "Zoom Out",
       "pan": "Panning",
       "reset": "Reset Zoom",
-      "measure": "Measure"
+      "measure": "Measure",
+      "wheelZoomHint": "Use {key} + scroll to zoom"
     }
   }
 }

package/src/locales/ro.json

@@ -49,7 +49,8 @@
       "zoomIn": "Mărire",
       "zoomOut": "Micșorare",
       "pan": "Panoramare",
-      "reset": "Resetare zoom"
+      "reset": "Resetare zoom",
+      "measure": "Măsurare"
     }
   }
-}
+}

package/src/modules/Core.js

@@ -446,6 +446,10 @@ export default class Core {
     const { config: cnf, globals: gl } = w
     const { line, boxCandlestick, violin } = renderers
 
+    // A unit chart tweens from the slots of the last render; once another type
+    // has drawn over them they are not on screen to tween from.
+    if (cnf.chart.type !== 'unit') ctx._unitPrevDots = null
+
     let elGraph = []
 
     if (gl.comboCharts) {