jlengrand/d3-progress-meter
1
0
Fork 0
mirror of https://github.com/jlengrand/d3-progress-meter.git synced 2026-03-10 08:11:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support styling the current text

Browse Source
This commit is contained in:
Ronny Roeller
2017-11-13 16:34:32 +01:00
parent 3cca880fd9
commit f6d626ac49
3 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -48,6 +48,7 @@ To use this element:
--progress-meter-color-low: #009999;
--progress-meter-color-medium: #009999;
--progress-meter-color-high: #009999;
--progress-meter-color-current: #009999;
}
</style>

1
d3-progress-meter.html
View File

@@ -81,6 +81,7 @@ the `current-text` font size is half that of the `radius`.
#current {
font-weight: bold;
font-size: calc(var(--radius) * var(--progress-meter-current-font-size-scale));
fill: var(--progress-meter-color-current);
}
#type {
margin-top: 5px;

8
demo/index.html
View File

@@ -13,5 +13,13 @@
<h2>Progress meter without goal line</h2>
<d3-progress-meter radius="100" percentage="0.75" current-text="70%"></d3-progress-meter>
<h2>Progress meter with custom styling</h2>
<style is="custom-style">
.custom {
--progress-meter-color-current: red;
}
</style>
<d3-progress-meter radius="100" percentage="0.75" current-text="30%" class="custom"></d3-progress-meter>
</body>
</html>