Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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...

enter image description here

...to look like this.

enter image description here

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


christopherbirwin pro commented 5 years ago

So, thanks! I'm glad to help!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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