Skip to content

insidetextorientation attribute in pie and sunburst #1659

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jan 27, 2020
Merged

insidetextorientation attribute in pie and sunburst #1659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0c63c8
insidetextorientation attribute in pie and sunburst
Jan 14, 2020
1f4a05d
minor revisions
Jan 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions _posts/plotly_js/basic/pie/2020-01-14-inside-text-orientation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
name: Control text orientation inside Pie slices
language: plotly_js
suite: pie
order: 5
sitemap: false
arrangement: horizontal
markdown_content: |
The [insidetextorientation](https://plot.ly/javascript/reference/#pie-insidetextorientation) attribute controls the orientation of the texts inside slices. With 'auto' the texts may automatically be rotated to fit with the maximum size inside the slice. The other three options 'horizontal', 'radial', and 'tangential' forces text to be horizontal, radial, and tangential.
---
var data = [{
type: "pie",
values: [2, 3, 4, 4],
labels: ["Wages", "Operating expenses", "Cost of sales", "Insurance"],
textinfo: "label+percent",
Copy link

Choose a reason for hiding this comment

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

Let's add

textposition: "inside",

here to ensure all the text fits inside.

Copy link
Contributor

@jdamiba jdamiba Jan 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Hey Mahdis, this PR is looking really good. I just have a suggestion, which also applies to the sunburst doc in this PR.

I think that text could more explicitly describe these options.

Perhaps something like:

The insidetextorientation attribute controls the orientation of the text inside chart sectors. When set to 'auto', text may be oriented in any direction in order to be as big as possible in the middle of a sector. The 'horizontal' option orients text to be parallel with the bottom of the chart, and will make text smaller in order to achieve that goal. The 'radial' option orients text along the radius of the sector. The 'tangential' option orients text perpendicular to the radius of the sector.

What do you think?

Along with Mojtaba's comments, this looks ready to merge!

Copy link

Choose a reason for hiding this comment

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

Note that if you were to imagine your chart as a clock face, the 'horizontal', 'radial', and 'tangential' options first try to orient text at the the 3:00, 6:00, 9:00, and 12:00 hours. If that is not possible due to space constraints, then they position the text in the middle of the arc. On the other hand the auto option always shrinks text to fit in the middle of the arc.

insidetextorientation: "radial"
}]
var layout = [{
height: 700,
width: 700
}]

Plotly.newPlot('myDiv', data, layout)
29 changes: 29 additions & 0 deletions _posts/plotly_js/basic/sunburst/2020-01-14-inside-text-orientation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
name: Control text orientation inside Sunburst slices
language: plotly_js
suite: sunburst
order: 6
sitemap: false
arrangement: horizontal
markdown_content: |
The [insidetextorientation](https://plot.ly/javascript/reference/#sunburst-insidetextorientation) attribute controls the orientation of the texts inside chart sectors. When set to 'auto' the texts may automatically be rotated to fit with the maximum size inside a sector. The other three options 'horizontal', 'radial', and 'tangential' first try to orient text at the 3:00, 6:00, 9:00, and 12:00 hours. If there is no enough room, then the text would be positioned in the middle of the arc.
---
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) {return row[key]})
}

var data = [{
type: "sunburst",
maxdepth: 2,
ids: unpack(rows, 'ids'),
labels: unpack(rows, 'labels'),
parents: unpack(rows, 'parents'),
textposition: 'inside',
insidetextorientation: 'radial'
}]

var layout = {margin: {l: 0, r: 0, b: 0, t:0}}

Plotly.newPlot('myDiv', data, layout)
Copy link

Choose a reason for hiding this comment

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

This line as well as some lines above may require indentation.

})