Fix drawing angle lines on reversed radial scale (#11788)

* Fix drawing angle lines on reversed radial scale * add test * Show ticks in test --------- Co-authored-by: Jacco van den Berg <[email protected]>
chartjs · May 24, 2024 · ff74078 · ff74078
1 parent 228a485
commit ff74078
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js
@@ -606,7 +606,7 @@ export default class RadialLinearScale extends LinearScaleBase {
  ctx.setLineDash(optsAtIndex.borderDash);
  ctx.lineDashOffset = optsAtIndex.borderDashOffset;
 
- offset = this.getDistanceFromCenterForValue(opts.ticks.reverse ? this.min : this.max);
+ offset = this.getDistanceFromCenterForValue(opts.reverse ? this.min : this.max);
  position = this.getPointPosition(i, offset);
  ctx.beginPath();
  ctx.moveTo(this.xCenter, this.yCenter);

diff --git a/test/fixtures/scale.radialLinear/anglelines-reverse-scale.js b/test/fixtures/scale.radialLinear/anglelines-reverse-scale.js
@@ -0,0 +1,35 @@
+module.exports = {
+ config: {
+ type: 'radar',
+ data: {
+ labels: ['A', 'B', 'C', 'D', 'E'],
+ datasets: [{
+ data: [1, 1, 2, 3, 5]
+ }]
+ },
+ options: {
+ responsive: false,
+ scales: {
+ r: {
+ reverse: true,
+ grid: {
+ display: true,
+ },
+ angleLines: {
+ color: 'red',
+ lineWidth: 5,
+ },
+ pointLabels: {
+ display: false
+ },
+ ticks: {
+ display: true,
+ }
+ }
+ }
+ }
+ },
+ options: {
+ spriteText: true,
+ }
+};
diff --git a/test/fixtures/scale.radialLinear/anglelines-reverse-scale.png b/test/fixtures/scale.radialLinear/anglelines-reverse-scale.png