@orbcharts/plugins-basic 3.0.0-beta.6 → 3.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,9 +35,9 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-beta.4",
-    "@orbcharts/core-types": "^3.0.0-beta.3",
-    "@orbcharts/plugins-basic-types": "^3.0.0-beta.4",
+    "@orbcharts/core": "^3.0.0-beta.6",
+    "@orbcharts/core-types": "^3.0.0-beta.5",
+    "@orbcharts/plugins-basic-types": "^3.0.0-beta.8",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseBars.ts

@@ -92,7 +92,7 @@ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding =
   barPadding: number
   barGroupPadding: number
 }) {
-  const eachGroupWidth = groupAmount > 1
+  const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
     ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
     : axisWidth
   const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
@@ -127,7 +127,7 @@ function calctransitionItem (barGroupAmount: number, totalDuration: number) {
 function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayoutData, zeroYArr, groupLabels, barScale, params, chartParams, barWidth, transformedBarRadius, delayGroup, transitionItem, isSeriesSeprate }: RenderBarParams) {
 
   const barHalfWidth = barWidth! / 2
-// console.log(visibleComputedLayoutData)
+
   graphicGSelection
     .each((seriesData, seriesIndex, g) => {
       d3.select(g[seriesIndex])
@@ -140,7 +140,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayo
               .append('rect')
               .classed(rectClassName, true)
               .attr('cursor', 'pointer')
-              .attr('height', d => 0)
+              .attr('height', d => 1)
           },
           update => update,
           exit => exit.remove()
@@ -156,7 +156,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, visibleComputedLayo
         .duration(transitionItem)
         .ease(getD3TransitionEase(chartParams.transitionEase))
         .delay((d, i) => d.groupIndex * delayGroup)
-        .attr('height', d => Math.abs(d.axisYFromZero))
+        .attr('height', d => Math.abs(d.axisYFromZero) || 1) // 無值還是給一個 1 的高度
     })
 
 

package/src/base/BaseBarsTriangle.ts

@@ -100,7 +100,9 @@ function calcBarWidth ({ axisWidth, groupAmount, barAmountOfGroup, barPadding =
   barPadding: number
   barGroupPadding: number
 }) {
-  const eachGroupWidth = axisWidth / (groupAmount - 1)
+  const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
+    ? axisWidth / (groupAmount - 1)
+    : axisWidth
   const width = (eachGroupWidth - barGroupPadding) / barAmountOfGroup - barPadding
   return width > 1 ? width : 1
 }
@@ -164,7 +166,7 @@ function renderTriangleBars ({ graphicGSelection, pathGClassName, pathClassName,
 
       // path
       gSelection.select(`path.${pathClassName}`)
-        .attr('height', d => Math.abs(d.axisYFromZero))
+        .attr('height', d => Math.abs(d.axisYFromZero) || 1) // 無值還是給一個 1 的高度
         .attr('y', d => d.axisY < zeroYArr[seriesIndex] ? d.axisY : zeroYArr[seriesIndex])
         .attr('x', d => isSeriesSeprate ? 0 : barScale(d.seriesLabel)!)
         // .style('fill', d => `url(#${d.linearGradientId})`)

package/src/base/BaseDots.ts

@@ -340,7 +340,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
-
+    
     data.graphicSelection
       .on('mouseover', (event, datum) => {
         // event.stopPropagation()

package/src/base/BaseGroupAxis.ts

@@ -79,7 +79,7 @@ interface GroupLabelData {
 // const groupingLabelClassName = getClassName(pluginName, 'groupingLabel')
 const defaultTickSize = 6
 
-function createGroupLabelData (groupLabels: string[], tickFormat: string | ((text: any) => string)): GroupLabelData[] {
+function createGroupLabelData (groupLabels: string[], tickFormat: string | ((text: any) => string  | d3.NumberValue)): GroupLabelData[] {
   return groupLabels.map((_text, i) => {
     const text = parseTickFormatValue(_text, tickFormat)
     const textArr = typeof text === 'string' ? text.split('\n') : [text]
@@ -106,32 +106,32 @@ function renderAxisLabel ({ selection, groupingLabelClassName, fullParams, axisL
   const offsetY = fullParams.tickPadding + fullParams.labelOffset[1]
   let labelX = 0
   let labelY = 0
-  if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
+  if (fullDataFormatter.groupAxis.position === 'bottom') {
     labelY = offsetY
-    if (fullDataFormatter.grid.valueAxis.position === 'left') {
+    if (fullDataFormatter.valueAxis.position === 'left') {
       labelX = offsetX
-    } else if (fullDataFormatter.grid.valueAxis.position === 'right') {
+    } else if (fullDataFormatter.valueAxis.position === 'right') {
       labelX = - offsetX
     }
-  } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
+  } else if (fullDataFormatter.groupAxis.position === 'top') {
     labelY = - offsetY
-    if (fullDataFormatter.grid.valueAxis.position === 'left') {
+    if (fullDataFormatter.valueAxis.position === 'left') {
       labelX = offsetX
-    } else if (fullDataFormatter.grid.valueAxis.position === 'right') {
+    } else if (fullDataFormatter.valueAxis.position === 'right') {
       labelX = - offsetX
     }
-  } else if (fullDataFormatter.grid.groupAxis.position === 'left') {
+  } else if (fullDataFormatter.groupAxis.position === 'left') {
     labelX = - offsetX
-    if (fullDataFormatter.grid.valueAxis.position === 'bottom') {
+    if (fullDataFormatter.valueAxis.position === 'bottom') {
       labelY = - offsetY
-    } else if (fullDataFormatter.grid.valueAxis.position === 'top') {
+    } else if (fullDataFormatter.valueAxis.position === 'top') {
       labelY = offsetY
     }
-  } else if (fullDataFormatter.grid.groupAxis.position === 'right') {
+  } else if (fullDataFormatter.groupAxis.position === 'right') {
     labelX = offsetX
-    if (fullDataFormatter.grid.valueAxis.position === 'bottom') {
+    if (fullDataFormatter.valueAxis.position === 'bottom') {
       labelY = - offsetY
-    } else if (fullDataFormatter.grid.valueAxis.position === 'top') {
+    } else if (fullDataFormatter.valueAxis.position === 'top') {
       labelY = offsetY
     }
   }
@@ -162,7 +162,7 @@ function renderAxisLabel ({ selection, groupingLabelClassName, fullParams, axisL
         // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
         .attr('x', labelX)
         .attr('y', labelY)
-        .text(d => fullDataFormatter.grid.groupAxis.label)
+        .text(d => fullDataFormatter.groupAxis.label)
     })
     .attr('transform', d => `translate(${gridAxesSize.width}, 0)`)
     // .attr('transform', d => `translate(${gridAxesSize.width + d.tickPadding + fullParams.labelOffset[0]}, ${- d.tickPadding - fullParams.labelOffset[1]})`)
@@ -197,16 +197,16 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
   // 刻度文字偏移
   let tickPadding = 0
   let textX = 0
-  if (fullDataFormatter.grid.groupAxis.position === 'left') {
+  if (fullDataFormatter.groupAxis.position === 'left') {
     tickPadding = 0
     textX = - fullParams.tickPadding
-  } else if (fullDataFormatter.grid.groupAxis.position === 'right') {
+  } else if (fullDataFormatter.groupAxis.position === 'right') {
     tickPadding = 0
     textX = fullParams.tickPadding
-  } else if (fullDataFormatter.grid.groupAxis.position === 'bottom') {
+  } else if (fullDataFormatter.groupAxis.position === 'bottom') {
     tickPadding = fullParams.tickPadding
     textX = 0
-  } else if (fullDataFormatter.grid.groupAxis.position === 'top') {
+  } else if (fullDataFormatter.groupAxis.position === 'top') {
     tickPadding = - fullParams.tickPadding
     textX = - 0
   }
@@ -248,7 +248,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
           renderTspansOnAxis(d3.select(n[i]), {
             textArr,
             textSizePx,
-            groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+            groupAxisPosition: fullDataFormatter.groupAxis.position
           })
         })
     })
@@ -275,7 +275,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
     .style('transform', textReverseTransformWithRotate)
   
   // 抵消掉預設的偏移
-  // if (fullDataFormatter.grid.groupAxis.position === 'left' || fullDataFormatter.grid.groupAxis.position === 'right') {
+  // if (fullDataFormatter.groupAxis.position === 'left' || fullDataFormatter.groupAxis.position === 'right') {
     xText.attr('dy', 0)
   // }
     
@@ -386,7 +386,7 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   // const tickTextFormatter$ = fullDataFormatter$
   //   .pipe(
   //     map(d => {
-  //       return d.grid.seriesDirection === 'row' ? d.grid.columnLabelFormat : d.grid.rowLabelFormat
+  //       return d.seriesDirection === 'row' ? d.columnLabelFormat : d.rowLabelFormat
   //     })
   //   )
 
@@ -472,12 +472,12 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   //   ).subscribe(data => {
   //     const groupMin = 0
   //     const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-  //     const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-  //       ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //       : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-  //     const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'auto'
-  //       ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-  //       : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+  //       ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+  //       : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+  //     const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'auto'
+  //       ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+  //       : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
       
   //     const groupingLength = data.computedData[0]
   //       ? data.computedData[0].length
@@ -496,7 +496,7 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   //       })
 
       
-  //     const padding = data.fullDataFormatter.grid.groupAxis.scalePadding
+  //     const padding = data.fullDataFormatter.groupAxis.scalePadding
       
   //     const groupScale = createLabelToAxisScale({
   //       axisLabels,
@@ -518,13 +518,13 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
     map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      // const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-      //   ? groupMin - data.fullDataFormatter.grid.groupAxis.scalePadding
-      //   : data.fullDataFormatter.grid.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMin = data.fullDataFormatter.grid.groupAxis.scaleDomain[0] - data.fullDataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? groupMax + data.fullDataFormatter.grid.groupAxis.scalePadding
-        : data.fullDataFormatter.grid.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.grid.groupAxis.scalePadding
+      // const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
+      //   ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
+      //   : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] - data.fullDataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
+        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     }),
@@ -559,20 +559,20 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
       let textAnchor: 'start' | 'middle' | 'end' = 'middle'
       let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
 
-      if (data.fullDataFormatter.grid.groupAxis.position === 'bottom') {
+      if (data.fullDataFormatter.groupAxis.position === 'bottom') {
         textAnchor = data.fullParams.tickTextRotate
           ? 'end'
           : 'middle'
         dominantBaseline = 'hanging'
-      } else if (data.fullDataFormatter.grid.groupAxis.position === 'top') {
+      } else if (data.fullDataFormatter.groupAxis.position === 'top') {
         textAnchor = data.fullParams.tickTextRotate
           ? 'start'
           : 'middle'
         dominantBaseline = 'auto'
-      } else if (data.fullDataFormatter.grid.groupAxis.position === 'left') {
+      } else if (data.fullDataFormatter.groupAxis.position === 'left') {
         textAnchor = 'end'
         dominantBaseline = 'middle'
-      } else if (data.fullDataFormatter.grid.groupAxis.position === 'right') {
+      } else if (data.fullDataFormatter.groupAxis.position === 'right') {
         textAnchor = 'start'
         dominantBaseline = 'middle'
       }
@@ -589,22 +589,22 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
       let textAnchor: 'start' | 'middle' | 'end' = 'start'
       let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
 
-      if (d.grid.groupAxis.position === 'bottom') {
+      if (d.groupAxis.position === 'bottom') {
         dominantBaseline = 'hanging'
-      } else if (d.grid.groupAxis.position === 'top') {
+      } else if (d.groupAxis.position === 'top') {
         dominantBaseline = 'auto'
-      } else if (d.grid.groupAxis.position === 'left') {
+      } else if (d.groupAxis.position === 'left') {
         textAnchor = 'end'
-      } else if (d.grid.groupAxis.position === 'right') {
+      } else if (d.groupAxis.position === 'right') {
         textAnchor = 'start'
       }
-      if (d.grid.valueAxis.position === 'left') {
+      if (d.valueAxis.position === 'left') {
         textAnchor = 'start'
-      } else if (d.grid.valueAxis.position === 'right') {
+      } else if (d.valueAxis.position === 'right') {
         textAnchor = 'end'
-      } else if (d.grid.valueAxis.position === 'bottom') {
+      } else if (d.valueAxis.position === 'bottom') {
         dominantBaseline = 'auto'
-      } else if (d.grid.valueAxis.position === 'top') {
+      } else if (d.valueAxis.position === 'top') {
         dominantBaseline = 'hanging'
       }
       return {

package/src/base/BaseLegend.ts

@@ -98,10 +98,10 @@ const defaultListStyle: ListStyle = {
 }
 
 function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
-  const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
+  const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].label.length
     ? seriesIndex
-    : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
-  return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
+    : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].label.length
+  return fullChartParams.colors[fullChartParams.colorScheme].label[colorIndex]
 }
 
 
@@ -668,7 +668,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
             )
             .attr('x', data.textSizePx * 1.5)
             .attr('font-size', data.fullChartParams.styles.textSize)
-            .attr('fill', d => data.fullParams.textColorType === 'series'
+            .attr('fill', d => data.fullParams.textColorType === 'label'
               ? getSeriesColor(d.seriesIndex, data.fullChartParams)
               : getColor(data.fullParams.textColorType, data.fullChartParams))
             .text(d => d.text)

package/src/base/BaseLineAreas.ts

@@ -23,7 +23,7 @@ import type {
 } from '../../lib/core-types'
 import type { BaseLineAreasParams } from '../../lib/plugins-basic-types'
 import { getD3TransitionEase } from '../utils/d3Utils'
-import { getClassName, getUniID, getMinAndMaxValue } from '../utils/orbchartsUtils'
+import { getClassName, getUniID, getMinMaxValue } from '../utils/orbchartsUtils'
 import { gridGroupPositionFnObservable } from '../grid/gridObservables'
 import { gridSelectionsObservable } from '../grid/gridObservables'
 

package/src/base/{BaseBarStack.ts → BaseStackedBar.ts}

@@ -20,19 +20,19 @@ import type {
   ContainerPositionScaled,
   Layout,
   TransformData } from '../../lib/core-types'
-import type { BaseBarStackParams } from '../../lib/plugins-basic-types'
+import type { BaseStackedBarParams } from '../../lib/plugins-basic-types'
 import { getD3TransitionEase } from '../utils/d3Utils'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 import { gridSelectionsObservable } from '../grid/gridObservables'
 import { shareReplay } from 'rxjs/operators'
 
-// export interface BaseBarStackParams {
+// export interface BaseStackedBarParams {
 //   barWidth: number
 //   barGroupPadding: number
 //   barRadius: number | boolean
 // }
 
-interface BaseBarStackContext {
+interface BaseStackedBarContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
   computedLayoutData$: Observable<ComputedLayoutDataGrid>
@@ -41,7 +41,7 @@ interface BaseBarStackContext {
   seriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
-  fullParams$: Observable<BaseBarStackParams>
+  fullParams$: Observable<BaseStackedBarParams>
   fullDataFormatter$: Observable<DataFormatterGrid>
   fullChartParams$: Observable<ChartParams>
   gridAxesTransform$: Observable<TransformData>
@@ -70,7 +70,7 @@ interface RenderBarParams {
   zeroY: number
   groupLabels: string[]
   // barScale: d3.ScalePoint<string>
-  params: BaseBarStackParams
+  params: BaseStackedBarParams
   chartParams: ChartParams
   barWidth: number
   transformedBarRadius: [number, number][]
@@ -87,7 +87,7 @@ type ClipPathDatum = {
   height: number;
 }
 
-// const pluginName = 'BarStack'
+// const pluginName = 'StackedBar'
 // const rectClassName = getClassName(pluginName, 'rect')
 // group的delay在動畫中的佔比（剩餘部份的時間為圖形本身的動畫時間，因為delay時間和最後一個group的動畫時間加總為1）
 const groupDelayProportionOfDuration = 0.3
@@ -97,13 +97,15 @@ function calcBarWidth ({ axisWidth, groupAmount, barGroupPadding = 0 }: {
   groupAmount: number
   barGroupPadding: number
 }) {
-  const eachGroupWidth = axisWidth / (groupAmount - 1)
+  const eachGroupWidth = groupAmount > 1 // 等於 1 時會算出 Infinity
+    ? axisWidth / (groupAmount - 1) // -1是因為要扣掉兩側的padding
+    : axisWidth
   const width = eachGroupWidth - barGroupPadding
   return width > 1 ? width : 1
 
 }
 
-// function makeBarScale (barWidth: number, seriesLabels: string[], params: BarStackParams) {
+// function makeBarScale (barWidth: number, seriesLabels: string[], params: StackedBarParams) {
 //   const barHalfWidth = barWidth! / 2
 //   const barGroupWidth = barWidth * seriesLabels.length + params.barPadding! * seriesLabels.length
 //   return d3.scalePoint()
@@ -143,7 +145,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, gro
               .append('rect')
               .classed(rectClassName, true)
               .attr('cursor', 'pointer')
-              .attr('height', d => 0)
+              .attr('height', d => 1)
           },
           update => update,
           exit => exit.remove()
@@ -160,7 +162,7 @@ function renderRectBars ({ graphicGSelection, rectClassName, barData, zeroY, gro
         .ease(getD3TransitionEase(chartParams.transitionEase))
         .delay((d, i) => d.groupIndex * delayGroup)
         .attr('y', d => d._barStartY)
-        .attr('height', d => Math.abs(d._barHeight))
+        .attr('height', d => Math.abs(d._barHeight) || 1) // 無值還是給一個 1 的高度
     })
 
   // const barGroup = graphicGSelection
@@ -290,7 +292,7 @@ function highlight ({ selection, ids, fullChartParams }: {
 }
 
 
-export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName: string, {
+export const createBaseStackedBar: BasePluginFn<BaseStackedBarContext> = (pluginName: string, {
   selection,
   computedData$,
   computedLayoutData$,
@@ -486,13 +488,13 @@ export const createBaseBarStack: BasePluginFn<BaseBarStackContext> = (pluginName
     map(data => {
       const groupMin = 0
       const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      // const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0] === 'auto'
-      //   ? groupMin // - data.dataFormatter.grid.groupAxis.scalePadding
-      //   : data.dataFormatter.grid.groupAxis.scaleDomain[0] as number // - data.dataFormatter.grid.groupAxis.scalePadding
-      const groupScaleDomainMin = data.dataFormatter.grid.groupAxis.scaleDomain[0]
-      const groupScaleDomainMax = data.dataFormatter.grid.groupAxis.scaleDomain[1] === 'max'
-        ? groupMax // + data.dataFormatter.grid.groupAxis.scalePadding
-        : data.dataFormatter.grid.groupAxis.scaleDomain[1] as number // + data.dataFormatter.grid.groupAxis.scalePadding
+      // const groupScaleDomainMin = data.dataFormatter.groupAxis.scaleDomain[0] === 'auto'
+      //   ? groupMin // - data.dataFormatter.groupAxis.scalePadding
+      //   : data.dataFormatter.groupAxis.scaleDomain[0] as number // - data.dataFormatter.groupAxis.scalePadding
+      const groupScaleDomainMin = data.dataFormatter.groupAxis.scaleDomain[0]
+      const groupScaleDomainMax = data.dataFormatter.groupAxis.scaleDomain[1] === 'max'
+        ? groupMax // + data.dataFormatter.groupAxis.scalePadding
+        : data.dataFormatter.groupAxis.scaleDomain[1] as number // + data.dataFormatter.groupAxis.scalePadding
 
       return [groupScaleDomainMin, groupScaleDomainMax]
     })

package/src/base/BaseTooltip.ts

@@ -259,7 +259,7 @@ export const createBaseTooltip: BasePluginFn<BaseTooltipContext> = (pluginName:
         textSize: data.fullChartParams.styles.textSize,
         textSizePx: data.textSizePx,
         textColor: getColor(data.fullParams.textColorType, data.fullChartParams),
-        seriesColors: data.fullChartParams.colors[data.fullChartParams.colorScheme].series
+        seriesColors: data.fullChartParams.colors[data.fullChartParams.colorScheme].label
       }
     })
   )