Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show radial scale labels correctly when rotated #4682

Merged
merged 1 commit into from Aug 21, 2017

Conversation

etimberg
Copy link
Member

When the radial scale was rotated using startAngle, the labels no longer lined up with the lines.

Fixes #3612

After Fix

screen shot 2017-08-20 at 9 36 27 am

@etimberg etimberg added this to the Version 2.7 milestone Aug 20, 2017
@etimberg
Copy link
Member Author

@simonbrunel not sure the best test strategy for this since it's quite visual. If we think it's worthwhile, I can create a PNG image test for it.

…labels did not appear in the correct places.
@etimberg etimberg force-pushed the radial_scale_start_angle_labels branch from bb1112a to 873fa80 Compare August 20, 2017 13:40
@simonbrunel
Copy link
Member

We can try, but I think image tests will not work correctly because of the text.

@etimberg
Copy link
Member Author

hmmm, ok :(

Copy link
Member

@simonbrunel simonbrunel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure how to unit test this

@etimberg
Copy link
Member Author

Ok. merging since i don't think there is an easy way to unit test this

@etimberg etimberg merged commit 5a3de51 into master Aug 21, 2017
@simonbrunel simonbrunel deleted the radial_scale_start_angle_labels branch August 24, 2017 08:28
yofreke pushed a commit to yofreke/Chart.js that referenced this pull request Dec 30, 2017
@shijiezhou1
Copy link

Finally, I find the solution of rotation the radar chart to a certain degree.

image

To be clear, I will show how people should use it.

const options = {
        startAngle: 45, // this is where the angle you should put
}

@RBSUS
Copy link

RBSUS commented Apr 7, 2021

This is still an issue in version 2.9.4. yet seems to work on 2.6.0. Bug seems to be re-introduced in 2.7.0.

A hacky solution I am currently using to draw vertical ticks when using startAngle.
Add the following to options:

animation: {
  onProgress: (animation) => {
    let chart = animation.chart;
    var ctx = animation.chart.ctx;
    ctx.font = Chart.helpers.fontString(
      Chart.defaults.global.defaultFontSize,
      Chart.defaults.global.defaultFontStyle,
      Chart.defaults.global.defaultFontFamily
    );
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = '#222222';
    ctx.fillText('9', 188, 65);
    ctx.fillText('1', 188, 145);
    ctx.fillText('3', 188, 125);
    ctx.fillText('5', 188, 105);
    ctx.fillText('7', 188, 85);
  },
},

exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021
@TraderMeras
Copy link

Did you ever get this fixed? Doesnt work for my project
https://codepen.io/meras111/pen/oNyvdZN?editors=1000

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

startAngle on radar chart value out of chart
5 participants