chartist 1.3.1 → 1.5.0

package/dist/index.js

@@ -1237,7 +1237,7 @@ function createAnimation(element, attribute, animationDefinition) {
  * @param className Specify a class to be added to the SVG element
  * @return The created/reinitialized SVG element
  */ function createSvg(container) {
-    let width = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "100%", height = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "100%", className = arguments.length > 3 ? arguments[3] : void 0;
+    let width = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "100%", height = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "100%", className = arguments.length > 3 ? arguments[3] : void 0, viewBox = arguments.length > 4 ? arguments[4] : void 0;
     if (!container) {
         throw new Error("Container element is not found");
     }
@@ -1257,6 +1257,11 @@ function createAnimation(element, attribute, animationDefinition) {
     if (className) {
         svg1.addClass(className);
     }
+    if (viewBox) {
+        svg1.attr({
+            viewBox: "0 0 ".concat(viewBox.width, " ").concat(viewBox.height)
+        });
+    }
     // Add the DOM node to our container
     container.appendChild(svg1.getNode());
     return svg1;
@@ -1290,15 +1295,15 @@ function createAnimation(element, attribute, animationDefinition) {
  * @param options The Object that contains all the optional values for the chart
  * @return The chart rectangles coordinates inside the svg element plus the rectangles measurements
  */ function createChartRect(svg, options) {
-    var ref, ref1, ref2, ref3;
+    var ref, ref1, ref2, ref3, ref4, ref5;
     const hasAxis = Boolean(options.axisX || options.axisY);
     const yAxisOffset = ((ref = options.axisY) === null || ref === void 0 ? void 0 : ref.offset) || 0;
     const xAxisOffset = ((ref1 = options.axisX) === null || ref1 === void 0 ? void 0 : ref1.offset) || 0;
     const yAxisPosition = (ref2 = options.axisY) === null || ref2 === void 0 ? void 0 : ref2.position;
     const xAxisPosition = (ref3 = options.axisX) === null || ref3 === void 0 ? void 0 : ref3.position;
     // If width or height results in invalid value (including 0) we fallback to the unitless settings or even 0
-    let width = svg.width() || quantity(options.width).value || 0;
-    let height = svg.height() || quantity(options.height).value || 0;
+    let width = ((ref4 = options.viewBox) === null || ref4 === void 0 ? void 0 : ref4.width) || svg.width() || quantity(options.width).value || 0;
+    let height = ((ref5 = options.viewBox) === null || ref5 === void 0 ? void 0 : ref5.height) || svg.height() || quantity(options.height).value || 0;
     const normalizedPadding = normalizePadding(options.chartPadding);
     // If settings were to small to cope with offset (legacy) and padding, we'll adjust
     width = Math.max(width, yAxisOffset + normalizedPadding.left + normalizedPadding.right);
@@ -2545,7 +2550,7 @@ class LineChart extends BaseChart {
         const { data  } = this;
         const normalizedData = normalizeData(data, options.reverseData, true);
         // Create new svg object
-        const svg = createSvg(this.container, options.width, options.height, options.classNames.chart);
+        const svg = createSvg(this.container, options.width, options.height, options.classNames.chart, options.viewBox);
         this.svg = svg;
         // Create groups for labels, grid and series
         const gridGroup = svg.elem("g").addClass(options.classNames.gridGroup);
@@ -2958,7 +2963,7 @@ class BarChart extends BaseChart {
         const { data  } = this;
         const normalizedData = normalizeData(data, options.reverseData, options.horizontalBars ? "x" : "y", true);
         // Create new svg element
-        const svg = createSvg(this.container, options.width, options.height, options.classNames.chart + (options.horizontalBars ? " " + options.classNames.horizontalBars : ""));
+        const svg = createSvg(this.container, options.width, options.height, options.classNames.chart + (options.horizontalBars ? " " + options.classNames.horizontalBars : ""), options.viewBox);
         const highLow = options.stackBars && options.stackMode !== true && normalizedData.series.length ? getHighLow([
             getSerialSums(normalizedData.series)
         ], options, options.horizontalBars ? "x" : "y") : getHighLow(normalizedData.series, options, options.horizontalBars ? "x" : "y");
@@ -3273,7 +3278,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 +3296,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,10 +3317,11 @@ class PieChart extends BaseChart {
         const normalizedData = normalizeData(data);
         const seriesGroups = [];
         let labelsGroup;
+        const labelPositions = [];
         let labelRadius;
         let startAngle = options.startAngle;
         // Create SVG.js draw
-        const svg = createSvg(this.container, options.width, options.height, options.donut ? options.classNames.chartDonut : options.classNames.chartPie);
+        const svg = createSvg(this.container, options.width, options.height, options.donut ? options.classNames.chartDonut : options.classNames.chartPie, options.viewBox);
         this.svg = svg;
         // Calculate charting rect
         const chartRect = createChartRect(svg, options);
@@ -3440,6 +3461,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,