When chart is type 'bar', ensure reference to zero is maintained

when zoomed and auto scaling the Y axis. When forceNiceScale = true, set default ticks based on SVG size. Collapsed series handling: 1) The series YAxis map now represents a single axis as well as multiple axes so that collapsed series correctly manage axis visibility there also in both types of charts. 2) Axis hiding now works for mixed charts that include stacked series. 3) Fix a detail that was prematurely hiding axes if series were not available to assign to an axis until loaded via chart.updateSeries. 4) Use the first visible axis to render the grid ticks. Tweaked some sample charts for improved presentation.
apexcharts · Mar 7, 2024 · b9d5110 · b9d5110
1 parent 98a212f
commit b9d5110
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 95 deletions.
diff --git a/samples/react/area/area-github-style.html b/samples/react/area/area-github-style.html
@@ -96,7 +96,7 @@
     <div id="html">
       &lt;div id=&quot;wrapper&quot;&gt;
   &lt;div id=&quot;chart-months&quot;&gt;
-  &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;area&quot; height={160} /&gt;
+  &lt;ReactApexChart options={this.state.options} series={this.state.series} type=&quot;area&quot; height={180} /&gt;
 &lt;/div&gt;
 
   &lt;h5 class=&quot;github-style&quot;&gt;
@@ -110,7 +110,7 @@
   &lt;/h5&gt;
 
   &lt;div id=&quot;chart-years&quot;&gt;
-  &lt;ReactApexChart options={this.state.optionsYears} series={this.state.seriesYears} type=&quot;area&quot; height={200} /&gt;
+  &lt;ReactApexChart options={this.state.optionsYears} series={this.state.seriesYears} type=&quot;area&quot; height={150} /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
     </div>
@@ -130,7 +130,7 @@
               chart: {
                 id: 'chartyear',
                 type: 'area',
-                height: 160,
+                height: 180,
                 background: '#F6F8FA',
                 toolbar: {
                   show: false,
@@ -164,7 +164,8 @@
                 type: 'solid'
               },
               yaxis: {
-                show: true
+                show: true,
+                forceNiceScale: true
               },
               xaxis: {
                 type: 'datetime',
@@ -177,7 +178,7 @@
             }],
             optionsYears: {
               chart: {
-                height: 200,
+                height: 150,
                 type: 'area',
                 background: '#F6F8FA',
                 toolbar: {
@@ -190,8 +191,8 @@
                 selection: {
                   enabled: true,
                   xaxis: {
-                    min: new Date('26 Jan 2014').getTime(),
-                    max: new Date('29 Mar 2015').getTime()
+                    min: new Date('15 Feb 2016').getTime(),
+                    max: new Date('14 Feb 2017').getTime()
                   }
                 },
               },
@@ -227,7 +228,7 @@
             <div>
               <div id="wrapper">
                 <div id="chart-months">
-                <ReactApexChart options={this.state.options} series={this.state.series} type="area" height={160} />
+                <ReactApexChart options={this.state.options} series={this.state.series} type="area" height={180} />
               </div>
 
                 <h5 class="github-style">
@@ -241,7 +242,7 @@ <h5 class="github-style">
                 </h5>
 
                 <div id="chart-years">
-                <ReactApexChart options={this.state.optionsYears} series={this.state.seriesYears} type="area" height={200} />
+                <ReactApexChart options={this.state.optionsYears} series={this.state.seriesYears} type="area" height={150} />
               </div>
               </div>
               <div id="html-dist"></div>

diff --git a/samples/react/column/column-with-rotated-data-labels.html b/samples/react/column/column-with-rotated-data-labels.html
@@ -105,6 +105,7 @@
               },
               dataLabels: {
                 enabled: true,
+                offsetY: 2,
                 style: {
                     fontSize: '12px',
                     colors: ["#000000"]
@@ -130,8 +131,11 @@
                   '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
                   '2013-07-01', '2013-08-01', '2013-09-01'
                 ],
+                axisBorder: {
+                  offsetY: 20
+                },
                 labels: {
-                  rotate: -90
+                  rotate: -60
                 }
               }
             },

diff --git a/samples/source/area/area-github-style.xml b/samples/source/area/area-github-style.xml
@@ -71,7 +71,7 @@
 chart: {
   id: 'chartyear',
   type: 'area',
-  height: 160,
+  height: 180,
   background: '#F6F8FA',
   toolbar: {
     show: false,
@@ -105,7 +105,8 @@ fill: {
   type: 'solid'
 },
 yaxis: {
-  show: true
+  show: true,
+  forceNiceScale: true
 },
 xaxis: {
   type: 'datetime',
@@ -125,7 +126,7 @@ xaxis: {
 
 <options>
 chart: {
-  height: 200,
+  height: 150,
   type: 'area',
   background: '#F6F8FA',
   toolbar: {
@@ -138,8 +139,8 @@ chart: {
   selection: {
     enabled: true,
     xaxis: {
-      min: new Date('26 Jan 2014').getTime(),
-      max: new Date('29 Mar 2015').getTime()
+      min: new Date('15 Feb 2016').getTime(),
+      max: new Date('14 Feb 2017').getTime()
     }
   },
 },

diff --git a/samples/source/column/column-with-rotated-data-labels.xml b/samples/source/column/column-with-rotated-data-labels.xml
@@ -28,6 +28,7 @@ plotOptions: {
 },
 dataLabels: {
   enabled: true,
+  offsetY: 2,
   style: {
       fontSize: '12px',
       colors: ["#000000"]
@@ -53,8 +54,11 @@ xaxis: {
     '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
     '2013-07-01', '2013-08-01', '2013-09-01'
   ],
+  axisBorder: {
+    offsetY: 20
+  },
   labels: {
-    rotate: -90
+    rotate: -60
   }
 }
 </options>

diff --git a/samples/vanilla-js/area/area-github-style.html b/samples/vanilla-js/area/area-github-style.html
@@ -111,7 +111,7 @@ <h5 class="github-style">
           chart: {
           id: 'chartyear',
           type: 'area',
-          height: 160,
+          height: 180,
           background: '#F6F8FA',
           toolbar: {
             show: false,
@@ -145,7 +145,8 @@ <h5 class="github-style">
           type: 'solid'
         },
         yaxis: {
-          show: true
+          show: true,
+          forceNiceScale: true
         },
         xaxis: {
           type: 'datetime',
@@ -161,7 +162,7 @@ <h5 class="github-style">
           data: githubdata.series
         }],
           chart: {
-          height: 200,
+          height: 150,
           type: 'area',
           background: '#F6F8FA',
           toolbar: {
@@ -174,8 +175,8 @@ <h5 class="github-style">
           selection: {
             enabled: true,
             xaxis: {
-              min: new Date('26 Jan 2014').getTime(),
-              max: new Date('29 Mar 2015').getTime()
+              min: new Date('15 Feb 2016').getTime(),
+              max: new Date('14 Feb 2017').getTime()
             }
           },
         },

diff --git a/samples/vanilla-js/column/column-with-rotated-data-labels.html b/samples/vanilla-js/column/column-with-rotated-data-labels.html
@@ -88,6 +88,7 @@
         },
         dataLabels: {
           enabled: true,
+          offsetY: 2,
           style: {
               fontSize: '12px',
               colors: ["#000000"]
@@ -113,8 +114,11 @@
             '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
             '2013-07-01', '2013-08-01', '2013-09-01'
           ],
+          axisBorder: {
+            offsetY: 20
+          },
           labels: {
-            rotate: -90
+            rotate: -60
           }
         }
         };

diff --git a/samples/vue/area/area-github-style.html b/samples/vue/area/area-github-style.html
@@ -91,7 +91,7 @@
     <div id="app">
       <div id="wrapper">
       <div id="chart-months">
-      <apexchart type="area" height="160" :options="chartOptions" :series="series"></apexchart>
+      <apexchart type="area" height="180" :options="chartOptions" :series="series"></apexchart>
     </div>
 
       <h5 class="github-style">
@@ -105,7 +105,7 @@ <h5 class="github-style">
       </h5>
 
       <div id="chart-years">
-      <apexchart type="area" height="200" :options="chartOptionsYears" :series="seriesYears"></apexchart>
+      <apexchart type="area" height="150" :options="chartOptionsYears" :series="seriesYears"></apexchart>
     </div>
     </div>
     </div>
@@ -114,7 +114,7 @@ <h5 class="github-style">
     <div id="html">
       &lt;div id=&quot;wrapper&quot;&gt;
         &lt;div id=&quot;chart-months&quot;&gt;
-        &lt;apexchart type=&quot;area&quot; height=&quot;160&quot; :options=&quot;chartOptions&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
+        &lt;apexchart type=&quot;area&quot; height=&quot;180&quot; :options=&quot;chartOptions&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
       &lt;/div&gt;
 
         &lt;h5 class=&quot;github-style&quot;&gt;
@@ -128,7 +128,7 @@ <h5 class="github-style">
         &lt;/h5&gt;
 
         &lt;div id=&quot;chart-years&quot;&gt;
-        &lt;apexchart type=&quot;area&quot; height=&quot;200&quot; :options=&quot;chartOptionsYears&quot; :series=&quot;seriesYears&quot;&gt;&lt;/apexchart&gt;
+        &lt;apexchart type=&quot;area&quot; height=&quot;150&quot; :options=&quot;chartOptionsYears&quot; :series=&quot;seriesYears&quot;&gt;&lt;/apexchart&gt;
       &lt;/div&gt;
       &lt;/div&gt;
     </div>
@@ -149,7 +149,7 @@ <h5 class="github-style">
             chart: {
               id: 'chartyear',
               type: 'area',
-              height: 160,
+              height: 180,
               background: '#F6F8FA',
               toolbar: {
                 show: false,
@@ -183,7 +183,8 @@ <h5 class="github-style">
               type: 'solid'
             },
             yaxis: {
-              show: true
+              show: true,
+              forceNiceScale: true
             },
             xaxis: {
               type: 'datetime',
@@ -196,7 +197,7 @@ <h5 class="github-style">
           }],
           chartOptionsYears: {
             chart: {
-              height: 200,
+              height: 150,
               type: 'area',
               background: '#F6F8FA',
               toolbar: {
@@ -209,8 +210,8 @@ <h5 class="github-style">
               selection: {
                 enabled: true,
                 xaxis: {
-                  min: new Date('26 Jan 2014').getTime(),
-                  max: new Date('29 Mar 2015').getTime()
+                  min: new Date('15 Feb 2016').getTime(),
+                  max: new Date('14 Feb 2017').getTime()
                 }
               },
             },

diff --git a/samples/vue/column/column-with-rotated-data-labels.html b/samples/vue/column/column-with-rotated-data-labels.html
@@ -108,6 +108,7 @@
             },
             dataLabels: {
               enabled: true,
+              offsetY: 2,
               style: {
                   fontSize: '12px',
                   colors: ["#000000"]
@@ -133,8 +134,11 @@
                 '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01',
                 '2013-07-01', '2013-08-01', '2013-09-01'
               ],
+              axisBorder: {
+                offsetY: 20
+              },
               labels: {
-                rotate: -90
+                rotate: -60
               }
             }
           },

diff --git a/src/modules/Data.js b/src/modules/Data.js
@@ -715,23 +715,25 @@ export default class Data {
   excludeCollapsedSeriesInYAxis() {
     const w = this.w
     // fix issue #1215
-    // if stacked, not returning collapsed.index to preserve yaxis
-    if (this.w.globals.isMultipleYAxis && !w.config.chart.stacked) {
-      // Post revision 3.46.0 there is no longer a strict one-to-one
-      // correspondence between series and Y axes.
-      // An axis can be ignored only while all series referenced by it
-      // are collapsed.
-      let yAxisIndexes = []
-      w.globals.seriesYAxisMap.forEach((yAxisArr, yi) => {
-        let allCollapsed = true
-        yAxisArr.forEach((seriesIndex) => {
-          allCollapsed = allCollapsed && w.globals.collapsedSeriesIndices.indexOf(seriesIndex) !== -1
-        })
-        if (allCollapsed) {
-          yAxisIndexes.push(yi)
+    // Post revision 3.46.0 there is no longer a strict one-to-one
+    // correspondence between series and Y axes.
+    // An axis can be ignored only while all series referenced by it
+    // are collapsed.
+    let yAxisIndexes = []
+    w.globals.seriesYAxisMap.forEach((yAxisArr, yi) => {
+      let collapsedCount = 0
+      yAxisArr.forEach((seriesIndex) => {
+        if (w.globals.collapsedSeriesIndices.indexOf(seriesIndex) !== -1) {
+          collapsedCount++
         }
       })
-      w.globals.ignoreYAxisIndexes = yAxisIndexes ? yAxisIndexes.map((x) => x) : []
-    }
+      // It's possible to have a yaxis that doesn't reference any series yet,
+      // eg, because there are no series' yet, so don't list it as ignored
+      // prematurely.
+      if (collapsedCount > 0 && collapsedCount == yAxisArr.length) {
+        yAxisIndexes.push(yi)
+      }
+    })
+    w.globals.ignoreYAxisIndexes = yAxisIndexes.map((x) => x)
   }
-}
+}
diff --git a/src/modules/Range.js b/src/modules/Range.js
@@ -226,13 +226,18 @@ class Range {
 
     // and then, get the minY and maxY from all series
     const minYMaxY = this.getMinYMaxY(
-      0,
-      lowestYInAllSeries,
-      null,
-      gl.series.length
-    )
-    gl.minY = minYMaxY.lowestY
-    gl.maxY = minYMaxY.highestY
+                            0,
+                            lowestYInAllSeries,
+                            null,
+                            gl.series.length
+                          )
+    if (cnf.chart.type === 'bar') {
+      gl.minY = minYMaxY.minY
+      gl.maxY = minYMaxY.maxY
+    } else {
+      gl.minY = minYMaxY.lowestY
+      gl.maxY = minYMaxY.highestY
+    }
     lowestYInAllSeries = minYMaxY.lowestY
 
     if (cnf.chart.stacked) {