apexcharts - npm Package Compare versions

Comparing version 3.28.3 to 3.29.0

package.json

 {
   "name": "apexcharts",
-  "version": "3.28.3",
+  "version": "3.29.0",
   "description": "A JavaScript Chart Library",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -20,5 +20,3 @@ <p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
 
-<p align="center">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with robust features, ApexCharts are flexible and fully responsive on desktops, tablets, and mobiles.</p>
-<p align="center">
-Included are several chart types that guarantee high-performance and options for further customization so you can style the look of your chart the way you want. As an open-source project, ApexCharts is free to use in your commercial apps. </p>
+<p align="center">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.</p>
 
@@ -66,3 +64,3 @@ <p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img
 - [larapex-charts](https://github.com/ArielMejiaDev/larapex-charts) - Laravel wrapper for ApexCharts
-- [blazor-apexcharts](https://github.com/joadan/Blazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https://joadan.github.io/Blazor-ApexCharts/)
+- [blazor-apexcharts](https://github.com/apexcharts/Blazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https://apexcharts.github.io/Blazor-ApexCharts/)
 - [svelte-apexcharts](https://github.com/galkatz373/svelte-apexcharts) - Svelte wrapper for ApexCharts
@@ -69,0 +67,0 @@

src/apexcharts.js

@@ -300,3 +300,3 @@ import Annotations from './modules/annotations/Annotations'
             w.config.xaxis.convertedCatToNumeric ||
-            w.globals.isTimelineBar)
+            w.globals.isRangeBar)
         ) {
@@ -589,2 +589,6 @@ if (
 
+  highlightSeriesOnLegendHover(e, targetElement) {
+    return this.series.toggleSeriesOnHover(e, targetElement)
+  }
+
   showSeries(seriesName) {
@@ -591,0 +595,0 @@ this.series.showSeries(seriesName)

src/charts/Bar.js

@@ -25,5 +25,3 @@ import BarDataLabels from './common/bar/DataLabels'
 
-    this.isTimelineBar =
-      w.config.xaxis.type === 'datetime' &&
-      w.globals.seriesRangeBarTimeline.length
+    this.isRangeBar = w.globals.seriesRangeBar.length && this.isHorizontal
 
@@ -30,0 +28,0 @@ this.xyRatios = xyRatios

src/charts/common/bar/DataLabels.js

@@ -55,3 +55,3 @@ import Graphics from '../../../modules/Graphics'
 
-    if (typeof barYPosition !== 'undefined' && this.barCtx.isTimelineBar) {
+    if (typeof barYPosition !== 'undefined' && this.barCtx.isRangeBar) {
       bcy = barYPosition
@@ -114,3 +114,3 @@ dataLabelsY = barYPosition
       y: dataLabelsPos.dataLabelsY,
-      val: this.barCtx.isTimelineBar ? [y1, y2] : series[i][j],
+      val: this.barCtx.isRangeBar ? [y1, y2] : series[i][j],
       i: realIndex,
@@ -262,3 +262,3 @@ j,
       bcy -
-      (this.barCtx.isTimelineBar ? 0 : dataPointsDividedHeight) +
+      (this.barCtx.isRangeBar ? 0 : dataPointsDividedHeight) +
       barHeight / 2 +
@@ -387,3 +387,3 @@ textRects.height / 2 +
       if (
-        this.barCtx.isTimelineBar &&
+        this.barCtx.isRangeBar &&
         this.barCtx.barOptions.dataLabels.hideOverflowingLabels
@@ -408,13 +408,7 @@ ) {
         if (this.barCtx.isHorizontal) {
-          // FIXED: Don't always hide the stacked negative side label
-          // A negative value will result in a negative bar width
-          // Only hide the text when the width is smaller (a higher negative number) than the negative bar width.
-          if (
-            (barWidth > 0 && textRects.width / 1.6 > barWidth) ||
-            (barWidth < 0 && textRects.width / 1.6 < barWidth)
-          ) {
+          if (textRects.width / 1.6 > Math.abs(barWidth)) {
             text = ''
           }
         } else {
-          if (textRects.height / 1.6 > barHeight) {
+          if (textRects.height / 1.6 > Math.abs(barHeight)) {
             text = ''
@@ -421,0 +415,0 @@ }

src/charts/common/bar/Helpers.js

@@ -56,3 +56,3 @@ import Fill from '../../../modules/Fill'
     let dataPoints = w.globals.dataPoints
-    if (this.barCtx.isTimelineBar) {
+    if (this.barCtx.isRangeBar) {
       // timeline rangebar chart
@@ -59,0 +59,0 @@ dataPoints = w.globals.labels.length

src/charts/Radar.js

@@ -222,3 +222,7 @@ import Fill from '../modules/Fill'
 
-        let opts = markers.getMarkerConfig('apexcharts-marker', i, j)
+        let opts = markers.getMarkerConfig({
+          cssClass: 'apexcharts-marker',
+          seriesIndex: i,
+          dataPointIndex: j
+        })
 
@@ -225,0 +229,0 @@ let point = this.graphics.drawMarker(

src/charts/RangeBar.js

@@ -108,3 +108,3 @@ import Bar from './Bar'
 
-          if (this.isTimelineBar && w.config.series[i].data[j].x) {
+          if (w.config.series[i].data[j].x) {
             let positions = this.detectOverlappingBars({
@@ -214,3 +214,3 @@ i,
     const rowIndex = w.globals.labels.indexOf(labelX)
-    const overlappedIndex = w.globals.seriesRangeBarTimeline[i].findIndex(
+    const overlappedIndex = w.globals.seriesRangeBar[i].findIndex(
       (tx) => tx.x === labelX && tx.overlaps.length > 0
@@ -226,3 +226,3 @@ )
     if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) {
-      overlaps = w.globals.seriesRangeBarTimeline[i][overlappedIndex].overlaps
+      overlaps = w.globals.seriesRangeBar[i][overlappedIndex].overlaps
 
@@ -229,0 +229,0 @@ if (overlaps.indexOf(rangeName) > -1) {

src/charts/Scatter.js

@@ -109,7 +109,21 @@ import Animations from '../modules/Animations'
 
-    const markerConfig = markers.getMarkerConfig('apexcharts-marker', i)
+    const markerConfig = markers.getMarkerConfig({
+      cssClass: 'apexcharts-marker',
+      seriesIndex: i,
+      dataPointIndex,
+      finishRadius:
+        w.config.chart.type === 'bubble' ||
+        (w.globals.comboCharts &&
+          w.config.series[realIndex] &&
+          w.config.series[realIndex].type === 'bubble')
+          ? finishRadius
+          : null
+    })
 
+    finishRadius = markerConfig.pSize
+
     let pathFillCircle = fill.fillPath({
       seriesNumber: realIndex,
       dataPointIndex,
+      color: markerConfig.pointFillColor,
       patternUnits: 'objectBoundingBox',
@@ -116,0 +130,0 @@ value: w.globals.series[realIndex][j]

src/modules/axes/Grid.js

@@ -21,5 +21,3 @@ import CoreUtils from '../CoreUtils'
 
-    this.isTimelineBar =
-      w.config.xaxis.type === 'datetime' &&
-      w.globals.seriesRangeBarTimeline.length
+    this.isRangeBar = w.globals.seriesRangeBar.length
 
@@ -337,10 +335,10 @@ if (w.globals.timescaleLabels.length > 0) {
 
-      if (this.isTimelineBar) {
+      if (this.isRangeBar) {
         tA = w.globals.labels.length
       }
 
-      for (let i = 0; i < tA + (this.isTimelineBar ? 1 : 0); i++) {
+      for (let i = 0; i < tA + (this.isRangeBar ? 1 : 0); i++) {
         this._drawGridLine({ x1, y1, x2, y2, parent: this.elgridLinesH })
 
-        y1 = y1 + w.globals.gridHeight / (this.isTimelineBar ? tA : tickAmount)
+        y1 = y1 + w.globals.gridHeight / (this.isRangeBar ? tA : tickAmount)
 
@@ -424,6 +422,6 @@ y2 = y1
 
-    if (!w.globals.isBarHorizontal || this.isTimelineBar) {
+    if (!w.globals.isBarHorizontal || this.isRangeBar) {
       xCount = this.xaxisLabels.length
 
-      if (this.isTimelineBar) {
+      if (this.isRangeBar) {
         yTickAmount = w.globals.labels.length
@@ -430,0 +428,0 @@ if (w.config.xaxis.tickAmount && w.config.xaxis.labels.formatter) {

src/modules/Data.js

@@ -193,3 +193,2 @@ import CoreUtils from './CoreUtils'
   handleRangeData(ser, i) {
-    const cnf = this.w.config
     const gl = this.w.globals
@@ -207,8 +206,6 @@
 
-    if (cnf.xaxis.type === 'datetime') {
-      gl.seriesRangeBarTimeline.push(range.rangeUniques)
-    }
+    gl.seriesRangeBar.push(range.rangeUniques)
 
     // check for overlaps to avoid clashes in a timeline chart
-    gl.seriesRangeBarTimeline.forEach((sr, si) => {
+    gl.seriesRangeBar.forEach((sr, si) => {
       if (sr) {
@@ -401,4 +398,3 @@ sr.forEach((sarr, sarri) => {
 
-    gl.isTimelineBar =
-      cnf.chart.type === 'rangeBar' && cnf.xaxis.type === 'datetime'
+    gl.isRangeBar = cnf.chart.type === 'rangeBar' && gl.isBarHorizontal
 
@@ -546,4 +542,4 @@ const handleDates = () => {
 
-      if (gl.seriesRangeBarTimeline.length) {
-        gl.seriesRangeBarTimeline.map((srt) => {
+      if (gl.seriesRangeBar.length) {
+        gl.seriesRangeBar.map((srt) => {
           srt.forEach((sr) => {
@@ -550,0 +546,0 @@ if (gl.labels.indexOf(sr.x) < 0 && sr.x) {

src/modules/dimensions/Dimensions.js

@@ -264,6 +264,16 @@ import YAxis from '../axes/YAxis'
     const w = this.w
+
+    const baseXAxisHeight = xaxisLabelCoords.height + xtitleCoords.height
+    const xAxisHeightMultiplicate = w.globals.isMultiLineX
+      ? 1.2
+      : w.globals.LINE_HEIGHT_RATIO
+    const rotatedXAxisOffset = w.globals.rotateXLabels ? 22 : 10
+    const rotatedXAxisLegendOffset =
+      w.globals.rotateXLabels && w.config.legend.position === 'bottom'
+    const additionalOffset = rotatedXAxisLegendOffset ? 10 : 0
+
     this.xAxisHeight =
-      (xaxisLabelCoords.height + xtitleCoords.height) *
-        (w.globals.isMultiLineX ? 1.2 : w.globals.LINE_HEIGHT_RATIO) +
-      (w.globals.rotateXLabels ? 22 : 10)
+      baseXAxisHeight * xAxisHeightMultiplicate +
+      rotatedXAxisOffset +
+      additionalOffset
 
@@ -270,0 +280,0 @@ this.xAxisWidth = xaxisLabelCoords.width

src/modules/Markers.js

@@ -87,7 +87,7 @@ import Filters from './Filters'
 
-          let opts = this.getMarkerConfig(
-            PointClasses,
+          let opts = this.getMarkerConfig({
+            cssClass: PointClasses,
             seriesIndex,
             dataPointIndex
-          )
+          })
 
@@ -136,3 +136,8 @@ if (w.config.series[i].data[dataPointIndex]) {
 
-  getMarkerConfig(cssClass, seriesIndex, dataPointIndex = null) {
+  getMarkerConfig({
+    cssClass,
+    seriesIndex,
+    dataPointIndex = null,
+    finishRadius = null
+  }) {
     const w = this.w
@@ -161,3 +166,3 @@ let pStyle = this.getMarkerStyle(seriesIndex)
     return {
-      pSize,
+      pSize: finishRadius === null ? pSize : finishRadius,
       pRadius: m.radius,
@@ -164,0 +169,0 @@ width: Array.isArray(m.width) ? m.width[seriesIndex] : m.width,

src/modules/Range.js

@@ -62,2 +62,3 @@ import Utils from '../utils/Utils'
             maxY = Math.max(maxY, seriesMax[i][j])
+            lowestY = Math.min(lowestY, seriesMax[i][j])
           }
@@ -130,4 +131,3 @@ if (typeof seriesMin[i][j] !== 'undefined') {
       gl.seriesRangeStart.length &&
-      gl.isBarHorizontal &&
-      cnf.xaxis.type === 'datetime'
+      gl.isBarHorizontal
     ) {
@@ -134,0 +134,0 @@ minY = lowestY

src/modules/Scales.js

@@ -164,9 +164,9 @@ import Utils from '../utils/Utils'
 
-  logarithmicScale(yMax) {
+  logarithmicScale(yMax, base) {
     const logs = []
 
-    const ticks = Math.ceil(Math.log10(yMax)) + 1 // Get powers of 10 up to our max, and then one more
+    const ticks = Math.ceil(Math.log(yMax) / Math.log(base)) + 1 // Get powers of base up to our max, and then one more
 
     for (let i = 0; i < ticks; i++) {
-      logs.push(Math.pow(10, i))
+      logs.push(Math.pow(base, i))
     }
@@ -217,3 +217,3 @@
       gl.allSeriesCollapsed = false
-      gl.yAxisScale[index] = this.logarithmicScale(maxY)
+      gl.yAxisScale[index] = this.logarithmicScale(maxY, y.logBase)
     } else {
@@ -220,0 +220,0 @@ if (maxY === -Number.MAX_VALUE || !Utils.isNumber(maxY)) {

src/modules/Series.js

@@ -133,2 +133,4 @@ import Graphics from './Graphics'
 
+    if (!targetElement) targetElement = e.target
+
     let allSeriesEls = w.globals.dom.baseEl.querySelectorAll(
@@ -135,0 +137,0 @@ `.apexcharts-series, .apexcharts-datalabels`

src/modules/settings/Config.js

@@ -343,8 +343,2 @@ import Defaults from './Defaults'
 
-    if (config.chart.group && config.yaxis[0].labels.minWidth === 0) {
-      console.warn(
-        'It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour.'
-      )
-    }
-
     // if user supplied array for stroke width, it will only be applicable to line/area charts, for any other charts, revert back to Number
@@ -351,0 +345,0 @@ if (Array.isArray(config.stroke.width)) {

src/modules/settings/Globals.js

@@ -13,3 +13,3 @@ import Utils from './../../utils/Utils'
     gl.seriesRangeEnd = []
-    gl.seriesRangeBarTimeline = []
+    gl.seriesRangeBar = []
     gl.seriesPercent = []
@@ -16,0 +16,0 @@ gl.seriesGoals = []

src/modules/settings/Options.js

@@ -16,2 +16,3 @@ /**
       logarithmic: false,
+      logBase: 10,
       tickAmount: undefined,
@@ -18,0 +19,0 @@ forceNiceScale: false,

src/modules/Toolbar.js

@@ -324,3 +324,3 @@ import Graphics from './Graphics'
 
-    if (w.globals.isTimelineBar) {
+    if (w.globals.isRangeBar) {
       this.minX = w.globals.minY
@@ -344,3 +344,3 @@ this.maxX = w.globals.maxY
 
-    if (w.globals.isTimelineBar) {
+    if (w.globals.isRangeBar) {
       this.minX = w.globals.minY
@@ -347,0 +347,0 @@ this.maxX = w.globals.maxY

src/modules/tooltip/Labels.js

 import Formatters from '../Formatters'
 import DateTime from '../../utils/DateTime'
 import Utils from './Utils'
-import Utilities from '../../utils/Utils'
 
@@ -6,0 +5,0 @@ /**

src/modules/tooltip/Marker.js

@@ -59,3 +59,6 @@ import Graphics from '../Graphics'
 
-        let elPointOptions = marker.getMarkerConfig(PointClasses, i)
+        let elPointOptions = marker.getMarkerConfig({
+          cssClass: PointClasses,
+          seriesIndex: i
+        })
 
@@ -62,0 +65,0 @@ point = graphics.drawMarker(0, 0, elPointOptions)

src/modules/tooltip/Tooltip.js

@@ -629,3 +629,4 @@ import Labels from './Labels'
 
-    if (capj.hoverX < 0 || capj.hoverX > w.globals.gridWidth) {
+    const bounds = opt.elGrid.getBoundingClientRect()
+    if (capj.hoverX < 0 || capj.hoverX > bounds.width) {
       this.handleMouseOut(opt)
@@ -648,6 +649,8 @@ return
     const w = this.w
-    let ignoreNull = w.globals.series[capturedSeries][j] === null
-    if (ignoreNull) {
-      this.handleMouseOut(opt)
-      return
+    if (!this.tConfig.shared) {
+      let ignoreNull = w.globals.series[capturedSeries][j] === null
+      if (ignoreNull) {
+        this.handleMouseOut(opt)
+        return
+      }
     }
@@ -654,0 +657,0 @@

src/modules/tooltip/Utils.js

@@ -27,4 +27,5 @@ import Utilities from '../../utils/Utils'
 
-    const hoverWidth = w.globals.gridWidth
-    const hoverHeight = w.globals.gridHeight
+    const seriesBound = elGrid.getBoundingClientRect()
+    const hoverWidth = seriesBound.width
+    const hoverHeight = seriesBound.height
 
@@ -34,4 +35,2 @@ let xDivisor = hoverWidth / (w.globals.dataPoints - 1)
 
-    const seriesBound = elGrid.getBoundingClientRect()
-
     const hasBars = this.hasBars()
@@ -50,6 +49,3 @@
     const notInRect =
-      hoverX < 0 ||
-      hoverY < 0 ||
-      hoverX > w.globals.gridWidth ||
-      hoverY > w.globals.gridHeight
+      hoverX < 0 || hoverY < 0 || hoverX > hoverWidth || hoverY > hoverHeight
 
@@ -100,5 +96,14 @@ if (notInRect) {
     if (w.globals.isXNumeric) {
+      // Change origin of cursor position so that we can compute the relative nearest point to the cursor on our chart
+      // we only need to scale because all points are relative to the bounds.left and bounds.top => origin is virtually (0, 0)
+      const chartGridEl = this.ttCtx.getElGrid()
+      const chartGridElBoundingRect = chartGridEl.getBoundingClientRect()
+      const transformedHoverX =
+        hoverX * (chartGridElBoundingRect.width / hoverWidth)
+      const transformedHoverY =
+        hoverY * (chartGridElBoundingRect.height / hoverHeight)
+
       closest = this.closestInMultiArray(
-        hoverX,
-        hoverY,
+        transformedHoverX,
+        transformedHoverY,
         seriesXValArr,
@@ -114,3 +119,3 @@ seriesYValArr
 
-        closest = this.closestInArray(hoverX, seriesXValArr)
+        closest = this.closestInArray(transformedHoverX, seriesXValArr)
 
@@ -117,0 +122,0 @@ j = closest.index

src/modules/ZoomPanSelection.js

@@ -513,3 +513,3 @@ import Graphics from './Graphics'
 
-    if (!w.globals.isTimelineBar) {
+    if (!w.globals.isRangeBar) {
       xLowestValue = w.globals.xAxisScale.niceMin + me.startX * xyRatios.xRatio
@@ -663,7 +663,5 @@ xHighestValue = w.globals.xAxisScale.niceMin + me.endX * xyRatios.xRatio
 
-    let xLowestValue = w.globals.isTimelineBar ? w.globals.minY : w.globals.minX
+    let xLowestValue = w.globals.isRangeBar ? w.globals.minY : w.globals.minX
 
-    let xHighestValue = w.globals.isTimelineBar
-      ? w.globals.maxY
-      : w.globals.maxX
+    let xHighestValue = w.globals.isRangeBar ? w.globals.maxY : w.globals.maxX
 
@@ -709,3 +707,3 @@ // on a category, we don't pan continuosly as it causes bugs
     let maxX = w.globals.maxX
-    if (w.globals.isTimelineBar) {
+    if (w.globals.isRangeBar) {
       xRatio = xyRatios.invertedYRatio
@@ -724,3 +722,3 @@ minX = w.globals.minY
 
-    if (!w.globals.isTimelineBar) {
+    if (!w.globals.isRangeBar) {
       if (
@@ -727,0 +725,0 @@ xLowestValue < w.globals.initialMinX ||

types/apexcharts.d.ts

@@ -711,3 +711,4 @@ // Typescript declarations for Apex class and module.
     opacityTo?: number
-    stops?: number[]
+    stops?: number[],
+    colorStops?: any[]
   }
@@ -1041,3 +1042,4 @@ image?: {
   reversed?: boolean
-  logarithmic?: boolean
+  logarithmic?: boolean,
+  logBase?: number,
   tickAmount?: number
@@ -1044,0 +1046,0 @@ forceNiceScale?: boolean

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4114495

increased by0.07%

Lines of code

66268

increased by0.1%

Worsened metrics

Number of lines in readme file

228

decreased by-0.87%

No dependency changes