CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user9631257
user9631257

Reputation:

How do I make a simple element smaller?

I want to make a circle graph saying the cpu percentage. I got it working

The problem is that this graph is huge and I can't seem to make it smaller.

Is there a way to do this with css? I'm using bootstrap if that helps

WORKING JSFIDDLE

https://jsfiddle.net/9dajqcr1/2975/

    $( document ).ready(function() { // 6,32 5,38 2,34
        $("#test-circle").circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 2,
            backgroundBorderWidth: 2,
            percent: 38,
            textSize: 1,
            textStyle: 'font-size: 1px;',
            textColor: '#666',
            multiPercentage: 1,
            percentages: [10, 20, 30]
        });
    });
<section class="container">

    <h3>Circliful</h3>

    <div class="row">
        <div class="col-lg-2">
            <div id="test-circle"></div>
        </div>
    </div>
</section>

Upvotes: 0

Views: 444

Answers (2)

Anastasios Selmani
Anastasios Selmani

Reputation: 3699

Maybe to handle resizing over different screens you could use this:

#test-circle {
  min-width: 100px;
  width: 20%;
}

I prefer it more than using static size measures.

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

You can assign height or width to the container div for the chart. Try this code.

#test-circle {
  width: 150px;
}

Upvotes: 2

Related Questions