Topic: Minimalist Charts: Any Way to Display a Value Instead of a Percent?
christopherbirwin pro asked 5 years ago
So, I hope someone can tell me how to remove the percent sign from the values displayed in the Minimalist Charts, described here:
https://mdbootstrap.com/docs/jquery/javascript/charts/
The Code Snippet is here:
https://mdbootstrap.com/snippets/jquery/christopherbirwin/320534
Essentially, I'd like this...
...to look like this.
Here's my current code:
HTML
<!--STATS SECTION--->
<section>
<!-- Wrapper -->
<div class="h-100 text-center blue-grey lighten-5 py-5">
<!--Row-->
<div class="row align-items-center h-100 d-xl-flex justify-content-center sp0-jumbotron-menu-visible">
<!--Stat 1-->
<div class="col-2 h-100 d-none d-lg-block">
<span class="min-chart" id="chart-1" data-percent="30"><span class="percent"></span></span>
</div>
<!--/Stat 1-->
<!--Stat 2-->
<div class="col-2 h-100 d-none d-lg-block">
<span class="min-chart" id="chart-2" data-percent="77"><span class="percent"></span></span>
</div>
<!--/Stat 2-->
<!--Stat 3-->
<div class="col-3 h-100 d-none d-lg-block">
<span class="min-chart" id="chart-3" data-percent="997"><span class="percent"></span></span>
</div>
<!--/Stat 3-->
</div>
<!--/Row-->
</div>
<!--/Wrapper-->
</section>
<!--/STATS SECTION-->
JS
$(function () {
$('.min-chart#chart-1').easyPieChart({
barColor: "green",
lineWidth: 5,
size: 120,
onStep: function (from, to, value) {
$(this.el).find('.percent').text(Math.round(value));
}
});
});
$(function () {
$('.min-chart#chart-2').easyPieChart({
barColor: "gold",
lineWidth: 5,
size: 120,
onStep: function (from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
$(function () {
$('.min-chart#chart-3').easyPieChart({
barColor: "red",
lineWidth: 5,
size: 120,
onStep: function (from, to, value) {
$(this.el).find('.percent').text(Math.round(value));
}
});
});
christopherbirwin pro answered 5 years ago
Fixed it. What I did: I added a new class .integer and gave it an empty content.
CSS
.min-chart .integer {display: inline-block; line-height: 110px; z-index: 2; }
.min-chart .integer:after { content: ""; margin-left: 0.1em; font-size: 1.4rem; }
HTML
<!--Stat 1-->
<div class="col-2 h-100 d-none d-lg-block">
<span class="min-chart" id="chart-1" data-percent="30"><span class="integer"></span></span>
</div>
<!--/Stat 1-->
<!--Stat 2-->
<div class="col-2 h-100 d-none d-lg-block">
<span class="min-chart" id="chart-2" data-percent="77"><span class="percent"></span></span>
</div>
<!--/Stat 2-->
<!--Stat 3-->
<div class="col-3 h-100 d-none d-lg-block">
<span class="min-chart" id="chart-3" data-percent="997"><span class="integer"></span></span>
</div>
<!--/Stat 3-->
JS
$(function () {
$('.min-chart#chart-1').easyPieChart({
barColor: "green",
lineWidth: 5,
size: 130,
onStep: function (from, to, value) {
$(this.el).find('.integer').text(Math.round(value));
}
});
});
$(function () {
$('.min-chart#chart-2').easyPieChart({
barColor: "gold",
lineWidth: 5,
size: 130,
onStep: function (from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
$(function () {
$('.min-chart#chart-3').easyPieChart({
barColor: "red",
lineWidth: 5,
size: 130,
onStep: function (from, to, value) {
$(this.el).find('.integer').text(Math.round(value));
}
});
});
Mikołaj Smoleński staff answered 5 years ago
Hi Christopher,
I'm glad that You found the solution and thanks for sharing Your code with us. It might be helpful for the other Users.
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes