Minimalist Charts: Any Way to Display a Value Instead of a P


Topic: Minimalist Charts: Any Way to Display a Value Instead of a Percent?

christopherbirwin pro asked 6 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 6 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 6 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 6 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
  • User: 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