Working on using the series style attribute to influence axis scaling

for bars and columns, specifically referencing a zero baseline. Generally, only the chart type is used. Fix crash in label formatter in samples/source/stacked-column-with-line*.xml. Tried to format an undefined value when all series are collapsed.
apexcharts · Mar 8, 2024 · fec4d6c · fec4d6c
1 parent 0b95446
commit fec4d6c
Show file tree

Hide file tree

Showing 21 changed files with 62 additions and 39 deletions.
diff --git a/samples/react/column/stacked-column-with-line-new.html b/samples/react/column/stacked-column-with-line-new.html
@@ -290,7 +290,7 @@
                 labels: {
                   showDuplicates: false,
                   formatter: function(value) {
-                    return value.toFixed(0)
+                    return value?.toFixed(0) // Value is undefined if all series are collapsed
                   }
                 }
               },

diff --git a/samples/react/column/stacked-column-with-line.html b/samples/react/column/stacked-column-with-line.html
@@ -290,7 +290,7 @@
                 labels: {
                   showDuplicates: false,
                   formatter: function(value) {
-                    return value.toFixed(0)
+                    return value?.toFixed(0) // Value is undefined if all series are collapsed
                   }
                 }
               },

diff --git a/samples/react/misc/annotations-example.html b/samples/react/misc/annotations-example.html
@@ -147,6 +147,9 @@
                 show: false,
               },
               labels: series.monthDataSeries1.dates,
+              yaxis: {
+                min: 8000
+              },
               xaxis: {
                 type: 'datetime',
               }

diff --git a/samples/react/mixed/line-column-area.html b/samples/react/mixed/line-column-area.html
@@ -123,8 +123,7 @@
               yaxis: {
                 title: {
                   text: 'Points',
-                },
-                min: 0
+                }
               },
               tooltip: {
                 shared: true,

diff --git a/samples/react/mixed/line-column.html b/samples/react/mixed/line-column.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Line, Column &amp; Area</title>
+    <title>Line &amp; Column</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 

diff --git a/samples/source/column/stacked-column-with-line-new.xml b/samples/source/column/stacked-column-with-line-new.xml
@@ -71,7 +71,7 @@ xaxis: {
   labels: {
     showDuplicates: false,
     formatter: function(value) {
-      return value.toFixed(0)
+      return value?.toFixed(0) // Value is undefined if all series are collapsed
     }
   }
 },

diff --git a/samples/source/column/stacked-column-with-line.xml b/samples/source/column/stacked-column-with-line.xml
@@ -71,7 +71,7 @@ xaxis: {
   labels: {
     showDuplicates: false,
     formatter: function(value) {
-      return value.toFixed(0)
+      return value?.toFixed(0) // Value is undefined if all series are collapsed
     }
   }
 },

diff --git a/samples/source/misc/annotations-example.xml b/samples/source/misc/annotations-example.xml
@@ -74,6 +74,9 @@ legend: {
   show: false,
 },
 labels: series.monthDataSeries1.dates,
+yaxis: {
+  min: 8000
+},
 xaxis: {
   type: 'datetime',
 }

diff --git a/samples/source/mixed/line-column-area.xml b/samples/source/mixed/line-column-area.xml
@@ -40,8 +40,7 @@ xaxis: {
 yaxis: {
   title: {
     text: 'Points',
-  },
-  min: 0
+  }
 },
 tooltip: {
   shared: true,

diff --git a/samples/source/mixed/line-column.xml b/samples/source/mixed/line-column.xml
@@ -1,4 +1,4 @@
-<title>Line, Column &amp; Area</title>
+<title>Line &amp; Column</title>
 
 <chart>
 <options>

diff --git a/samples/vanilla-js/column/stacked-column-with-line-new.html b/samples/vanilla-js/column/stacked-column-with-line-new.html
@@ -273,7 +273,7 @@
           labels: {
             showDuplicates: false,
             formatter: function(value) {
-              return value.toFixed(0)
+              return value?.toFixed(0) // Value is undefined if all series are collapsed
             }
           }
         },

diff --git a/samples/vanilla-js/column/stacked-column-with-line.html b/samples/vanilla-js/column/stacked-column-with-line.html
@@ -273,7 +273,7 @@
           labels: {
             showDuplicates: false,
             formatter: function(value) {
-              return value.toFixed(0)
+              return value?.toFixed(0) // Value is undefined if all series are collapsed
             }
           }
         },

diff --git a/samples/vanilla-js/misc/annotations-example.html b/samples/vanilla-js/misc/annotations-example.html
@@ -130,6 +130,9 @@
           show: false,
         },
         labels: series.monthDataSeries1.dates,
+        yaxis: {
+          min: 8000
+        },
         xaxis: {
           type: 'datetime',
         }

diff --git a/samples/vanilla-js/mixed/line-column-area.html b/samples/vanilla-js/mixed/line-column-area.html
@@ -106,8 +106,7 @@
         yaxis: {
           title: {
             text: 'Points',
-          },
-          min: 0
+          }
         },
         tooltip: {
           shared: true,

diff --git a/samples/vanilla-js/mixed/line-column.html b/samples/vanilla-js/mixed/line-column.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Line, Column &amp; Area</title>
+    <title>Line &amp; Column</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 

diff --git a/samples/vue/column/stacked-column-with-line-new.html b/samples/vue/column/stacked-column-with-line-new.html
@@ -293,7 +293,7 @@
               labels: {
                 showDuplicates: false,
                 formatter: function(value) {
-                  return value.toFixed(0)
+                  return value?.toFixed(0) // Value is undefined if all series are collapsed
                 }
               }
             },

diff --git a/samples/vue/column/stacked-column-with-line.html b/samples/vue/column/stacked-column-with-line.html
@@ -293,7 +293,7 @@
               labels: {
                 showDuplicates: false,
                 formatter: function(value) {
-                  return value.toFixed(0)
+                  return value?.toFixed(0) // Value is undefined if all series are collapsed
                 }
               }
             },

diff --git a/samples/vue/misc/annotations-example.html b/samples/vue/misc/annotations-example.html
@@ -150,6 +150,9 @@
               show: false,
             },
             labels: series.monthDataSeries1.dates,
+            yaxis: {
+              min: 8000
+            },
             xaxis: {
               type: 'datetime',
             }

diff --git a/samples/vue/mixed/line-column-area.html b/samples/vue/mixed/line-column-area.html
@@ -126,8 +126,7 @@
             yaxis: {
               title: {
                 text: 'Points',
-              },
-              min: 0
+              }
             },
             tooltip: {
               shared: true,

diff --git a/samples/vue/mixed/line-column.html b/samples/vue/mixed/line-column.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Line, Column &amp; Area</title>
+    <title>Line &amp; Column</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 

diff --git a/src/modules/Range.js b/src/modules/Range.js
@@ -23,25 +23,25 @@ class Range {
   }
 
   getMinYMaxY(
-    startingIndex,
+    startingSeriesIndex,
     lowestY = Number.MAX_VALUE,
     highestY = -Number.MAX_VALUE,
-    endingIndex = null
+    endingSeriesIndex = null
   ) {
     const cnf = this.w.config
     const gl = this.w.globals
     let maxY = -Number.MAX_VALUE
     let minY = Number.MIN_VALUE
 
-    if (endingIndex === null) {
-      endingIndex = startingIndex + 1
+    if (endingSeriesIndex === null) {
+      endingSeriesIndex = startingSeriesIndex + 1
     }
 
     let firstXIndex = 0
     let lastXIndex = 0
     let  seriesX = undefined
-    if (gl.seriesX.length >= endingIndex) {
-      seriesX = [...new Set([].concat(...gl.seriesX.slice(startingIndex, endingIndex)))]
+    if (gl.seriesX.length >= endingSeriesIndex) {
+      seriesX = [...new Set([].concat(...gl.seriesX.slice(startingSeriesIndex, endingSeriesIndex)))]
       firstXIndex = 0
       lastXIndex = seriesX.length - 1
       // Eventually brushSource will be set if the current chart is a target.
@@ -83,9 +83,11 @@ class Range {
       seriesMax = gl.seriesRangeEnd
     }
 
-    for (let i = startingIndex; i < endingIndex; i++) {
+    for (let i = startingSeriesIndex; i < endingSeriesIndex; i++) {
       gl.dataPoints = Math.max(gl.dataPoints, series[i].length)
 
+      const seriesType = cnf.series[i].type
+
       if (gl.categoryLabels.length) {
         gl.dataPoints = gl.categoryLabels.filter(
           (label) => typeof label !== 'undefined'
@@ -120,7 +122,7 @@ class Range {
           // Array      : CandleO, CandleH, CandleM, CandleL, CandleC
           // Candlestick: O        H                 L        C
           // Boxplot    : Min      Q1       Median   Q3       Max
-          switch (cnf.series[i].type) {
+          switch (seriesType) {
             case 'candlestick': {
               if (typeof gl.seriesCandleC[i][j] !== 'undefined') {
                 maxY = Math.max(maxY, gl.seriesCandleH[i][j])
@@ -135,13 +137,14 @@ class Range {
             }
           }
 
-          // there is a combo chart and the specified series in not either candlestick, boxplot, or rangeArea/rangeBar; find the max there
+          // there is a combo chart and the specified series in not either
+          // candlestick, boxplot, or rangeArea/rangeBar; find the max there.
           if (
-            cnf.series[i].type &&
-            (cnf.series[i].type !== 'candlestick' &&
-              cnf.series[i].type !== 'boxPlot' &&
-              cnf.series[i].type !== 'rangeArea' &&
-              cnf.series[i].type !== 'rangeBar')
+            seriesType &&
+            (seriesType !== 'candlestick' &&
+              seriesType !== 'boxPlot' &&
+              seriesType !== 'rangeArea' &&
+              seriesType !== 'rangeBar')
           ) {
             maxY = Math.max(maxY, gl.series[i][j])
             lowestY = Math.min(lowestY, gl.series[i][j])
@@ -177,6 +180,17 @@ class Range {
           gl.hasNullValues = true
         }
       }
+      if (seriesType === 'bar' || seriesType === 'column') {
+        if (minY < 0 && maxY < 0) {
+          // all negative values in a bar series, hence make the max to 0
+          maxY = 0
+          highestY = Math.max(highestY, 0)
+        }
+        if (minY === Number.MIN_VALUE) {
+          minY = 0
+          lowestY = Math.min(lowestY, 0)
+        }
+      }
     }
 
     if (
@@ -212,20 +226,21 @@ class Range {
     gl.minY = Number.MIN_VALUE
 
     let lowestYInAllSeries = Number.MAX_VALUE
+    let minYMaxY
 
     if (gl.isMultipleYAxis) {
       // we need to get minY and maxY for multiple y axis
       lowestYInAllSeries = Number.MAX_VALUE
       for (let i = 0; i < gl.series.length; i++) {
-        const minYMaxYArr = this.getMinYMaxY(i)
-        gl.minYArr[i] = minYMaxYArr.lowestY
-        gl.maxYArr[i] = minYMaxYArr.highestY
-        lowestYInAllSeries  = Math.min(lowestYInAllSeries, minYMaxYArr.lowestY)
+        minYMaxY = this.getMinYMaxY(i)
+        gl.minYArr[i] = minYMaxY.lowestY
+        gl.maxYArr[i] = minYMaxY.highestY
+        lowestYInAllSeries  = Math.min(lowestYInAllSeries, minYMaxY.lowestY)
       }
     }
 
     // and then, get the minY and maxY from all series
-    const minYMaxY = this.getMinYMaxY(
+    minYMaxY = this.getMinYMaxY(
                             0,
                             lowestYInAllSeries,
                             null,