o-arc custom element
<o-arc> is a standard and vanilla web-component for rendering a radial arcs or pies. By default there are up to 60 arcs elements per orbit.
Look and feel
Changing arc border and colors
To change o-arc colors use CSS custom var --o-fill for background, --o-stroke for border, and --o-stroke-width for border-width in a o-arc style.
Changing endings
o-arc has one special attribute: shape to define different endings. Currently, you can choose between circle, arrow, bullet, shapes. Default none.
Adjust o-arc size
Each o-arc has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the vectors to shrink by a specified percentage.
On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing vector to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.
Adjust o-arc gaps
.gap-*: Set a gap space between o-arcs ranging from 0 to 30,
Adjusting radial layout
Arbitrary o-arc angle.
.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Relative o-arc orbital position
By default, o-arc is positioned in the middle of orbit path. To change that, there some CSS utilities:
.inner-orbit: To place ano-arc just below its orbit.
.outer-orbit: To place o-arc just above its orbit.
.quarter-inner-orbit: To place o-arc a 25% into its orbit.
.quarter-outer-orbit: To place o-arc a 25% outer its orbit.
Rendering curved text.
Changing text colors
Font colors, size and other font properties
To change o-arc any CSS font properties just added in a o-arc style or class.
Background colors
To change o-arc background color use CSS custom var --o-fill in a o-arc style.
Changing text justification
Use text-anchor attribute
o-arc has one special attribute: text-anchor to arrange its content. You can choose between start, middle, and end values.
Use flip attribute
o-arc allows upside down its content to using flip attribute. Useful to make text more legible.
Use fit-range attribute
o-arc allows distribute its content to fill text-length using fit-range attribute.
Use o-arc to create charts
To create pie / sunburst or donut charts simple use attribute value from 0 to 100 in o-arc.