- Home
- Design system
- Elements
- Scale
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
<!-- Set width using a percentage -->
<div class="ds-scale" style="--ds-scale-pc: 60%;"></div>
<!-- Set width using a css calc() -->
<div class="ds-scale" style="--ds-scale-pc: calc(7 / 10 * 100%);"></div>
document.getElementById("customScale").style.setProperty('--ds-scale-pc', "33%")
<div id="customScale" class="ds-scale"></div>
Styles
Progress
html
Copy
<div class="ds-scale --progress" style="--ds-scale-pc: 60%;"></div>
Component color
Default style
html
Copy
<div class="ds-scale --color-orange" style="--ds-scale-pc: 60%;"></div>
Progress style
html
Copy
<div
class="ds-scale --progress --color-orange"
style="--ds-scale-pc: 60%;"
></div>