Merge pull request #4284 from rosco54/NiceScale_enhancements

Axis scaling enhancements
apexcharts · Mar 7, 2024 · 0b95446 · 0b95446
2 parents 98a212f + d41387d
commit 0b95446
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 123 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
@@ -206,8 +206,9 @@ export default class Data {
       range = this.handleRangeDataFormat('xy', ser, i)
     }
 
-    gl.seriesRangeStart.push(range.start)
-    gl.seriesRangeEnd.push(range.end)
+    // Fix: RangeArea Chart: hide all series results in a crash #3984
+    gl.seriesRangeStart.push(range.start === undefined ? [] : range.start)
+    gl.seriesRangeEnd.push(range.end === undefined ? [] : range.end)
 
     gl.seriesRange.push(range.rangeUniques)
 
@@ -715,23 +716,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)
   }
-}
+}