diff --git a/samples/react/column/stacked-column-outline.html b/samples/react/column/stacked-column-outline.html new file mode 100644 index 000000000..03270a93b --- /dev/null +++ b/samples/react/column/stacked-column-outline.html @@ -0,0 +1,178 @@ + + + + + + + Stacked Column + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ <div id="chart"> + <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={350} /> +</div> +
+ + + + + + diff --git a/samples/source/column/stacked-column-outline.xml b/samples/source/column/stacked-column-outline.xml new file mode 100644 index 000000000..29072f199 --- /dev/null +++ b/samples/source/column/stacked-column-outline.xml @@ -0,0 +1,86 @@ +Stacked Column + + + +chart: { + type: 'bar', + height: 350, + stacked: true, + toolbar: { + show: true + }, + zoom: { + enabled: true + } +}, +responsive: [{ + breakpoint: 650, + options: { + legend: { + position: 'bottom', + offsetX: -10, + offsetY: 0 + } + } +}], +plotOptions: { + bar: { + horizontal: false, + borderRadius: 10, + borderRadiusApplication: 'end', // 'around', 'end' + borderRadiusWhenStacked: 'last', // 'all', 'last' + dataLabels: { + total: { + enabled: true, + style: { + fontSize: '13px', + fontWeight: 900 + } + } + } + }, +}, +stroke: { + show: true, + width: 4 +}, +dataLabels:{ + style: { + colors: ['black'] + } +}, +xaxis: { + type: 'datetime', + categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', + '01/05/2011 GMT', '01/06/2011 GMT' + ], +}, +yaxis: { + reversed: false, + stepSize: 10 +}, +legend: { + position: 'right', + offsetY: 40 +}, +fill: { + opacity: 0 +} + + + +[{ + name: 'PRODUCT A', + data: [40, 50, -30, 60, 20, 40] +}, { + name: 'PRODUCT B', + data: [10, 20, 20, 0, 10, 20] +}, { + name: 'PRODUCT C', + data: [10, 10, -10, 10, 20, 10] +}, { + name: 'PRODUCT D', + data: [10, 10, 20, 10, 20, 10] +}] + + \ No newline at end of file diff --git a/samples/vanilla-js/column/stacked-column-outline.html b/samples/vanilla-js/column/stacked-column-outline.html new file mode 100644 index 000000000..65c07dbf6 --- /dev/null +++ b/samples/vanilla-js/column/stacked-column-outline.html @@ -0,0 +1,145 @@ + + + + + + + Stacked Column + + + + + + + + + + + + + + + + + +
+ + + + + + diff --git a/samples/vue/column/stacked-column-outline.html b/samples/vue/column/stacked-column-outline.html new file mode 100644 index 000000000..90aff8ecd --- /dev/null +++ b/samples/vue/column/stacked-column-outline.html @@ -0,0 +1,164 @@ + + + + + + + Stacked Column + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + +
+ <div id="chart"> + <apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart> + </div> +
+ + + + + diff --git a/src/charts/Bar.js b/src/charts/Bar.js index f2911fb89..bbc969456 100644 --- a/src/charts/Bar.js +++ b/src/charts/Bar.js @@ -501,6 +501,7 @@ class Bar { x1: zeroW, x2: x, strokeWidth, + isReversed: this.isReversed, series: this.series, realIndex: indexes.realIndex, i, @@ -587,6 +588,7 @@ class Bar { y1: zeroH, y2: y, strokeWidth, + isReversed: this.isReversed, series: this.series, realIndex: realIndex, i, diff --git a/src/charts/BarStacked.js b/src/charts/BarStacked.js index 4cd1dae6b..1255156b5 100644 --- a/src/charts/BarStacked.js +++ b/src/charts/BarStacked.js @@ -119,8 +119,10 @@ class BarStacked extends Bar { } for (let j = 0; j < w.globals.dataPoints; j++) { + const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex) const commonPathOpts = { indexes: { i, j, realIndex, translationsIndex, bc }, + strokeWidth, x, y, elSeries, @@ -192,7 +194,7 @@ class BarStacked extends Bar { columnGroupIndex, pathFrom: paths.pathFrom, pathTo: paths.pathTo, - strokeWidth: this.barHelpers.getStrokeWidth(i, j, realIndex), + strokeWidth, elSeries, x, y, @@ -307,6 +309,7 @@ class BarStacked extends Bar { drawStackedBarPaths({ indexes, barHeight, + strokeWidth, zeroW, x, y, @@ -370,6 +373,8 @@ class BarStacked extends Bar { barHeight, x1: barXPosition, x2: x, + strokeWidth, + isReversed: this.isReversed, series: this.series, realIndex: indexes.realIndex, seriesGroup, @@ -532,6 +537,8 @@ class BarStacked extends Bar { y1: barYPosition, y2: y, yRatio: this.yRatio[translationsIndex], + strokeWidth: this.strokeWidth, + isReversed: this.isReversed, series: this.series, seriesGroup, realIndex: indexes.realIndex, diff --git a/src/charts/common/bar/Helpers.js b/src/charts/common/bar/Helpers.js index 242667ac1..e216c080d 100644 --- a/src/charts/common/bar/Helpers.js +++ b/src/charts/common/bar/Helpers.js @@ -378,6 +378,9 @@ export default class Helpers { barXPosition, y1, y2, + strokeWidth, + isReversed, + series, seriesGroup, realIndex, i, @@ -385,6 +388,10 @@ export default class Helpers { w, }) { const graphics = new Graphics(this.barCtx.ctx) + strokeWidth = Array.isArray(strokeWidth) + ? strokeWidth[realIndex] + : strokeWidth + if (!strokeWidth) strokeWidth = 0 let bW = barWidth let bXP = barXPosition @@ -395,12 +402,17 @@ export default class Helpers { bW = barWidth + w.config.series[realIndex].data[j].columnWidthOffset } - const x1 = bXP - const x2 = bXP + bW + // Center the stroke on the coordinates + let strokeCenter = strokeWidth / 2 + + const x1 = bXP + strokeCenter + const x2 = bXP + bW - strokeCenter + let direction = (series[i][j] >= 0 ? 1 : -1) * (isReversed ? -1 : 1) + // append tiny pixels to avoid exponentials (which cause issues in border-radius) - y1 += 0.001 - y2 += 0.001 + y1 += 0.001 - strokeCenter * direction + y2 += 0.001 + strokeCenter * direction let pathTo = graphics.move(x1, y1) let pathFrom = graphics.move(x1, y1) @@ -446,8 +458,8 @@ export default class Helpers { if (w.config.chart.stacked) { let _ctx = this.barCtx _ctx = this.barCtx[seriesGroup] - _ctx.yArrj.push(y2) - _ctx.yArrjF.push(Math.abs(y1 - y2)) + _ctx.yArrj.push(y2 - strokeCenter * direction) + _ctx.yArrjF.push(Math.abs(y1 - y2 + strokeWidth * direction)) _ctx.yArrjVal.push(this.barCtx.series[i][j]) } @@ -462,6 +474,9 @@ export default class Helpers { barHeight, x1, x2, + strokeWidth, + isReversed, + series, seriesGroup, realIndex, i, @@ -469,6 +484,10 @@ export default class Helpers { w, }) { const graphics = new Graphics(this.barCtx.ctx) + strokeWidth = Array.isArray(strokeWidth) + ? strokeWidth[realIndex] + : strokeWidth + if (!strokeWidth) strokeWidth = 0 let bYP = barYPosition let bH = barHeight @@ -479,12 +498,17 @@ export default class Helpers { bH = barHeight + w.config.series[realIndex].data[j].barHeightOffset } - const y1 = bYP - const y2 = bYP + bH + // Center the stroke on the coordinates + let strokeCenter = strokeWidth / 2 + + const y1 = bYP + strokeCenter + const y2 = bYP + bH - strokeCenter + + let direction = (series[i][j] >= 0 ? 1 : -1) * (isReversed ? -1 : 1) // append tiny pixels to avoid exponentials (which cause issues in border-radius) - x1 += 0.001 - x2 += 0.001 + x1 += 0.001 + strokeCenter * direction + x2 += 0.001 - strokeCenter * direction let pathTo = graphics.move(x1, y1) let pathFrom = graphics.move(x1, y1) @@ -528,8 +552,8 @@ export default class Helpers { if (w.config.chart.stacked) { let _ctx = this.barCtx _ctx = this.barCtx[seriesGroup] - _ctx.xArrj.push(x2) - _ctx.xArrjF.push(Math.abs(x1 - x2)) + _ctx.xArrj.push(x2 + strokeCenter * direction) + _ctx.xArrjF.push(Math.abs(x1 - x2 - strokeWidth * direction)) _ctx.xArrjVal.push(this.barCtx.series[i][j]) } return { diff --git a/tests/e2e/snapshots/column/basic-column.png b/tests/e2e/snapshots/column/basic-column.png index 7e1f26be9..a7eb29cd5 100644 Binary files a/tests/e2e/snapshots/column/basic-column.png and b/tests/e2e/snapshots/column/basic-column.png differ diff --git a/tests/e2e/snapshots/column/column-with-data-labels.png b/tests/e2e/snapshots/column/column-with-data-labels.png index b3355bc5b..5b098fc18 100644 Binary files a/tests/e2e/snapshots/column/column-with-data-labels.png and b/tests/e2e/snapshots/column/column-with-data-labels.png differ diff --git a/tests/e2e/snapshots/column/grouped-stacked-column.png b/tests/e2e/snapshots/column/grouped-stacked-column.png index f4dd1498c..b473814b3 100644 Binary files a/tests/e2e/snapshots/column/grouped-stacked-column.png and b/tests/e2e/snapshots/column/grouped-stacked-column.png differ diff --git a/tests/e2e/snapshots/column/stacked-column-with-line-new.png b/tests/e2e/snapshots/column/stacked-column-with-line-new.png index c0ff5265d..3d666670e 100644 Binary files a/tests/e2e/snapshots/column/stacked-column-with-line-new.png and b/tests/e2e/snapshots/column/stacked-column-with-line-new.png differ diff --git a/tests/e2e/snapshots/column/stacked-column-with-line.png b/tests/e2e/snapshots/column/stacked-column-with-line.png index cfaae9059..93d1e7f3b 100644 Binary files a/tests/e2e/snapshots/column/stacked-column-with-line.png and b/tests/e2e/snapshots/column/stacked-column-with-line.png differ