diff --git a/src/charts/RangeBar.js b/src/charts/RangeBar.js index ad16b3990..dbcee8309 100644 --- a/src/charts/RangeBar.js +++ b/src/charts/RangeBar.js @@ -320,11 +320,9 @@ class RangeBar extends Bar { }) { let w = this.w - let i = indexes.i - let j = indexes.j + const { i, j, realIndex, translationsIndex } = indexes - const yRatio = this.yRatio[indexes.translationsIndex] - let realIndex = indexes.realIndex + const yRatio = this.yRatio[translationsIndex] const range = this.getRangeValue(realIndex, j) @@ -349,7 +347,7 @@ class RangeBar extends Bar { y2, strokeWidth: this.strokeWidth, series: this.seriesRangeEnd, - realIndex: indexes.realIndex, + realIndex: realIndex, i: realIndex, j, w, @@ -373,14 +371,14 @@ class RangeBar extends Bar { pathFrom: paths.pathFrom, barHeight, x, - y: y2, + y: range.start < 0 && range.end < 0 ? y1 : y2, goalY: this.barHelpers.getGoalValues( 'y', null, zeroH, i, j, - indexes.translationsIndex + translationsIndex ), barXPosition, } @@ -398,9 +396,13 @@ class RangeBar extends Bar { }) { let w = this.w + const { realIndex, j } = indexes + const x1 = zeroW + y1 / this.invertedYRatio const x2 = zeroW + y2 / this.invertedYRatio + const range = this.getRangeValue(realIndex, j) + const barWidth = Math.abs(x2 - x1) const paths = this.barHelpers.getBarpaths({ @@ -410,9 +412,9 @@ class RangeBar extends Bar { x2, strokeWidth: this.strokeWidth, series: this.seriesRangeEnd, - i: indexes.realIndex, - realIndex: indexes.realIndex, - j: indexes.j, + i: realIndex, + realIndex, + j, w, }) @@ -424,14 +426,8 @@ class RangeBar extends Bar { pathTo: paths.pathTo, pathFrom: paths.pathFrom, barWidth, - x: x2, - goalX: this.barHelpers.getGoalValues( - 'x', - zeroW, - null, - indexes.realIndex, - indexes.j - ), + x: range.start < 0 && range.end < 0 ? x1 : x2, + goalX: this.barHelpers.getGoalValues('x', zeroW, null, realIndex, j), y, } } diff --git a/src/charts/common/bar/DataLabels.js b/src/charts/common/bar/DataLabels.js index c2c8ee247..d07b32972 100644 --- a/src/charts/common/bar/DataLabels.js +++ b/src/charts/common/bar/DataLabels.js @@ -211,11 +211,12 @@ export default class BarDataLabels { let vertical = w.config.plotOptions.bar.dataLabels.orientation === 'vertical' - const { zeroEncounters } = - this.barCtx.barHelpers.getZeroValueEncounters({i, j}) + const { zeroEncounters } = this.barCtx.barHelpers.getZeroValueEncounters({ + i, + j, + }) - bcx = - bcx - strokeWidth / 2 + columnGroupIndex * barWidth + bcx = bcx - strokeWidth / 2 + columnGroupIndex * barWidth let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints @@ -328,17 +329,15 @@ export default class BarDataLabels { } totalDataLabelsX = - totalDataLabelsBcx - + (w.globals.isXNumeric - ? (barWidth * (w.globals.barGroups.length - 1) - - barWidth / 2 - ) - : -(barWidth * w.globals.barGroups.length - - barWidth / 2 - - strokeWidth * 2 - ) - ) - + barTotalDataLabelsConfig.offsetX + totalDataLabelsBcx + + (w.globals.isXNumeric + ? barWidth * (w.globals.barGroups.length - 1) - barWidth / 2 + : -( + barWidth * w.globals.barGroups.length - + barWidth / 2 - + strokeWidth * 2 + )) + + barTotalDataLabelsConfig.offsetX } if (!w.config.chart.stacked) { @@ -456,10 +455,7 @@ export default class BarDataLabels { ) if (valIsNegative) { totalDataLabelsX = - newX - - strokeWidth - - offX - - barTotalDataLabelsConfig.offsetX + newX - strokeWidth - offX - barTotalDataLabelsConfig.offsetX totalDataLabelsAnchor = 'end' } else { @@ -467,16 +463,14 @@ export default class BarDataLabels { newX + offX + barTotalDataLabelsConfig.offsetX + - (this.barCtx.isReversed - ? -(barWidth + strokeWidth) - : strokeWidth) + (this.barCtx.isReversed ? -(barWidth + strokeWidth) : strokeWidth) } totalDataLabelsY = - dataLabelsY - - textRects.height / 2 - + totalLabeltextRects.height / 2 - + barTotalDataLabelsConfig.offsetY - + strokeWidth + dataLabelsY - + textRects.height / 2 + + totalLabeltextRects.height / 2 + + barTotalDataLabelsConfig.offsetY + + strokeWidth } if (!w.config.chart.stacked) { @@ -642,13 +636,15 @@ export default class BarDataLabels { ) { totalDataLabelText = graphics.drawText({ // TODO: Add gap, visibleI - x: x - - (!w.globals.isBarHorizontal && w.globals.barGroups.length - ? barWidth * (w.globals.barGroups.length - 1) / 2 + x: + x - + (!w.globals.isBarHorizontal && w.globals.barGroups.length + ? (barWidth * (w.globals.barGroups.length - 1)) / 2 : 0), - y: y - - (w.globals.isBarHorizontal && w.globals.barGroups.length - ? barHeight * (w.globals.barGroups.length - 1) / 2 + y: + y - + (w.globals.isBarHorizontal && w.globals.barGroups.length + ? (barHeight * (w.globals.barGroups.length - 1)) / 2 : 0), foreColor: barTotalDataLabelsConfig.style.color, text: val, diff --git a/src/charts/common/bar/Helpers.js b/src/charts/common/bar/Helpers.js index c3e2dc5a1..9f5f7f9ae 100644 --- a/src/charts/common/bar/Helpers.js +++ b/src/charts/common/bar/Helpers.js @@ -134,7 +134,8 @@ export default class Helpers { ? this.barCtx.baseLineY[this.barCtx.translationsIndex] * 2 : 0) - x = w.globals.padHorizontal + + x = + w.globals.padHorizontal + (xDivision - barWidth * this.barCtx.seriesLen) / 2 } @@ -328,7 +329,7 @@ export default class Helpers { // append tiny pixels to avoid exponentials (which cause issues in border-radius) y1 += 0.001 - strokeCenter y2 += 0.001 + strokeCenter - + let pathTo = graphics.move(x1, y1) let pathFrom = graphics.move(x1, y1) @@ -669,10 +670,9 @@ export default class Helpers { let nonZeroColumns = 0 let zeroEncounters = 0 - let seriesIndices = - w.config.plotOptions.bar.horizontal - ? w.globals.series.map((_,_i) => _i) - : w.globals.columnSeries?.i.map((_i) => _i) || [] + let seriesIndices = w.config.plotOptions.bar.horizontal + ? w.globals.series.map((_, _i) => _i) + : w.globals.columnSeries?.i.map((_i) => _i) || [] seriesIndices.forEach((_si) => { let val = w.globals.seriesPercent[_si][j] @@ -689,15 +689,16 @@ export default class Helpers { zeroEncounters, } } - + getGroupIndex(seriesIndex) { const w = this.w // groupIndex is the index of group buckets (group1, group2, ...) - let groupIndex = w.globals.seriesGroups.findIndex((group) => - // w.config.series[i].name may be undefined, so use - // w.globals.seriesNames[i], which has default names for those - // series. w.globals.seriesGroups[] uses the same default naming. - group.indexOf(w.globals.seriesNames[seriesIndex]) > -1 + let groupIndex = w.globals.seriesGroups.findIndex( + (group) => + // w.config.series[i].name may be undefined, so use + // w.globals.seriesNames[i], which has default names for those + // series. w.globals.seriesGroups[] uses the same default naming. + group.indexOf(w.globals.seriesNames[seriesIndex]) > -1 ) // We need the column groups to be indexable as 0,1,2,... for their // positioning relative to each other. @@ -707,6 +708,6 @@ export default class Helpers { cGI.push(groupIndex) columnGroupIndex = cGI.length - 1 } - return {groupIndex, columnGroupIndex} + return { groupIndex, columnGroupIndex } } } diff --git a/src/modules/axes/Grid.js b/src/modules/axes/Grid.js index 60f1400cf..e755db2d3 100644 --- a/src/modules/axes/Grid.js +++ b/src/modules/axes/Grid.js @@ -438,8 +438,8 @@ class Grid { // or yaxis[0] if all are hidden. let gridAxisIndex = 0 while ( - gridAxisIndex < gl.seriesYAxisMap.length - && gl.ignoreYAxisIndexes.indexOf(gridAxisIndex) !== -1 + gridAxisIndex < gl.seriesYAxisMap.length && + gl.ignoreYAxisIndexes.indexOf(gridAxisIndex) !== -1 ) { gridAxisIndex++ } @@ -455,7 +455,6 @@ class Grid { xCount = this.xaxisLabels.length if (this.isRangeBar) { - xCount-- yTickAmount = gl.labels.length if (w.config.xaxis.tickAmount && w.config.xaxis.labels.formatter) { xCount = w.config.xaxis.tickAmount