sea-chart 2.0.16 → 2.0.17

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

@@ -98,7 +98,7 @@ class AreaGroup extends _chartComponent.default {
 
       // X axis
       const xDomain = data.map(item => item.name);
-      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
@@ -155,7 +155,7 @@ class AreaGroup extends _chartComponent.default {
             // circle label
             if (y_axis_show_value) {
               const curCircleEl = g.node();
-              rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+              rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
                 const {
                   width
                 } = g.node().getBoundingClientRect();

package/dist/view/wrapper/area.js

@@ -91,7 +91,7 @@ class Area extends _chartComponent.default {
 
       // X axis
       const xDomain = data.map(item => item.name);
-      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
@@ -130,7 +130,7 @@ class Area extends _chartComponent.default {
           // circle label
           if (y_axis_show_value) {
             const curCircleEl = g.node();
-            rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

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

@@ -67,9 +67,9 @@ class BarCompare extends _chartComponent.default {
 
       // 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 fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).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 x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -206,7 +206,7 @@ class BarCompare extends _chartComponent.default {
         insertPadding
       } = this.chartBoundingClientRect;
       const circleData = increaseData.map(() => ({}));
-      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const lineY = d3.scaleLinear().domain(y_axis_auto_range ? [d3.min(increaseData, d => d.value), d3.max(increaseData, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
       const line = d3.line().x((d, index) => {
         const x = lineX(d.name) + lineX.bandwidth() / 2;
@@ -230,7 +230,7 @@ class BarCompare extends _chartComponent.default {
           // circle label
           if (display_increase_percentage) {
             const curCircleEl = g.node();
-            wrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            wrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

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

@@ -147,8 +147,8 @@ class BarCustom extends _chartComponent.default {
 
       // 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()]);
+      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {

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

@@ -13,7 +13,6 @@ var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _intl = _interopRequireDefault(require("../../intl"));
-var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorRules = require("../../constants/color-rules");
@@ -34,16 +33,14 @@ class BarGroup extends _chartComponent.default {
       const {
         y_axis_show_label,
         x_axis_show_label,
-        y_axis_show_value,
-        display_each_block_data,
-        type
+        y_axis_show_value
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
         borderRadius: 0.2,
         marginLeft: y_axis_show_label ? 20 : 0,
         marginBottom: x_axis_show_label ? 20 : 0,
-        marginTop: y_axis_show_value || type === _constants.CHART_TYPE.BAR_STACK && display_each_block_data ? 15 : 0
+        marginTop: y_axis_show_value ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -56,16 +53,6 @@ class BarGroup extends _chartComponent.default {
       } = this.props;
       data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
-      const {
-        chart
-      } = this.props;
-      const {
-        sort_type,
-        type
-      } = chart.config;
-      if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
-        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
-      }
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -89,7 +76,6 @@ class BarGroup extends _chartComponent.default {
         marginTop
       } = this.chartBoundingClientRect;
       const {
-        type,
         y_axis_show_value,
         label_font_size,
         table_id,
@@ -97,8 +83,7 @@ class BarGroup extends _chartComponent.default {
         color_theme,
         y_axis_max,
         y_axis_min,
-        y_axis_auto_range,
-        display_each_block_data
+        y_axis_auto_range
       } = chart.config;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
@@ -109,8 +94,8 @@ class BarGroup extends _chartComponent.default {
 
       // 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()]);
+      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -143,33 +128,6 @@ class BarGroup extends _chartComponent.default {
           });
 
           // Add label
-          if (type === _constants.CHART_TYPE.BAR_STACK) {
-            if (y_axis_show_value) {
-              this.addLabelToRectCenter({
-                chartType: _constants.CHART_TYPE.BAR_STACK,
-                container: parentNode,
-                x: Number(rect.getAttribute('x')),
-                y: Number(rect.getAttribute('y')),
-                xWidth: x.bandwidth(),
-                yheight: Number(rect.getAttribute('height')),
-                theme,
-                label_font_size,
-                text: rect.getAttribute('data-value')
-              });
-            }
-            if (display_each_block_data) {
-              this.addLabelToRectTop({
-                container: parentNode,
-                xWidth: Number(x.bandwidth()),
-                x: Number(rect.getAttribute('x')),
-                y: Number(rect.getAttribute('y')),
-                theme,
-                label_font_size,
-                text: rect.dataset.value
-              });
-            }
-            return;
-          }
           if (y_axis_show_value) {
             this.addLabelToRectTop({
               container: parentNode,

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

@@ -111,7 +111,7 @@ class BarStack extends _chartComponent.default {
 
       // 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);
+      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).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 => {

package/dist/view/wrapper/bar.js

@@ -155,7 +155,7 @@ class Bar extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       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);
+      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).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);

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

@@ -258,11 +258,11 @@ class ChartComponent extends _react.Component {
         div.className = 'chart-axis-label';
         const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
+        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
@@ -1143,7 +1143,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref6;
-      d3.select(container).append('text').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width
         } = g.node().getBoundingClientRect();
@@ -1161,7 +1161,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref7;
-      d3.select(container).append('text').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
           const {
@@ -1183,7 +1183,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref8;
-      d3.select(container).append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width,
           height

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

@@ -73,8 +73,8 @@ class Completeness extends _chartComponent.default {
       const newSeries = this.getGroupSeries(data);
 
       // Y axis
-      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]);
+      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
       const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

package/dist/view/wrapper/completeness.js

@@ -76,7 +76,7 @@ class Completeness extends _chartComponent.default {
       const newSeries = this.handleSeries(series, data);
 
       // Y axis
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -91,8 +91,8 @@ class HorizontalBarGroup extends _chartComponent.default {
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.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);
-      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fy.bandwidth()]);
+      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
       const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -94,7 +94,7 @@ class HorizontalBarStack extends _chartComponent.default {
         return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
       })(d3.index(data, d => d.name, d => d.group_name));
       const newSeries = this.handleSeries(series, data);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // Y axis
       const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {

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

@@ -88,7 +88,7 @@ class HorizontalBar extends _chartComponent.default {
       const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(horizontal_axis_label_color_rules);
       const tooltipTitle = this.getTitle(tables, table_id, horizontal_axis_summary_type, horizontal_axis_column_key);
       data.reverse();
-      const y = d3.scaleBand().domain(data.map(item => item.name)).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(data.map(item => item.name)).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -209,7 +209,7 @@ class LineGroup extends _chartComponent.default {
               // circle label
               if (y_axis_show_value) {
                 const curCircleEl = g.node();
-                rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+                rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
                   const {
                     width
                   } = g.node().getBoundingClientRect();

package/dist/view/wrapper/line.js

@@ -177,7 +177,7 @@ class Line extends _chartComponent.default {
           // circle label
           if (y_axis_show_value) {
             const curCircleEl = g.node();
-            rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

package/dist/view/wrapper/pie.js

@@ -102,7 +102,7 @@ class Pie extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 0.7 : arc.outerRadius()() * 1.2;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
             const {
               value,
               percent

package/dist/view/wrapper/ring.js

@@ -108,7 +108,7 @@ class Ring extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 1.2 : arc.outerRadius()() * 1.65;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
             const {
               value,
               percent

package/package.json

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