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

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.40.1/ds-scale/manifest.json?v=3.40.1

manifest.json

Copy