Merge pull request #4327 from rosco54/Issue_4132

If all series types match the chart type it isn't a combo chart

src/apexcharts.js

@@ -154,7 +154,7 @@ export default class ApexCharts {
       return null
     }
 
-    const combo = CoreUtils.checkComboSeries(ser)
+    const combo = CoreUtils.checkComboSeries(ser, w.config.chart.type)
     gl.comboCharts = combo.comboCharts
     gl.comboBarCount = combo.comboBarCount
 

src/modules/Core.js

@@ -178,9 +178,16 @@ export default class Core {
       i: [],
     }
 
+    let chartType = cnf.chart.type !== undefined ? cnf.chart.type : 'line'
+    // Check if the user has specified a type for any series.
+    let comboCount = 0
     gl.series.map((serie, st) => {
-      let comboCount = 0
-      // if user has specified a particular type for particular series
+      // The default type for chart is "line" and the default for series is the
+      // chart type, therefore, if the types of all series match the chart type,
+      // this should not be considered a combo chart.
+      // Combo charts are explicitly excluded from stacking with the exception
+      // that series of type "bar" can be stacked if the user sets "stackOnlyBar"
+      // true.
       if (typeof ser[st].type !== 'undefined') {
         if (ser[st].type === 'column' || ser[st].type === 'bar') {
           if (gl.series.length > 1 && cnf.plotOptions.bar.horizontal) {
@@ -191,54 +198,68 @@ export default class Core {
           }
           columnSeries.series.push(serie)
           columnSeries.i.push(st)
-          comboCount++
+          if (chartType !== 'bar') {
+            comboCount++
+          }
           w.globals.columnSeries = columnSeries.series
         } else if (ser[st].type === 'area') {
           areaSeries.series.push(serie)
           areaSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else if (ser[st].type === 'line') {
           lineSeries.series.push(serie)
           lineSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else if (ser[st].type === 'scatter') {
           scatterSeries.series.push(serie)
           scatterSeries.i.push(st)
         } else if (ser[st].type === 'bubble') {
           bubbleSeries.series.push(serie)
           bubbleSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else if (ser[st].type === 'candlestick') {
           candlestickSeries.series.push(serie)
           candlestickSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else if (ser[st].type === 'boxPlot') {
           boxplotSeries.series.push(serie)
           boxplotSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else if (ser[st].type === 'rangeBar') {
           rangeBarSeries.series.push(serie)
           rangeBarSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else if (ser[st].type === 'rangeArea') {
           rangeAreaSeries.series.push(gl.seriesRangeStart[st])
           rangeAreaSeries.seriesRangeEnd.push(gl.seriesRangeEnd[st])
           rangeAreaSeries.i.push(st)
-          comboCount++
+          if (chartType !== ser[st].type) {
+            comboCount++
+          }
         } else {
           // user has specified type, but it is not valid (other than line/area/column)
           console.warn(
             'You have specified an unrecognized chart type. Available types for this property are line/area/column/bar/scatter/bubble/candlestick/boxPlot/rangeBar/rangeArea'
           )
         }
-        if (comboCount > 1) {
-          gl.comboCharts = true
-        }
       } else {
         lineSeries.series.push(serie)
         lineSeries.i.push(st)
       }
     })
+    gl.comboCharts ||= comboCount > 0
 
     let line = new Line(this.ctx, xyRatios)
     let boxCandlestick = new BoxCandleStick(this.ctx, xyRatios)

src/modules/CoreUtils.js

@@ -8,12 +8,19 @@ class CoreUtils {
     this.w = ctx.w
   }
 
-  static checkComboSeries(series) {
+  static checkComboSeries(series, chartType) {
     let comboCharts = false
     let comboBarCount = 0
     let comboCount = 0
-
-    // if user specified a type in series too, turn on comboCharts flag
+
+    if (chartType === undefined) {
+      chartType = 'line'
+    }
+
+    // Check if user specified a type in series that may make us a combo chart.
+    // The default type for chart is "line" and the default for series is the
+    // chart type, therefore, if the types of all series match the chart type,
+    // this should not be considered a combo chart.
     if (series.length && typeof series[0].type !== 'undefined') {
       series.forEach((s) => {
         if (
@@ -24,7 +31,7 @@ class CoreUtils {
         ) {
           comboBarCount++
         }
-        if (typeof s.type !== 'undefined') {
+        if (typeof s.type !== 'undefined' && s.type !== chartType) {
           comboCount++
         }
       })

src/modules/Range.js

@@ -575,7 +575,9 @@ class Range {
 
   _setStackedMinMax() {
     const gl = this.w.globals
-    // for stacked charts, we calculate each series's parallel values. i.e, series[0][j] + series[1][j] .... [series[i.length][j]] and get the max out of it
+    // for stacked charts, we calculate each series's parallel values.
+    // i.e, series[0][j] + series[1][j] .... [series[i.length][j]]
+    // and get the max out of it
 
     if (!gl.series.length) return
     let seriesGroups = gl.seriesGroups
@@ -600,7 +602,7 @@ class Range {
             stackedNegs[group][j] = 0
           }
 
-          let stackSeries =
+          let stackSeries = 
             (this.w.config.chart.stacked && !gl.comboCharts) ||
             (this.w.config.chart.stacked &&
               gl.comboCharts &&