sea-chart 2.0.10 → 2.0.12

package/dist/api/index.js

@@ -59,7 +59,7 @@ class SeaChartAPI {
         dtableUuid,
         accessToken
       } = _this;
-      const url = dtableDB + 'api/v1/query/' + dtableUuid;
+      const url = dtableDB + '/api/v2/dtables/' + dtableUuid + '/sql/';
       const data = {
         sql,
         convert_keys,

package/dist/utils/sql/chart-data-sql.js

@@ -324,6 +324,7 @@ class ChartDataSQL {
       const {
         x_axis_column_key,
         x_axis_geolocation_granularity,
+        x_axis_date_granularity,
         y_axis_summary_type,
         y_axis_summary_column_key,
         y_axis_summary_method,
@@ -339,7 +340,7 @@ class ChartDataSQL {
       }
       this._update_filter_sql(true, groupby_column);
       const groupby_column_name = this._chart_column_name_to_sql(groupby_column, {
-        'date_granularity': 'day',
+        'date_granularity': x_axis_date_granularity,
         'geolocation_granularity': x_axis_geolocation_granularity
       });
       let summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);

package/dist/view/wrapper/bar-compare.js

@@ -53,7 +53,7 @@ class BarCompare extends _chartComponent.default {
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         display_increase,
-        y_axis_auto_range,
+        y_axis_auto_range = true,
         y_axis_min,
         y_axis_max
       } = chart.config;
@@ -63,10 +63,13 @@ class BarCompare extends _chartComponent.default {
         insertPadding
       } = this.chartBoundingClientRect;
       data = data.sort((a, b) => d3.ascending(a.name, b.name));
-      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
       const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
       const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]);
-      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -74,15 +77,7 @@ class BarCompare extends _chartComponent.default {
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
-      });
-
-      // Y axis
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
-        g.select('.domain').remove();
-        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
+        this.checkTickOverlap(g);
       });
 
       // Rect group

package/dist/view/wrapper/bar-custom-stack.js

@@ -141,27 +141,22 @@ class BarCustom extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       const organizedData = this.organizeData(data);
       const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
-      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
       const allSeries = this.getAllSeries(organizedData);
       const niceEnd = d3.nice(0, d3.max(allSeries, d => d[1]), 5)[1];
       const y = d3.scaleLinear().domain([0, niceEnd]).range([chartHeight - insertPadding, insertPadding]);
 
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
+
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
-      });
-
-      // Y axis
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
-        g.select('.domain').remove();
-        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
+        this.checkTickOverlap(g);
       });
 
       // Rect group
@@ -175,15 +170,13 @@ class BarCustom extends _chartComponent.default {
           name
         } = d;
         return fx(name);
-      }).selectAll().data(d => d.stacks).join('g').attr('class', 'stackGroup').attr('data-slugid', d => d.slugid).selectAll().data(d => d.series).join('rect').attr('class', 'stack').attr('data-isTop', (_, index, arr) => {
-        return index === arr.length - 1;
-      }).attr('x', d => x(d.stackKey)).attr('y', d => y(d[0][1])).attr('width', x.bandwidth()).attr('height', d => {
+      }).selectAll().data(d => d.stacks).join('g').attr('class', 'stackGroup').attr('data-slugid', d => d.slugid).selectAll().data(d => d.series).join('rect').attr('class', 'stack').attr('x', d => x(d.stackKey)).attr('y', d => y(d[0][1])).attr('width', x.bandwidth()).attr('height', d => {
         const height = y(d[0][0]) - y(d[0][1]);
         return isNaN(height) ? 0 : height;
       }).attr('fill', d => color(d.key)).attr('data-value', d => d.stackData.value).attr('data-rectId', d => d.stackData.slugId).attr('data-groupName', d => d.stackData.group_name).attr('data-title', d => d.stackData.name).call(g => {
         // add rect borderRadius
         Array.from(g._parents).forEach(group => {
-          const topRect = Array.from(group.children).find(rect => rect.getAttribute('data-isTop') === 'true');
+          const topRect = Array.from(group.children).reverse().find(rect => Number(rect.getAttribute('height')) !== 0);
           // Add mask rect
           if (topRect) {
             this.addMaskRect(group, topRect, x.bandwidth(), color);
@@ -225,6 +218,8 @@ class BarCustom extends _chartComponent.default {
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       Array.from(g._parents).forEach(group => {
         Array.from(group.children).forEach(rect => {
+          // The height is 0, and the label is not displayed.
+          if (Number(rect.getAttribute('height')) === 0) return;
           this.addLabelToRectCenter({
             container: rect.parentNode,
             x: Number(rect.getAttribute('x')),

package/dist/view/wrapper/bar-group.js

@@ -105,25 +105,20 @@ class BarGroup extends _chartComponent.default {
       const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme); // use single select column color
 
-      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]);
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]);
+
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
-      });
-
-      // Y axis
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
-        g.select('.domain').remove();
-        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
+        this.checkTickOverlap(g);
       });
 
       // Rect group

package/dist/view/wrapper/bar-stack.js

@@ -106,25 +106,20 @@ class BarStack extends _chartComponent.default {
         let [_, group] = _ref;
         return (_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value;
       })(d3.index(data, d => d.name, d => d.group_name));
-      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
       const niceEnd = d3.nice(0, d3.max(series, d => d3.max(d, d => d[1])), 5)[1];
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
-      });
-
-      // Y axis
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
-        g.select('.domain').remove();
-        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
+        this.checkTickOverlap(g);
       });
 
       // Rect group
@@ -151,14 +146,23 @@ class BarStack extends _chartComponent.default {
         } = d;
         return data[0];
       }).call(g => {
+        const groupRects = this.handleGroupRects(series, g._parents);
+        groupRects.forEach(group => {
+          var _firstEl;
+          const reverseGroup = group.reverse();
+          let firstEl = reverseGroup[0]; // firstEl is top level rect
+          if (Number(firstEl.getAttribute('height')) === 0) {
+            firstEl = reverseGroup.slice(1).find(item => Number(item.getAttribute('height')) !== 0);
+          }
+          // Add mask rect
+          firstEl && this.addMaskRect((_firstEl = firstEl) === null || _firstEl === void 0 ? void 0 : _firstEl.parentNode, firstEl, x.bandwidth());
+        });
         const [topG] = g._parents.slice(-1);
-        Array.from(topG.children).forEach(rect => {
+        Array.from(topG.children).forEach((rect, index) => {
           // Add label (get the total value of each stack)
           if (display_each_block_data) {
             this.addLabelByEachStack(data, topG, rect, x);
           }
-          // Add mask rect
-          this.addMaskRect(topG, rect, x.bandwidth());
         });
         // Add label
         if (y_axis_show_value) {
@@ -186,6 +190,19 @@ class BarStack extends _chartComponent.default {
         groupColumn: this.props.columnGroupbyColumn
       });
     };
+    // Horizontal stacking processing position vertical stacking
+    this.handleGroupRects = (series, gParents) => {
+      const groupRects = [];
+      const len = series[0].length;
+      for (let i = 0; i < len; i++) {
+        const rects = [];
+        gParents.forEach(item => {
+          rects.push(item.children[i]);
+        });
+        groupRects.push(rects);
+      }
+      return groupRects;
+    };
     this.showTooltip = event => {
       const offsetX = d3.pointer(event)[0];
       const offsetY = d3.pointer(event)[1];
@@ -284,6 +301,8 @@ class BarStack extends _chartComponent.default {
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       g._parents.forEach(group => {
         Array.from(group.children).forEach(rect => {
+          // The height is 0, and the label is not displayed.
+          if (Number(rect.getAttribute('height')) === 0) return;
           this.addLabelToRectCenter({
             container: group,
             x: Number(rect.getAttribute('x')),

package/dist/view/wrapper/bar.js

@@ -153,20 +153,15 @@ class Bar extends _chartComponent.default {
         insertPadding,
         marginTop
       } = this.chartBoundingClientRect;
-      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
       this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
-      });
-      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
-        g.select('.domain').remove();
-        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
-        g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
-        g.selectAll('text').attr('font-size', theme.fontSize);
-        g.selectAll('text').attr('fill', theme.textColor);
+        this.checkTickOverlap(g);
       });
       const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
       rectsWrapper.selectAll().data(data).join('rect').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {

package/dist/view/wrapper/chart-component.js

@@ -740,25 +740,26 @@ class ChartComponent extends _react.Component {
         } = this.getLegendBoundary(legendPosition);
         legendItems.forEach((item, index) => {
           let translateX = start;
-          const lastItem = legendItems[index - 1];
+          const prevItem = legendItems[index - 1];
           if (index > 0) {
             const {
               width
-            } = lastItem.getBoundingClientRect();
-            const prevTranslateX = Number(lastItem.getAttribute('data-translateX'));
+            } = prevItem.getBoundingClientRect();
+            const prevTranslateX = Number(prevItem.getAttribute('data-translateX'));
             translateX = prevTranslateX + width + legendItemMargin;
           }
+          d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
 
           // legend items add offset 
           if (legendPosition === 'top-right') {
             d3.select(item).attr('opacity', 0);
+            // Execute only once
             if (index === legendItems.length - 1) {
               queueMicrotask(() => {
                 this.setLegendItemOffset(legendItems, end);
               });
             }
           }
-          d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
         });
       });
     };
@@ -783,6 +784,7 @@ class ChartComponent extends _react.Component {
       let allWidth = start;
       const groupsData = [];
       const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
+      let lastIndex = 0;
       legendData.forEach((item, index) => {
         const virtualLegend = this.chart.append('g').attr('opacity', 0);
         virtualLegend.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r);
@@ -792,15 +794,16 @@ class ChartComponent extends _react.Component {
         } = virtualLegend.node().getBoundingClientRect();
         const itemWidth = index === legendData.length - 1 ? width : width + legendItemMargin; // last item no used margin
         allWidth = allWidth + itemWidth;
-        if (allWidth >= end) {
-          groupsData.push(newLegendData.slice(0, index));
-          newLegendData.splice(0, index);
-          allWidth = 0;
+        if (allWidth > end) {
+          groupsData.push(newLegendData.slice(0, index - lastIndex));
+          newLegendData.splice(0, index - lastIndex);
+          lastIndex = index;
+          allWidth = start + itemWidth;
         }
         virtualLegend.remove();
       });
       const restLegendItems = newLegendData.slice(0);
-      groupsData.push(restLegendItems);
+      restLegendItems.length !== 0 && groupsData.push(restLegendItems);
       return groupsData;
     };
     this.getLegendBoundary = legendPosition => {
@@ -1162,6 +1165,104 @@ class ChartComponent extends _react.Component {
       clipPath.node().appendChild(clipRect.node());
       d3.select(rect).attr('clip-path', "url(#".concat(rectId, ")"));
     };
+    this.drawYaxis = (g, theme) => {
+      const {
+        width: chartWidth,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      // remove domain
+      g.select('.domain').remove();
+
+      // add text
+      g.selectAll('text').attr('font-size', theme.fontSize);
+      g.selectAll('text').attr('fill', theme.textColor);
+      this.checkTextOverflow(g.selectAll('text').nodes());
+
+      // line
+      g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+      g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - this.horizontalOverflowOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+
+      // update g translateX
+      g.attr('transform', "translate(".concat(insertPadding + this.horizontalOverflowOffset, ", 0)"));
+    };
+    this.checkTextOverflow = allTextEl => {
+      const {
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const allTextWidth = allTextEl.map(item => {
+        const {
+          width
+        } = item.getBoundingClientRect();
+        return width;
+      });
+      const maxTextWidth = Math.max(...allTextWidth);
+      this.horizontalOverflowOffset = 0;
+      if (maxTextWidth > insertPadding) {
+        // horizontal overflow
+        const offset = maxTextWidth + 3 - insertPadding; // 3 is text and line default spacing
+        this.horizontalOverflowOffset = offset;
+      }
+    };
+    this.checkTickOverlap = g => {
+      const allTicks = g.selectAll('.tick').nodes();
+      // Hide overlapping ticks
+      for (let i = 0; i < allTicks.length; i++) {
+        const curText = d3.select(allTicks[i]).select('text').node();
+        const {
+          right: curRight
+        } = curText.getBoundingClientRect();
+        for (let j = i + 1; j < allTicks.length; j++) {
+          const nextText = d3.select(allTicks[j]).select('text').node();
+          if (curText && nextText) {
+            const {
+              left: nextLeft
+            } = nextText.getBoundingClientRect();
+            if (curRight >= nextLeft) {
+              i = j;
+              d3.select(nextText.parentNode).attr('opacity', 0);
+            }
+          }
+        }
+      }
+      const {
+        width: maxWidth
+      } = g.node().getBoundingClientRect();
+      let allWidth = 0;
+      // Can't fit tilted text
+      for (let tick of allTicks) {
+        const {
+          width
+        } = tick.getBoundingClientRect();
+        allWidth = allWidth + width;
+        if (allWidth > maxWidth) break;
+      }
+      if (allWidth > maxWidth) {
+        allTicks.forEach(tick => {
+          const opacityVal = tick.getAttribute('opacity');
+          if (Number(opacityVal) !== 0) {
+            // roate 
+            d3.select(tick).select('text').attr('transform', 'rotate(45)').style('text-anchor', 'start').attr('dy', '0.4em').attr('dx', '0.4em');
+          }
+        });
+      }
+
+      // Text overflow
+      const {
+        height
+      } = g.node().getBoundingClientRect();
+      const {
+        insertPadding
+      } = this.chartBoundingClientRect;
+      if (height > insertPadding) {
+        const viewBox = this.chart.node().getAttribute('viewBox').split(',');
+        const viewHeight = viewBox[viewBox.length - 1];
+        const newViewHeight = Number(viewHeight) + (height - insertPadding);
+        viewBox[viewBox.length - 1] = "".concat(newViewHeight);
+        queueMicrotask(() => {
+          this.chart.attr('viewBox', viewBox.join(','));
+        });
+      }
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};
   }

package/dist/view/wrapper/index.js

@@ -113,9 +113,10 @@ const Wrapper = _ref => {
             config
           } = chart;
           const {
-            column_groupby_multiple_numeric_column
+            column_groupby_multiple_numeric_column,
+            column_groupby_column_key
           } = config;
-          const BarGroupComponent = column_groupby_multiple_numeric_column ? _barStack.default : _barGroup.default;
+          const BarGroupComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? _barStack.default : _bar.default;
           return /*#__PURE__*/_react.default.createElement(BarGroupComponent, Object.assign({}, baseProps, {
             canvasStyle: canvasStyle
           }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",