Scale

Overview

Scale is a basic html only implementation of a scale/bar chart

CSS Variables

The following css variables can be set using css, a style tag or javascript to control this component

Variable	Type	Default	Description
–ds-scale-pc	percentage	0%	Sets the width of the bar
–ds-scale-width	percentage	100%	Sets the width of the overall scale

Options

Basic usage

The minimum requirement is to set the --ds-scale-pc css variable to control the width of the scales bar. This must be a percentage value, ie. --ds-scale-pc: 40% or css calculation that results in a percentage, ie. --ds-scale-pc: calc(1 / 3 * 100%).

Scale element

html

Copy

document.getElementById("customScale").style.setProperty('--ds-scale-pc', "33%")

<div id="customScale" class="ds-scale"></div>

Component colors

Default style

html

Copy

Progress style

html

Copy

Styles

Progress

html

Copy

Examples

Usage thresholds

Use the caution and excess modifiers to distinguish usage that is approaching or has reached its allowance.

Usage thresholds

html

Copy

Manifest

The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/3.44.0/ds-scale/manifest.json?v=3.44.0

manifest.json

Copy