chartist 1.2.1 → 1.3.0

package/README.md

@@ -173,6 +173,7 @@ import type {
 - [Multi-line labels](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/multiline)
 - [Overlapping bars on mobile](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/overlapping-bars)
 - [Stacked bar chart](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/stacked)
+- [Stacked bar chart with accumulate-relative stack mode](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/stacked-accumulate-relative)
 - [Add peak circles using the draw events](http://codesandbox.io/s/github/chartist-js/chartist/main/sandboxes/bar/with-circle-modify-drawing)
 
 </details>

package/dist/_settings.scss

@@ -34,7 +34,7 @@ $ct-text-color: rgba(0, 0, 0, 0.4) !default;
 $ct-text-size: 0.75rem !default;
 $ct-text-align: flex-start !default;
 $ct-text-justify: flex-start !default;
-$ct-text-line-height: 1;
+$ct-text-line-height: 1 !default;
 
 // Grid styles
 $ct-grid-color: rgba(0, 0, 0, 0.2) !default;

package/dist/charts/BarChart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,2BAA2B,EAG3B,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkHzC,qBAAa,QAAS,SAAQ,SAAS,CAAC,mBAAmB,CAAC;cAyCrC,IAAI,EAAE,YAAY;IAxCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;gBAED,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,EACX,IAAI,EAAE,YAAY,EACrC,OAAO,CAAC,EAAE,eAAe,EACzB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC;IAWxD;;OAEG;IACH,WAAW,CAAC,OAAO,EAAE,2BAA2B;CAwYjD"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,2BAA2B,EAG3B,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAEV,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAoBpB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAmHzC,qBAAa,QAAS,SAAQ,SAAS,CAAC,mBAAmB,CAAC;cAyCrC,IAAI,EAAE,YAAY;IAxCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;gBAED,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,EACX,IAAI,EAAE,YAAY,EACrC,OAAO,CAAC,EAAE,eAAe,EACzB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC;IAWxD;;OAEG;IACH,WAAW,CAAC,OAAO,EAAE,2BAA2B;CAoZjD"}

package/dist/charts/BarChart/BarChart.types.d.ts

@@ -30,10 +30,11 @@ export interface BarChartOptions<TXAxisOptions = AxisOptions, TYAxisOptions = TX
      */
     stackBars?: boolean;
     /**
-     * If set to 'overlap' this property will force the stacked bars to draw from the zero line.
+     * If set to true this property will force the stacked bars to draw from the zero line.
      * If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
+     * If set to 'accumulate-relative' positive and negative values will be handled separately.
      */
-    stackMode?: 'accumulate' | boolean;
+    stackMode?: 'accumulate' | 'accumulate-relative' | boolean;
     /**
      * Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
      */

package/dist/charts/BarChart/BarChart.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,oBAAY,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,WAAW,eAAe,CAC9B,aAAa,GAAG,WAAW,EAC3B,aAAa,GAAG,aAAa,CAC7B,SAAQ,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,oBAAY,2BAA2B,GAAG,YAAY,CACpD,eAAe,CACb,YAAY,CACV,WAAW,EACT,QAAQ,GACR,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,uBAAuB,GACvB,eAAe,CAClB,EACD,YAAY,CACV,WAAW,EACT,QAAQ,GACR,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,uBAAuB,GACvB,eAAe,CAClB,CACF,EACC,gBAAgB,GAChB,cAAc,GACd,mBAAmB,GACnB,WAAW,GACX,OAAO,GACP,OAAO,EACT,YAAY,CACb,CAAC;AAEF,oBAAY,oBAAoB,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;AAEjE,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,CACpD,oBAAoB,EACpB,aAAa,GAAG,YAAY,CAC7B,CAAC"}
+{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,oBAAY,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,WAAW,eAAe,CAC9B,aAAa,GAAG,WAAW,EAC3B,aAAa,GAAG,aAAa,CAC7B,SAAQ,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,qBAAqB,GAAG,OAAO,CAAC;IAC3D;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,oBAAY,2BAA2B,GAAG,YAAY,CACpD,eAAe,CACb,YAAY,CACV,WAAW,EACT,QAAQ,GACR,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,uBAAuB,GACvB,eAAe,CAClB,EACD,YAAY,CACV,WAAW,EACT,QAAQ,GACR,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,uBAAuB,GACvB,eAAe,CAClB,CACF,EACC,gBAAgB,GAChB,cAAc,GACd,mBAAmB,GACnB,WAAW,GACX,OAAO,GACP,OAAO,EACT,YAAY,CACb,CAAC;AAEF,oBAAY,oBAAoB,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;AAEjE,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,CACpD,oBAAoB,EACpB,aAAa,GAAG,YAAY,CAC7B,CAAC"}

package/dist/index.cjs

@@ -2919,8 +2919,9 @@ function getSerialSums(series) {
     seriesBarDistance: 15,
     // If set to true this property will cause the series bars to be stacked. Check the `stackMode` option for further stacking options.
     stackBars: false,
-    // If set to 'overlap' this property will force the stacked bars to draw from the zero line.
+    // If set to true this property will force the stacked bars to draw from the zero line.
     // If set to 'accumulate' this property will form a total for each series point. This will also influence the y-axis and the overall bounds of the chart. In stacked mode the seriesBarDistance property will have no effect.
+    // If set to 'accumulate-relative' positive and negative values will be handled separately.
     stackMode: "accumulate",
     // Inverts the axes of the bar chart in order to draw a horizontal bar chart. Be aware that you also need to invert your axis settings as the Y Axis will now display the labels and the X Axis the values.
     horizontalBars: false,
@@ -3029,8 +3030,12 @@ class BarChart extends BaseChart {
         }
         // Projected 0 point
         const zeroPoint = options.horizontalBars ? chartRect.x1 + valueAxis.projectValue(0) : chartRect.y1 - valueAxis.projectValue(0);
+        const isAccumulateStackMode = options.stackMode === "accumulate";
+        const isAccumulateRelativeStackMode = options.stackMode === "accumulate-relative";
         // Used to track the screen coordinates of stacked bars
-        const stackedBarValues = [];
+        const posStackedBarValues = [];
+        const negStackedBarValues = [];
+        let stackedBarValues = posStackedBarValues;
         labelAxis.createGridAndLabels(gridGroup, labelGroup, options, this.eventEmitter);
         valueAxis.createGridAndLabels(gridGroup, labelGroup, options, this.eventEmitter);
         if (options.showGridBackground) {
@@ -3077,6 +3082,8 @@ class BarChart extends BaseChart {
                 seriesClassName || "".concat(options.classNames.series, "-").concat(alphaNumerate(seriesIndex))
             ].join(" "));
             normalizedData.series[seriesIndex].forEach((value, valueIndex)=>{
+                const valueX = safeHasProperty(value, "x") && value.x;
+                const valueY = safeHasProperty(value, "y") && value.y;
                 let labelAxisValueIndex;
                 // We need to set labelAxisValueIndex based on some options combinations
                 if (options.distributeSeries && !options.stackBars) {
@@ -3095,13 +3102,13 @@ class BarChart extends BaseChart {
                 // We need to transform coordinates differently based on the chart layout
                 if (options.horizontalBars) {
                     projected = {
-                        x: chartRect.x1 + valueAxis.projectValue(safeHasProperty(value, "x") ? value.x : 0, valueIndex, normalizedData.series[seriesIndex]),
-                        y: chartRect.y1 - labelAxis.projectValue(safeHasProperty(value, "y") ? value.y : 0, labelAxisValueIndex, normalizedData.series[seriesIndex])
+                        x: chartRect.x1 + valueAxis.projectValue(valueX || 0, valueIndex, normalizedData.series[seriesIndex]),
+                        y: chartRect.y1 - labelAxis.projectValue(valueY || 0, labelAxisValueIndex, normalizedData.series[seriesIndex])
                     };
                 } else {
                     projected = {
-                        x: chartRect.x1 + labelAxis.projectValue(safeHasProperty(value, "x") ? value.x : 0, labelAxisValueIndex, normalizedData.series[seriesIndex]),
-                        y: chartRect.y1 - valueAxis.projectValue(safeHasProperty(value, "y") ? value.y : 0, valueIndex, normalizedData.series[seriesIndex])
+                        x: chartRect.x1 + labelAxis.projectValue(valueX || 0, labelAxisValueIndex, normalizedData.series[seriesIndex]),
+                        y: chartRect.y1 - valueAxis.projectValue(valueY || 0, valueIndex, normalizedData.series[seriesIndex])
                     };
                 }
                 // If the label axis is a step based axis we will offset the bar into the middle of between two steps using
@@ -3116,6 +3123,10 @@ class BarChart extends BaseChart {
                     // Using bi-polar offset for multiple series if no stacked bars or series distribution is used
                     projected[labelAxis.units.pos] += options.stackBars || options.distributeSeries ? 0 : biPol * options.seriesBarDistance * (options.horizontalBars ? -1 : 1);
                 }
+                // distinguish between positive and negative values in relative stack mode
+                if (isAccumulateRelativeStackMode) {
+                    stackedBarValues = valueY >= 0 || valueX >= 0 ? posStackedBarValues : negStackedBarValues;
+                }
                 // Enter value in stacked bar values used to remember previous screen value for stacking up bars
                 const previousStack = stackedBarValues[valueIndex] || zeroPoint;
                 stackedBarValues[valueIndex] = previousStack - (zeroPoint - projected[labelAxis.counterUnits.pos]);
@@ -3127,7 +3138,7 @@ class BarChart extends BaseChart {
                     ["".concat(labelAxis.units.pos, "1")]: projected[labelAxis.units.pos],
                     ["".concat(labelAxis.units.pos, "2")]: projected[labelAxis.units.pos]
                 };
-                if (options.stackBars && (options.stackMode === "accumulate" || !options.stackMode)) {
+                if (options.stackBars && (isAccumulateStackMode || isAccumulateRelativeStackMode || !options.stackMode)) {
                     // Stack mode: accumulate (default)
                     // If bars are stacked we use the stackedBarValues reference and otherwise base all bars off the zero line
                     // We want backwards compatibility, so the expected fallback without the 'stackMode' option
@@ -3149,8 +3160,8 @@ class BarChart extends BaseChart {
                 // Create bar element
                 const bar = seriesElement.elem("line", positions, options.classNames.bar).attr({
                     "ct:value": [
-                        safeHasProperty(value, "x") && value.x,
-                        safeHasProperty(value, "y") && value.y
+                        valueX,
+                        valueY
                     ].filter(isNumeric).join(","),
                     "ct:meta": serialize(metaData)
                 });