chartist 1.3.1 → 1.4.0

package/dist/index.js

@@ -3273,7 +3273,9 @@ class BarChart extends BaseChart {
     // Label direction can be 'neutral', 'explode' or 'implode'. The labels anchor will be positioned based on those settings as well as the fact if the labels are on the right or left side of the center of the chart. Usually explode is useful when labels are positioned far away from the center.
     labelDirection: "neutral",
     // If true empty values will be ignored to avoid drawing unnecessary slices and labels
-    ignoreEmptyValues: false
+    ignoreEmptyValues: false,
+    // If Nonzero check if a label has overlapping text then move it the number of pixels up and left (Should be half of label font size + 1 but you can tweak it as you prefer)
+    preventOverlappingLabelOffset: 0
 };
 /**
  * Determines SVG anchor position based on direction and center parameter
@@ -3289,6 +3291,19 @@ class BarChart extends BaseChart {
 }
 class PieChart extends BaseChart {
     /**
+   * Check if a label has overlapping text then move it the number of pixels up and left based on textSize.
+   * @param labelPos - Label position that chartist will be checking does not overlap with the list of LabelPositions.
+   * @param existingLabelPos - Label position that has already been placed that chartist will check against.
+   * @param textOffset - this is configured with preventOverlappingLabelOffset option.
+   * @param length - How many characters long the label is.
+   */ moveLabel(labelPos, existingLabelPos, textOffset, length) {
+        if (labelPos.y > existingLabelPos.y - textOffset && labelPos.y < existingLabelPos.y + textOffset && labelPos.x > existingLabelPos.x - length * textOffset && labelPos.x < existingLabelPos.x + length * textOffset) {
+            labelPos.y -= textOffset;
+            labelPos.x -= textOffset;
+            this.moveLabel(labelPos, existingLabelPos, textOffset, length);
+        }
+    }
+    /**
    * Creates the pie chart
    *
    * @param options
@@ -3297,6 +3312,7 @@ class PieChart extends BaseChart {
         const normalizedData = normalizeData(data);
         const seriesGroups = [];
         let labelsGroup;
+        const labelPositions = [];
         let labelRadius;
         let startAngle = options.startAngle;
         // Create SVG.js draw
@@ -3440,6 +3456,14 @@ class PieChart extends BaseChart {
                 }
                 const interpolatedValue = options.labelInterpolationFnc(rawValue, index);
                 if (interpolatedValue || interpolatedValue === 0) {
+                    if (options.preventOverlappingLabelOffset) {
+                        const textOffset = options.preventOverlappingLabelOffset;
+                        const length = String(normalizedData.labels[index]).length;
+                        labelPositions.forEach((item)=>{
+                            this.moveLabel(labelPosition, item, textOffset, length);
+                        });
+                        labelPositions.push(labelPosition);
+                    }
                     const labelElement = labelsGroup.elem("text", {
                         dx: labelPosition.x,
                         dy: labelPosition.y,