o-arc web component
<o-arc> is a standard and vanilla web-component for rendering a radial arcs or pies. The JavaScript runtime supports more than 60 arcs per orbit. Omit value for equal segments; an explicit value="0" produces an empty segment.
Reference
Section titled “Reference”| Attribute | Default | Purpose |
|---|---|---|
value |
— | Share of the orbit’s range, relative to max. Without it, arcs split the range equally. |
max |
100 |
Value that fills the whole range. |
shape |
none |
Ending shape. See Changing endings. |
text-anchor |
middle |
Text alignment along the arc: start, middle or end. |
flip |
— | Turns the text upside down so it reads left to right at the bottom. |
fit-range |
— | Stretches the text to the whole arc. |
interactive |
— | Lets the SVG receive pointer events. See Pointer interaction. |
| CSS property | Default | Purpose |
|---|---|---|
--o-fill |
var(--o-gray-light) |
Arc fill. Use transparent for text-only arcs. |
--o-stroke |
var(--o-fill) |
Arc border. |
--o-stroke-width |
1 |
Arc border width. |
--o-color |
currentcolor |
Text color. The CSS color property works too. |
--o-gap |
1 |
Space between sibling arcs. .gap-0 to .gap-30 set it; inline values can go higher. |
Look and feel
Section titled “Look and feel”Changing arc border and colors
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Changing endings
Section titled “Changing endings”o-arc has one special attribute: shape to define different endings. You can choose between circle (or circle-a), circle-b, arrow, bullet, rounded, slash, backslash, zizag shapes. Default none.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjust o-arc size
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjust o-arc gaps
Section titled “Adjust o-arc gaps”.gap-*: Set a gap space between o-arcs ranging from 0 to 30,
For a wider gap, set --o-gap directly. A ring of 3 to 6 segments usually needs --o-gap: 24 to 60 to read as separate pieces:
<o-arc style="--o-gap: 40"></o-arc>Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjusting radial layout
Section titled “Adjusting radial layout”Arbitrary o-arc angle.
Section titled “Arbitrary o-arc angle.”.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Relative o-arc orbital position
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Rendering curved text.
Section titled “Rendering curved text.”Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Changing text colors
Section titled “Changing text colors”Font colors, size and other font properties
Section titled “Font colors, size and other font properties”To change o-arc any CSS font properties just added in a o-arc style or class.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Background colors
Section titled “Background colors”To change o-arc background color use CSS custom var --o-fill in a o-arc style.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Changing text justification
Section titled “Changing text justification”Use text-anchor attribute
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Use flip attribute
Section titled “Use flip attribute”o-arc allows upside down its content to using flip attribute. Useful to make text more legible.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Use fit-range attribute
Section titled “Use fit-range attribute”o-arc allows distribute its content to fill text-length using fit-range attribute.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Use o-arc to create charts
Section titled “Use o-arc to create charts”To create pie / sunburst or donut charts simple use attribute value from 0 to 100 in o-arc.
To use your own scale, set max on each arc: with max="24", value="6" takes a quarter of the range. Values are not normalized, so make them add up to max for a full ring.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Pointer interaction
Section titled “Pointer interaction”<o-arc> is decorative by default so it does not intercept nearby controls. Add interactive to enable pointer events on its painted SVG:
<o-arc interactive value="72"></o-arc>Use an accessible button or provide keyboard behavior and an accessible name when the element acts as a control.