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

Add centerPointLabels option for linear radial scale #9949

Merged
merged 7 commits into from Dec 21, 2021

Conversation

t-mangoe
Copy link
Contributor

@t-mangoe t-mangoe commented Dec 4, 2021

I added code to automatically center the point labels when using a polar graph.
This solves the issue of #9662

Copy link
Collaborator

@LeeLenaleee LeeLenaleee left a comment

Choose a reason for hiding this comment

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

The documentation for the new properties and typings are also still missing

src/controllers/controller.polarArea.js Outdated Show resolved Hide resolved
src/scales/scale.radialLinear.js Outdated Show resolved Hide resolved
src/scales/scale.radialLinear.js Outdated Show resolved Hide resolved
Copy link
Member

@kurkle kurkle left a comment

Choose a reason for hiding this comment

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

All the points @LeeLenaleee pointed need to be changed before we can approve this.

@kurkle kurkle linked an issue Dec 8, 2021 that may be closed by this pull request
Copy link
Member

@kurkle kurkle left a comment

Choose a reason for hiding this comment

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

The implementation and test looks good to me.
There are couple of things to do still:

  • add to documentation [1]
  • add to types [2]
  • add a sample (optional, but would be good)

| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label.
| `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
| `display` | `boolean` | | `true` | if true, point labels are shown.
| `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
| `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label.
| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](../../general/fonts.md)
| `padding` | `number` | Yes | 5 | Padding between chart and point labels.

pointLabels: {

@t-mangoe
Copy link
Contributor Author

@kurkle
Thank you for your kind instruction!!
I added documentation and types.
(I didn't know how to add a sample, so I added no samples. sorry...)

@LeeLenaleee
Copy link
Collaborator

Easyest way to add a sample for this is to copy paste this file and name it something like: polar-area-centerPointLabels

After that you enable the point labels in the options (config block).

Then you can add that sample in the navbar by adding it beneath the link for the default polar area sample here.

That should make it work. You can then test it by running npm run docs:dev and after it is done building by browsing to localhost:8080/samples and then in the sidebar to the sample you just made.

If it doesn't work I will make the sample after this pr gets merged so no big deal

@kurkle
Copy link
Member

kurkle commented Dec 21, 2021

@LeeLenaleee if you have the time to create a sample for this, it would be great!

@kurkle kurkle changed the title center point labels to slices in polar chart Add centerPointLabels option for linear radial scale Dec 21, 2021
@kurkle kurkle merged commit 961533c into chartjs:master Dec 21, 2021
@kurkle
Copy link
Member

kurkle commented Dec 21, 2021

Thanks @t-mangoe

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.

Center point labels to slices in polar chart
3 participants