Mon. Jan 23rd, 2023

[ANSWERED] html – Circle Position Can’t be Set

By

Nov 20, 2022 css, html

Solution 1 :

Just change your style for .container the rule grid-gap like this (I changed it to 30px for example)

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 160px);
  /* Use this rule to control the space between the circles for example I changed it to 30px*/
  grid-gap: 30px;
  margin: auto 0;
}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 160px);
  }
}

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

<div class="container">
  <div class="box">
    <div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>
    <h2>Html</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="90" data-scale-color="#ffb400">90%</div>
    <h2>Css</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="85" data-scale-color="#ffb400">85%</div>
    <h2>Javascript</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="95" data-scale-color="#ffb400">95%</div>
    <h2>Photoshop</h2>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

Problem :

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 80px);
  grid-gap: 10px;
  margin: auto 0;

}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 80px);

  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 80px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 80px);
  }
}

.container .box {
  width: 100%;

}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;

}

.container .box .chart {

  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 120px;
  height: 80px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

$(function() {
  $('.chart').easyPieChart({
    size: 80,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

I want to make the circle closer, but it seems not to be working. I just try everything on this CSS and nothing seems to be working here. Does anyone know how to solve this? which one should I change to make the circle closer? For the gap between circle A and B and C and D.

UPDATE the js and css already been resized , but the line is wider , any sollution ?

Comments

Comment posted by how to create a minimal reproducible example

Welcome to Stack Overflow! Please include your HTML. How could we test this without that? Please read

Comment posted by Saadi Toumi Fouad

Just change your style for

Comment posted by Rust Romania Player

how can i resize the circle ? its seems if i resize from % , the gap cant be change

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

Leave a Reply Cancel reply